Tutorial - Easy editable TH slider by User

Stagger Lee
1818 Posts
Stagger Lee posted this 25 March 2017

Here is it. Very simple. You will need ACF PRO licence (Options Page, Repeater):
https://www.advancedcustomfields.com/pro/

Or find some free custom plugin with repeater field and adapt code to it.

This goes inside yout TH - Home - Settings - Additional CMS code. To make new backend link/Page. I chosed to have it outside, as standalone:

if( function_exists('acf_add_options_page') ) {


    acf_add_options_page(array(
        'page_title'    => 'Slider',
        'menu_title'    => 'Slider',
        'menu_slug'     => 'slider-general-settings',
        'capability'    => 'edit_posts',
        'redirect'      => false,
        'icon_url'      => 'dashicons-images-alt2',
    ));


}
  • Make slider in TH.
  • Make max number of slider images you want. Dont overdo, all images are pulled on page load, it is not Ajax load.
  • Best is to make finished first slide , all text, comntainers, other controls inside. When finished copy it several times.
  • Insert CMS Control in first slide. Go to the More options, remove absolute position, remove top, bottom, right, left values, set all width, height options to 100%.
  • Delete all TH images in slider, if any. It has to be empty.
  • In first CMS Control add this code and adapt it for all next ACF repeater images.

<p>&lt;?php <br>
//rows = repeater slug<br>
//repeater_subfield = image sub-field<br>
//First Repeater Row in Array<br>
$rows = get_field( 'images', 'option' );// grab all rows from page ID <br>
$repeater_subfield = $rows[0]['image'];//grabs first image content- change number in both for different row<br>
$image = '&lt;img src="' . $repeater_subfield . '" /&gt;'; //set surrounding HTML markup<br>
echo $image;<br>
?&gt;</p>

Just change numbers in [0]:

[0] = First image
[1] = Second image
[2] = Third image
[3] = Fourth image
[4] = Fifth image

You can call fields, images from simple WP Page too. Just change get_field( 'images', 'option' ); to say get_field( 'images', 46 );
I find it better this way, appearance and easiness of installed slider plugin.

Dont forget to open CMS Control in all slides and change this value: $rows[0]['image'].

Tested and it works very well. There is no point making screenshots, looks like any Themler slider.

Here is it. Very simple. You will need ACF PRO licence (Options Page, Repeater): https://www.advancedcustomfields.com/pro/ Or find some free custom plugin with repeater field and adapt code to it. This goes inside yout TH - Home - Settings - Additional CMS code. To make new backend link/Page. I chosed to have it outside, as standalone: if( function_exists('acf_add_options_page') ) { acf_add_options_page(array( 'page_title' => 'Slider', 'menu_title' => 'Slider', 'menu_slug' => 'slider-general-settings', 'capability' => 'edit_posts', 'redirect' => false, 'icon_url' => 'dashicons-images-alt2', )); } - Make slider in TH. - Make max number of slider images you want. Dont overdo, all images are pulled on page load, it is not Ajax load. - Best is to make finished first slide , all text, comntainers, other controls inside. When finished copy it several times. - Insert CMS Control in first slide. Go to the More options, remove absolute position, remove top, bottom, right, left values, set all width, height options to 100%. - Delete all TH images in slider, if any. It has to be empty. - In first CMS Control add this code and adapt it for all next ACF repeater images. &lt;p&gt;&amp;lt;?php &lt;br&gt; //rows = repeater slug&lt;br&gt; //repeater_subfield = image sub-field&lt;br&gt; //First Repeater Row in Array&lt;br&gt; $rows = get_field( &#39;images&#39;, &#39;option&#39; );// grab all rows from page ID &lt;br&gt; $repeater_subfield = $rows[0][&#39;image&#39;];//grabs first image content- change number in both for different row&lt;br&gt; $image = &#39;&amp;lt;img src=&quot;&#39; . $repeater_subfield . &#39;&quot; /&amp;gt;&#39;; //set surrounding HTML markup&lt;br&gt; echo $image;&lt;br&gt; ?&amp;gt;&lt;/p&gt; Just change numbers in [0]: [0] = First image [1] = Second image [2] = Third image [3] = Fourth image [4] = Fifth image You can call fields, images from simple WP Page too. Just change **get_field( 'images', 'option' );** to say **get_field( 'images', 46 );** I find it better this way, appearance and easiness of installed slider plugin. Dont forget to open CMS Control in all slides and change this value: $rows[0]['image']. Tested and it works very well. There is no point making screenshots, looks like any Themler slider.
slider wordpress edit custom-fields user
Vote to pay developers attention to this features or issue.
2 Comments
Order By: Standard | Newest
Stagger Lee
1818 Posts
Stagger Lee posted this 25 March 2017 

<?php 
//rows = repeater slug
//repeater_subfield = image sub-field
//First Repeater Row in Array
$rows = get_field( 'images', 'option' );// grab all rows from page ID 
$repeater_subfield = $rows[0]['image'];//grabs first image content- change number in both for different row
$image = '<img src="' . $repeater_subfield . '" />'; //set surrounding HTML markup
echo $image;
?>

<?php //rows = repeater slug //repeater_subfield = image sub-field //First Repeater Row in Array $rows = get_field( 'images', 'option' );// grab all rows from page ID $repeater_subfield = $rows[0]['image'];//grabs first image content- change number in both for different row $image = '<img src="' . $repeater_subfield . '" />'; //set surrounding HTML markup echo $image; ?>
Stagger Lee
1818 Posts
Stagger Lee posted this 25 March 2017

Same way you can add additional field, besides image field, in repeater and have some text over images. Users can change it, no need for login inside and using Themler. Some kind of image overlay, one text field or similar. Or anything else needed, just put it in repeater and call it over images.

Maybe you will need to give all wrapper container holdins different stuff over images (Themler way, not fields) z-index:1 if they are not visible, if they are under image called via CMS Control.

Same way you can add additional field, besides image field, in repeater and have some text over images. Users can change it, no need for login inside and using Themler. Some kind of image overlay, one text field or similar. Or anything else needed, just put it in repeater and call it over images. Maybe you will need to give all wrapper container holdins different stuff over images (Themler way, not fields) z-index:1 if they are not visible, if they are under image called via CMS Control.
You must log in or register to leave comments