Tutorial: Make Themler slider pull WP content, posts

Stagger Lee
1796 Posts
Stagger Lee posted this 21 January 2016

It is for WordPress. Probably not so difficult to make same for any CMS but dont need it now and will try it later.

Results are like this. Those 3 different Posts are in category "Featured" and show featured image, excerpt and title in slider.

http://attachments.answers.billiondigital.com/757/9757/2016-01-21-192140.jpg

http://attachments.answers.billiondigital.com/758/9758/2016-01-21-192237.jpg

http://attachments.answers.billiondigital.com/759/9759/2016-01-21-192307.jpg

It is for WordPress. Probably not so difficult to make same for any CMS but dont need it now and will try it later. Results are like this. Those 3 different Posts are in category "Featured" and show featured image, excerpt and title in slider. ![http://attachments.answers.billiondigital.com/757/9757/2016-01-21-192140.jpg][1] ![http://attachments.answers.billiondigital.com/758/9758/2016-01-21-192237.jpg][2] ![http://attachments.answers.billiondigital.com/759/9759/2016-01-21-192307.jpg][3] [1]: http://attachments.answers.billiondigital.com/757/9757/2016-01-21-192140.jpg [2]: http://attachments.answers.billiondigital.com/758/9758/2016-01-21-192237.jpg [3]: http://attachments.answers.billiondigital.com/759/9759/2016-01-21-192307.jpg
Vote to pay developers attention to this features or issue.
24 Comments
Order By: Standard | Newest
Stagger Lee
1796 Posts
Stagger Lee posted this 21 January 2016

  1. Make new slider
  2. Make just one slide
  3. Dont put any image inside
  4. Insert new CMS Code control inside slide
  5. In this CMS control paste this code. Change category slug to your category holding slider posts:

<?php
// WP_Query arguments
$args = array (
'post_type' => array( 'post' ),
'post_status' => array( 'publish' ),
'category_name' => 'featured',
'nopaging' => false,
'posts_per_page' => '1',
'offset' => '1',
'order' => 'DESC',
'orderby' => 'date',
'cache_results' => true,
'update_post_meta_cache' => true,
'update_post_term_cache' => true,
);

// The Query
$query_themler_slider_image = new WP_Query( $args );

// The Loop
if ( $query_themler_slider_image->have_posts() ) {
while ( $query_themler_slider_image->have_posts() ) {
$query_themler_slider_image->the_post();
// do something
echo '<a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_the_title( $post_id ) ) . '">';
if (has_post_thumbnail()):
the_post_thumbnail();
endif;
echo '</a>';

}
} else {
// no posts found
echo 'No description found';
}

// Restore original Post Data
wp_reset_postdata();
?>

1. Make new slider 2. Make just one slide 3. Dont put any image inside 4. Insert new CMS Code control inside slide 5. In this CMS control paste this code. Change category slug to your category holding slider posts: &lt;?php // WP_Query arguments $args = array ( 'post_type' =&gt; array( 'post' ), 'post_status' =&gt; array( 'publish' ), 'category_name' =&gt; 'featured', 'nopaging' =&gt; false, 'posts_per_page' =&gt; '1', 'offset' =&gt; '1', 'order' =&gt; 'DESC', 'orderby' =&gt; 'date', 'cache_results' =&gt; true, 'update_post_meta_cache' =&gt; true, 'update_post_term_cache' =&gt; true, ); // The Query $query_themler_slider_image = new WP_Query( $args ); // The Loop if ( $query_themler_slider_image-&gt;have_posts() ) { while ( $query_themler_slider_image-&gt;have_posts() ) { $query_themler_slider_image-&gt;the_post(); // do something echo '&lt;a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_the_title( $post_id ) ) . '"&gt;'; if (has_post_thumbnail()): the_post_thumbnail(); endif; echo '&lt;/a&gt;'; } } else { // no posts found echo 'No description found'; } // Restore original Post Data wp_reset_postdata(); ?&gt;

Last edited 21 January 2016 by Stagger Lee

Stagger Lee
1796 Posts
Stagger Lee posted this 21 January 2016

  1. Insert new Box Absolute control inside slide
  2. Width 100%, height auto, left,right,bottom = 0, top = auto.
  3. Make some styling with Themler. Trabsparency, background color, anything you wish.
  4. Insert second CMS control inside this Box Absolute. It has to be inside for examples as on screenshots.
  5. In this CMS control paste this code:

<?php
// WP_Query arguments
$args = array (
'post_type' => array( 'post' ),
'post_status' => array( 'publish' ),
'category_name' => 'featured',
'nopaging' => false,
'offset' => '1',
'posts_per_page' => '1',
'order' => 'DESC',
'orderby' => 'date',
'cache_results' => true,
'update_post_meta_cache' => true,
'update_post_term_cache' => true,
);

// The Query
$query_themler_slider = new WP_Query( $args );

// The Loop
if ( $query_themler_slider->have_posts() ) {
while ( $query_themler_slider->have_posts() ) {
$query_themler_slider->the_post();
// do something

echo '<p><a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_the_title( $post_id ) ) . '">';
echo the_title();
echo '</a></p>';

$my_excerpt = get_the_excerpt();
if ( '' != $my_excerpt ) {
// Some string manipulation performed
}
echo substr($my_excerpt, 0,200) . '...'; // Outputs the processed value to the page

}
} else {
// no description found
echo 'No description found';
}

// Restore original Post Data
wp_reset_postdata();
?>

6. Insert new Box Absolute control inside slide 7. Width 100%, height auto, left,right,bottom = 0, top = auto. 8. Make some styling with Themler. Trabsparency, background color, anything you wish. 9. Insert second CMS control inside this Box Absolute. It has to be inside for examples as on screenshots. 10. In this CMS control paste this code: &lt;?php // WP_Query arguments $args = array ( 'post_type' =&gt; array( 'post' ), 'post_status' =&gt; array( 'publish' ), 'category_name' =&gt; 'featured', 'nopaging' =&gt; false, 'offset' =&gt; '1', 'posts_per_page' =&gt; '1', 'order' =&gt; 'DESC', 'orderby' =&gt; 'date', 'cache_results' =&gt; true, 'update_post_meta_cache' =&gt; true, 'update_post_term_cache' =&gt; true, ); // The Query $query_themler_slider = new WP_Query( $args ); // The Loop if ( $query_themler_slider-&gt;have_posts() ) { while ( $query_themler_slider-&gt;have_posts() ) { $query_themler_slider-&gt;the_post(); // do something echo '&lt;p&gt;&lt;a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_the_title( $post_id ) ) . '"&gt;'; echo the_title(); echo '&lt;/a&gt;&lt;/p&gt;'; $my_excerpt = get_the_excerpt(); if ( '' != $my_excerpt ) { // Some string manipulation performed } echo substr($my_excerpt, 0,200) . '...'; // Outputs the processed value to the page } } else { // no description found echo 'No description found'; } // Restore original Post Data wp_reset_postdata(); ?&gt;
Stagger Lee
1796 Posts
Stagger Lee posted this 21 January 2016

Now when you are sure slide 1 is finished copy this slide (duplicate) as many times as you need posts in slider.
In first slide comment this part of code in both CMS controls:

// 'offset' => '1',

Offset is for second, third, etc posts. Offset 1 next, offset 2 third, you get the logic.
Use offset line just in other slides, not first. You can delete it in first or comment.

No CSS is needed as all styling you do with Themler, elements inside slides.

Now when you are sure slide 1 is finished copy this slide (duplicate) as many times as you need posts in slider. In first slide comment this part of code in both CMS controls: // 'offset' => '1', Offset is for second, third, etc posts. Offset 1 next, offset 2 third, you get the logic. Use offset line just in other slides, not first. You can delete it in first or comment. No CSS is needed as all styling you do with Themler, elements inside slides.

Last edited 21 January 2016 by Stagger Lee

Stagger Lee
1796 Posts
Stagger Lee posted this 21 January 2016

It is all. Took me all day, but now it is very easy. Probably best thing for WooCommerce slides and pulling products info. Just a little adaptation of code is needed.

You can add date, author, all possible. Just find out how Themler do it in templates and borrow code. It is not difficult. You can even thanks to the Themler disable excerpts in smartphones, with one click.

I dont know why developers dont do it as native thing in Themler.
Maybe moderation can change icon of topic for votes ?

It is all. Took me all day, but now it is very easy. Probably best thing for WooCommerce slides and pulling products info. Just a little adaptation of code is needed. You can add date, author, all possible. Just find out how Themler do it in templates and borrow code. It is not difficult. You can even thanks to the Themler disable excerpts in smartphones, with one click. I dont know why developers dont do it as native thing in Themler. Maybe moderation can change icon of topic for votes ?
Stagger Lee
1796 Posts
Stagger Lee posted this 21 January 2016

Here is complete slider as Section, just import it and test it.
Make one new category for slider posts, and rename it in code. Make 3 Posts and add them to category. If you need more slides just duplicate and adapt offset in the code.

Here is complete slider as Section, just import it and test it. Make one new category for slider posts, and rename it in code. Make 3 Posts and add them to category. If you need more slides just duplicate and adapt offset in the code.
Stagger Lee
1796 Posts
Stagger Lee posted this 21 January 2016

Next project will be Themler slider od images in gallery shortcodes, in Posts. Suits best for News portals and similar.
Should not be so difficult. Just to find some way to hide native gallery shortcode output.

Next project will be Themler slider od images in gallery shortcodes, in Posts. Suits best for News portals and similar. Should not be so difficult. Just to find some way to hide native gallery shortcode output.
team7
18 Posts
team7 posted this 23 January 2016

Thank you so much for this - great little piece of work. I'll test it on Monday and have a play about with it.

Much appreciated!

Thank you so much for this - great little piece of work. I'll test it on Monday and have a play about with it. Much appreciated!
Stagger Lee
1796 Posts
Stagger Lee posted this 23 January 2016

Slider of post gallery is really difficult. Not much as standalone code, they already exist for Bootstrap carousel. But point is to keep all Themler edit ability.

Slider of post gallery is really difficult. Not much as standalone code, they already exist for Bootstrap carousel. But point is to keep all Themler edit ability.
paolo.sabella
14 Posts
paolo.sabella posted this 31 January 2016

il loop non funziona. Carica una sola immagine.

  1. Make new slider
  2. Make just one slide
  3. Dont put any image inside
  4. Insert new CMS Code control inside slide
  5. In this CMS control paste this code. Change category slug to your category holding slider posts:

<?php
// WP_Query arguments
$args = array (
'post_type' => array( 'post' ),
'post_status' => array( 'publish' ),
'category_name' => 'featured',
'nopaging' => false,
'posts_per_page' => '1',
'offset' => '1',
'order' => 'DESC',
'orderby' => 'date',
'cache_results' => true,
'update_post_meta_cache' => true,
'update_post_term_cache' => true,
);

// The Query
$query_themler_slider_image = new WP_Query( $args );

// The Loop
if ( $query_themler_slider_image->have_posts() ) {
while ( $query_themler_slider_image->have_posts() ) {
$query_themler_slider_image->the_post();
// do something
echo '<a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_the_title( $post_id ) ) . '">';
if (has_post_thumbnail()):
the_post_thumbnail();
endif;
echo '</a>';

}
} else {
// no posts found
echo 'No description found';
}

// Restore original Post Data
wp_reset_postdata();
?>

il loop non funziona. Carica una sola immagine. > 1. Make new slider > 2. Make just one slide > 3. Dont put any image inside > 4. Insert new CMS Code control inside slide > 5. In this CMS control paste this code. Change category slug to your category holding slider posts: > > &lt;?php > // WP_Query arguments > $args = array ( > 'post_type' =&gt; array( 'post' ), > 'post_status' =&gt; array( 'publish' ), > 'category_name' =&gt; 'featured', > 'nopaging' =&gt; false, > 'posts_per_page' =&gt; '1', > 'offset' =&gt; '1', > 'order' =&gt; 'DESC', > 'orderby' =&gt; 'date', > 'cache_results' =&gt; true, > 'update_post_meta_cache' =&gt; true, > 'update_post_term_cache' =&gt; true, > ); > > // The Query > $query_themler_slider_image = new WP_Query( $args ); > > // The Loop > if ( $query_themler_slider_image-&gt;have_posts() ) { > while ( $query_themler_slider_image-&gt;have_posts() ) { > $query_themler_slider_image-&gt;the_post(); > // do something > echo '&lt;a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_the_title( $post_id ) ) . '"&gt;'; > if (has_post_thumbnail()): > the_post_thumbnail(); > endif; > echo '&lt;/a&gt;'; > > } > } else { > // no posts found > echo 'No description found'; > } > > // Restore original Post Data > wp_reset_postdata(); > ?&gt;
Stagger Lee
1796 Posts
Stagger Lee posted this 31 January 2016

Fix offset part. Read whole tutorial.

Fix offset part. Read whole tutorial.
paolo.sabella
14 Posts
paolo.sabella posted this 31 January 2016

Fatto, funziona.
Grazie

Fatto, funziona. Grazie
admin188
3 Posts
admin188 posted this 17 April 2016

Here is complete slider as Section, just import it and test it.
Make one new category for slider posts, and rename it in code. Make 3 Posts and add them to category. If you need more slides just duplicate and adapt offset in the code.

Hello
The plug is not working on WP4. I will ask for information on how to run a newer version of WP

> Here is complete slider as Section, just import it and test it. > Make one new category for slider posts, and rename it in code. Make 3 Posts and add them to category. If you need more slides just duplicate and adapt offset in the code. Hello The plug is not working on WP4. I will ask for information on how to run a newer version of WP
Stagger Lee
1796 Posts
Stagger Lee posted this 18 April 2016

You need to give error or detailed explanation.

Insert Section, ignore error, save work, go to the CMS Code control and adapt code to your files and categories.

You need to give error or detailed explanation. Insert Section, ignore error, save work, go to the CMS Code control and adapt code to your files and categories.
sumple
11 Posts
sumple posted this 03 November 2016

Hi I was wondering if this can be done for specific wordpress pages? Lets say I want to display pages with ID: 3, 5, 9 etc.

Is that possible?

Hi I was wondering if this can be done for specific wordpress pages? Lets say I want to display pages with ID: 3, 5, 9 etc. Is that possible?
Marcus Anderson
35 Posts
Marcus Anderson posted this 16 November 2016

Hi I was wondering if this can be done for specific wordpress pages? Lets say I want to display pages with ID: 3, 5, 9 etc.

Is that possible?

Sumple, if i were you, I'd just create a new category and add the specific pages you want to be included in the slider.

Stagger Lee has done all the heavy lifting here, just import his themler section (he posted above) and created your "featured" category.

> Hi I was wondering if this can be done for specific wordpress pages? Lets say I want to display pages with ID: 3, 5, 9 etc. > > Is that possible? Sumple, if i were you, I'd just create a new category and add the specific pages you want to be included in the slider. Stagger Lee has done all the heavy lifting here, just import his themler section (he posted above) and created your "featured" category.

Last edited 16 November 2016 by Marcus Anderson

shaulhadar
403 Posts
shaulhadar posted this 16 November 2016

Yeah stagger , great job man 👏🏻

Yeah stagger , great job man 👏🏻
Stagger Lee
1796 Posts
Stagger Lee posted this 16 November 2016

I believe I have one where repeating code is not needed. Will check later if it is true, dont have it on this PC.

I believe I have one where repeating code is not needed. Will check later if it is true, dont have it on this PC.
Stagger Lee
1796 Posts
Stagger Lee posted this 16 November 2016

Here is Post Slider as widget, with many options.
Use code in custom functions.php plugin, or Home-Settings-CMS Code. Adapt name of image size to your own.
(Lost ability to style Slider with Themler, except "More styles" options, but looks very nice as it is. "H" tags, button can be styled.

http://pastebin.com/JKXXF0Pf

CSS code:

http://pastebin.com/v1r5BxEv

Here is **Post Slider as widget**, with many options. Use code in custom functions.php plugin, or Home-Settings-CMS Code. Adapt name of image size to your own. (Lost ability to style Slider with Themler, except "More styles" options, but looks very nice as it is. "H" tags, button can be styled. [http://pastebin.com/JKXXF0Pf][1] **CSS code:** [http://pastebin.com/v1r5BxEv][2] [1]: http://pastebin.com/JKXXF0Pf [2]: http://pastebin.com/v1r5BxEv

Last edited 16 November 2016 by Stagger Lee

Stagger Lee
1796 Posts
Stagger Lee posted this 16 November 2016

Post Carousel. Old Bootstrap native carousel style, not Themler style. Change featured image name/size, number of Posts. Here is 4 in row, 12 all. Add category in array if needed.

Section ZIP is icluded at the bottom.

2016-11-16-153111.jpg

2016-11-16-153121.jpg

Post Carousel. Old Bootstrap native carousel style, not Themler style. Change featured image name/size, number of Posts. Here is 4 in row, 12 all. Add category in array if needed. Section ZIP is icluded at the bottom. !2016-11-16-153111.jpg! !2016-11-16-153121.jpg!

Last edited 16 November 2016 by Stagger Lee

jonux
3 Posts
jonux posted this 5 days ago

The first tutorial of Stagger Lee is great, but i can't see the featured image of posts in a slider. Only white space with a post title and text is displayed. What exact line should i insert or modify in order to display it ?

The first tutorial of Stagger Lee is great, but i can't see the featured image of posts in a slider. Only white space with a post title and text is displayed. What exact line should i insert or modify in order to display it ?

Last edited 5 days ago by jonux

You must log in or register to leave comments