How to Add Sticky Post Slider in WordPress Without Using a Plugin

Introduction:

When it comes to WordPress customising, even little adjustments can have a big influence. Add Sticky Post Slider WordPress One such update that can raise user interaction while preserving the visual attractiveness of your website is WordPress. Even while a lot of people like to use free or premium WordPress plugin for this, we'll look at an alternative method tonight that involves integrating sticky content sliders into WordPress without the need for third-party plugins.Let's examine how to Add Sticky Post Slider, engaging website without including any unneeded components. Let's start our exciting journey together by getting into WordPress admin and grabbing a cup of coffee.

What Does a Sticky Post Slider WordPress Mean?

A post that remains at the very top of your blog's WordPress page is known as a sticky post. It remains on your blog's homepage until you disable the sticky option, in contrast to your ordinary postings.

WordPress displays your most recent posts first by default. Your earlier posts disappear over time and are archived when you submit new information.

This implies that unless they read through all of the articles on your site built on WordPress as well as find them in the results of a search, they are far less likely to discover that blog post.

What if, however, you wanted to display your most important content on the front page for a longer period of time? That's where the sticky posts function in WordPress becomes helpful.

Advantages of Add Sticky Post Slider WordPress:

1. Enhance My Product/Service Portfolio:

Various types of sliders assist in drawing quick attention to your items or services on your website. You can help your clientele get all the important information with a single banner by using the Add Sticky Post Slider images, articles, infographics, CTAs, and more. Get an Carousel slider plugin WordPress, then, if you wish to showcase something unique about your product and its qualities.

2. Conveys What Matters:

Sliders provide quick access to information. You are able to depend on content sliders when there's something remarkable to say about your company, its goods, or its services. WordPress's featured content slider assists you in emphasising significant data. Therefore, you don't have to worry about the extent to which the key message about your brand is conveyed. If it appears on your WordPress sliders, the majority of your consumers have read it.

3. Different Approaches to Marketing:

Let's say you want to highlight specific characteristics or product plans on your website. However, you're uncertain about how to draw attention to it in your internet presence. Once you understand how to Add Sticky Post Slider WordPress, you will understand how to market differently. In short, the highlighted sliders enable your company to optimise the exposure of the distinctive benefit of your good or service.

4. User Interaction:

Using sliders to present your content is one of the best ways to improve Add Sticky Post Slider visitor satisfaction with your online presence. There are several kinds of sliders for WordPress websites, as has already been addressed. Using whichever slider best suits the sector you work in can help boost user interaction. If you employ the right CTA (call to action) in conjunction with the rotating and carousel sliders, it assists in drawing in traffic from your intended audience and increases conversion rates.

Add Sticky Post Slider WordPress (Without a Plugin)

1. 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' );

2. Adding Thumbnails

Also, to promote the post, it will be good to use post thumbnails. Here’s how you add sticky post slider WordPress 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' );

3. 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.

4. 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 to add sticky post slider WordPress 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' );

5. WordPress Theme Modification

Now we are at a stage in which we have to add sticky post slider WordPress. 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 class="handle">

0; $count--):

<a>•</a>

</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 add sticky post slider WordPress 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 class="handle">

0; $count--): ?>

<a>•</a>

</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.

Conclusion:

In the world of WordPress customisation, small changes can have a significant impact. Add Sticky Post Slider WordPress is one such modification that can improve user engagement while preserving the aesthetic appeal of your website. Although many choose to do this with plugins, today we'll explore how to Add Sticky Post Slider without using third-party plugins. Let's discover how to create a dynamic and captivating homepage without bringing along any needless extras. Therefore, have an espresso of coffee, access the dashboard of WordPress, and we're going to start this exciting adventure together.

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 WP theme bundle that contains all premium themes at a pocket-friendly price.

FAQ:

What is a basic slider?

The basic slider type, also called a slider, shows a single slide at one time and is always identical in size to the main slider.

What use does a slider serve?

When you want your clients to be able to adjust a range of discrete values (like screen resolution settings) and defined, continuous values (like brightness or volume), use a slider. When you are aware that people see the value as a subjective quantity instead of a numerical amount, you might want to employ a slider.

What makes it a slider, exactly?

What is a slider exactly, and how did it get started? Small hamburgers are referred to as sliders. The term "sliders" was initially employed in the 1940s by U.S. Navy sailors to describe mini-burgers due to their excessive grease. The burger would simply slip down in a couple of bites!

What benefit does utilising the slider offer?

Visitors to your website aren't going to have to go through the highlights several times, thanks to sliders. A wonderful way to liven things up and set your website apart from other websites is to incorporate sliders into the layout. In some fields, images are of greater importance than words.

Back to blog