How to Add Sticky Post Slider in WordPress Without Plugin

If you are new to WordPress and are in the process of setting up your first professional website, then you would definitely want to read this article. This article is all about how to set up a sticky post slider without a plugin.

Of course, the first thing that you or for that matter anyone is bound to ask is why should we bother to do it manually since we can use plugins for the same.

Well, most plugins do work seamlessly most of the time, but since most of them are 3rd party plugins, you cannot exactly rely on them all the time.

It is always good idea to do it manually but the catch is that you need to be well versed in HTML, CSS3, PHP etc. If you are good at coding, then you can definitely set up your own sticky post slider, one that showcases your sticky posts to perfection.

Just follow the directions posted below, to the letter and you should be able to get your sticky post sliders up and running, in no time at all.

Keep in mind that any changes you incorporate may get lost when you update WordPress so always make a point to save your changes as you carry them out.

One of the reasons that you may want to opt for a sticky post slider as opposed to sticky posts is the fact that the current version on WordPress takes too much attention away from the latest posts.

That’s why it is a good idea to feature your sticky posts as a slider as opposed to using the current version and by doing so, you would be making it easier for your users to check out the various posts on your website, from the ones tagged with the sticky post to the latest ones.

Step to Add Sticky Post Slider in WordPress Without Plugin

MooTools and noobSlide
I would primarily be using noobslide for the purpose of this post but the codes listed below can be used in connection with other sliders as well.

And since, we are going to be using noobslide, you would need to include MetoolsJavascript library. Just move over to the functions.php file in your template and add the codes that you see listed right below, that’s it.

function register_custom_js() {
wp_register_script( 'mootools', 'http://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js', '1.3.0' );
wp_register_script( 'noobslide', get_bloginfo('template_directory') . '/_class.noobSlide.packed.js' , array( 'mootools' ) );
}
 add_action( 'init', 'register_custom_js' );
 function enqueue_noobslide() {
 if ( is_home() ) { // our slider only appear in the home page, so load the script only in home page
wp_enqueue_script( 'noobslide' );
}
}
add_action( 'wp_print_scripts', 'enqueue_noobslide' );

Thumbnails
And since we are going to be using post thumbnails, you may want to add the same to your theme if it does not come with the same. Just follow the codes listed below and that should do the trick.

function custom_theme_setup() {
add_theme_support( 'post_thumbnails' );
}
add_action( 'after_setup_theme', 'custom_theme_setup' );

Custom read more link
Granted, that your WordPress site already comes with a decent “read more” link, but it is trite and overused so you may want to consider setting up your own custom “read more” CTA.

This should result in more traction for your websites and more click thorughs. Just follow the code listed below. The first thing that you need to do is to head over to the functions.php file and excerpt this line out, from the same.

//add_filter( 'get_the_excerpt', 'twentyten_custom_excerpt_more' );
Now, you need to add the following codes in its place to create your own custom read more ‘link’.
function custom_excerpt_with_more( $excerpt ) {
if ( has_excerpt() && ! is_attachment() ) {
global $post;
return $excerpt . '<p class="slider-more"><a>ID ) . '"&gt;Continue reading</a></p>';
}
return $excerpt;
}
add_filter( 'get_the_excerpt', 'custom_excerpt_with_more' );

function custom_excerpt_more( $more ) {
global $post;
return '<p class="slider-more"><a>ID ) . '"&gt;Continue reading</a></p>';
}
add_filter( 'excerpt_more', 'custom_excerpt_more' );

And please remember that custom_excerpt_with_more() function is for those excerpts that are considered automatic or user-specified excerpts with read-more tag.

CSS and JavaScript
And now we come to the all important part where we add the CSS and Javascript to the functions.php page; this step is essential if you want the sticky post slider to be up and running. Just follow the codes as listed below and copy, paste the same in your functions.php file.

function custom_slider_css_js() {
if ( is_home() ) { // only in home page
 
#slider{border:1px solid #ccc;width:640px;position:relative;overflow:hidden;height:213px;margin-bottom:20px;}
#mask{position:absolute;height:213px;}
.items{float:left;height:213px;width:640px;position:relative;}
.items .wp-post-image {float:left;}
.info{width:320px;float:left;font-family:Arial, Helvetica, sans-serif;}
#content .info h2{font-size:20px;font-weight:bold;color:#1c3f95;margin:10px 10px 15px 10px;}
#content .info p{font-size:11px;color:#1c3f95;line-height:16px;margin:10px;}
.info a{font-size:10px;padding:5px 7px;background:#e1e1e1;text-decoration:none;text-transform:uppercase;font-weight:bold;color:#1c3f95;}
.info a:hover{color:#ffffff;background:#1c3f95;}
#slider .handle{position:absolute;bottom:0;right:5px;line-height:10px;text-align:center;font-size:25px;font-weight:bold;}
.handle a{color:#ccc;height:20px;width:20px;display:inline-block;cursor:pointer;}
.handle .active{color:#1c3f95;}
.handle a:hover{color:#1c9f65;}


 /**/

}
}
add_action('wp_head', 'custom_slider_css_js' );

WordPress theme modification
Now, we get to modify the theme for the WordPress to include the codes for the slider. We need to head over to the loop file or in this case, the file that is tagged as loop.php.

Locate the file for your theme and once you have located the same, place your cursor right above the loop area and enter the codes for your slider, as shown below.

$sticky ) );

have_posts()): $count = 0; ?>
<div id="slider">
<div id="mask">
have_posts() ): $slider-&gt;the_post(); $count++; ?&gt;
<div class="items">

 <div class="info">
<h2></h2>
                    
            </div>
            </div>
 
    </div>
 <div class="handle">
  0; $count--): 
<a>&bull;</a>

</div>
</div>

Now, we are almost done – all you need to do is to check out your website to see if your sticky post slider is up and running.

If you want to carry out additional changes, you can do so with ease – all you need to do is to enter the required code and that should be it. There is one more thing that we need to do and that’s getting rid of the regular sticky posts.

The whole idea behind setting up a sticky post slider was so that it does not take away attention from the latest posts listed on your website.

And that’s exactly why we need to remove the old variant right away, just follow the codes listed below and that should do it, for the moment.

$sticky ) );

have_posts()): $count = 0; ?>
<div id="slider">
<div id="mask">
have_posts() ): $slider-&gt;the_post(); $count++; ?&gt;
<div class="items">

<div class="info">
<h2></h2>

 </div>
</div>

 </div>
<div class="handle">
 0; $count--): ?&gt;
<a>&bull;</a>

</div>
</div>

query, array( 'post__not_in' =&gt; $sticky ) );
query_posts( $args );

Now, you should be able to enjoy your completely functional Sticky post slider in WordPress; with this slider in place, your home page should look a lot less cluttered and definitely stand out for all the right reasons.

Remember that you can carry out similar changes with other themes and sliders as well. As a result of this slider you should be able to get more traction online than ever before, which in turn should lead to more traffic and better SEO.