Tutorial: Make Themler slider pull WP content, posts

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. 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();
?>

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.

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 ?

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.

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.

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!

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.

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();
?>

Fix offset part. Read whole tutorial.

Fatto, funziona.
Grazie

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

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.

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?

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

Yeah stagger , great job man 👏🏻

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

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

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.

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 12 August 2017 by jonux