This article is for you if you are a beginner in WordPress and struggling with setting up your first website. We are going to share with you today the process of adding a sticky post slider to your WordPress without a plugin.
A slider is normally used for featured posts of the blog these days. It draws attention to the post that is selected by the owner of the site. It is considered an amazing way to promote your own posts. Try professional WordPress themes from VWthemes for the best website creation experience.
Well, I know what you are thinking! Why should we manually add a sticky post slider while the plugins can do the same for us? Here’s the answer!
There’s no doubt that plugins work coherently and we don’t experience any problems with them normally. But, you need to address a significant point that is, most of the plugins are 3rd party plugins. And, you cannot completely rely on them every time.
And hence it is better to do it manually. But note that you need to be familiar with HTML, CSS3, PHP, etc. to do that. If you have a nice hand in coding, you can effortlessly set your own sticky post slider, that promotes your sticky post perfectly.
There are many reasons why it is more recommended to use a sticky post slider instead of sticky posts. Starting with the first one, the vernacular WordPress sticky post slider is not used in most blogs. And hence, it can be well utilized.
The second reason is that the prevailed way of presenting Sticky Posts in WordPress takes away too much attention from the latest posts on the site. This is because the sticky post occupies the place before the latest posts at the same content area. And this is why it is more preferable to have a separate area to present the sticky post such as the post slider. This will make those selected posts more get attention while you don’t have to sacrifice the presentation of your latest posts too.
The third reason is that implementing the post slider using a tag category is more like a hack because tags and categories are supposed to describe the contents of the blog post. Sometimes, there is a need to present the tag or category differently, but primarily the main point of using tags and categories is to describe the blog post contents.
I think the reasons mentioned are enough to convince you! Let’s learn how to add a sticky post slider to your WordPress website.
Just comply with the following steps and you can easily do it without much time needed!
One thing you need to take note of is the changes you make might get lost when you update your WordPress. So, always make a point to save those changes while you carry them out.
Also along with this have a look at 9 Types Of Graphics Designs for your WordPress Website. As mentioned earlier, featuring your sticky post as a slider will make it easier for the visitor to go through many other articles that you want them to see. It will also increase your reach which is a great thing!
Add Sticky Post Slider In WordPress (without a plugin)
- MooTools and NoobSlide
We would suggest you use noobSlide. However, the codes mentioned below can be used in other sliders as well.
As we are using noobSlide, it will be needed to include the MetoolsJavascript library. Now, the process is really simple. Move over to the function.php file in your template and add the codes listed below and it’s done!
| 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’ ); |
- Adding Thumbnails
Also, to promote the post, it will be good to use post thumbnails. Here’s how you add them if it does not come. Follow the codes listed below and done! It is that easy!
| function custom_theme_setup() { add_theme_support( ‘post_thumbnails’ ); } add_action( ‘after_setup_theme’, ‘custom_theme_setup’ ); |
- Setting Up Your Custom ‘Read more’ link
Even though you WordPress site already comes with a default “read more” link. But, it is so conventional that you may want to set up your own custom Read More CTA. This may act as a boon resulting in more clickthroughs. First, go to functions.php file and excerpt this line out from the same. Follow these codes.
| //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 ) . ‘”>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 ) . ‘”>Continue reading</a></p>’; } add_filter( ‘excerpt_more’, ‘custom_excerpt_more’ ); |
Point to be noted is 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 here comes the most important part. We are now going to add CSS and JavaScript to the functions.php page. Remember that this is a compulsory step if you want the sticky post slider running on the top. Copy and paste the codes listed in your functions.php file, and that’s it!
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 are at a stage in which we have to modify the WordPress to include the codes for the slider. Head over to the loop file (in this case, the file is tagged as loop.php). Find the file for your theme and after you find it, place your cursor above the loop area and write the codes as shown below.
$sticky ) );
have_posts()): $count = 0; ?>
<div id=”slider”>
<div id=”mask”>
have_posts() ): $slider->the_post(); $count++; ?>
<div class=”items”>
<div class=”info”>
<h2></h2>
</div>
</div>
</div>
<div class=”handle”>
0; $count–):
<a>•</a>
</div>
</div>
Did you realize that you are almost done with the process? Just check out the website to confirm whether the sticky post slider is running seamlessly or not.
Moreover, if you want to make some additional changes, you can do it effortlessly. All you need to do is enter the necessary codes and that is it. In addition, there’s one more thing to take care of. And that is getting rid of the regular sticky post. The main purpose of the sticky post slider is that it does not take away the attention from the latest post on your website. And this is why we must remove the old sticky post right away. Follow the codes written below and that is enough!
$sticky ) );
have_posts()): $count = 0; ?>
<div id=”slider”>
<div id=”mask”>
have_posts() ): $slider->the_post(); $count++; ?>
<div class=”items”>
<div class=”info”>
<h2></h2>
</div>
</div>
</div>
<div class=”handle”>
0; $count–): ?>
<a>•</a>
</div>
</div>
query, array( ‘post__not_in’ => $sticky ) );
query_posts( $args );
And Boom! You might have realized that it is a simple yet significant process to do. Now, you can enjoy the completely functional Sticky post slider in WordPress. This will give you the desired results as your homepage will look clean and stand out from the rest.
I hope that you learned from this article. And if you did, consider sharing it. Make sure to put your thoughts about the same in the comment section. Also hoping that all the information that I shared is crystal clear, but still, if you have some doubts, scribble them down! Our team will address your comments so you can also write down the topic that you want us to touch. That’s it for today. Thank You for going through this article. Bye!
You can also purchase our WordPress theme bundle that contains all premium themes at a pocket-friendly price.
