How to Create Image Slider On Your WordPress Blog Without Using Plugin

Dynamic content can build up a better audience base. However, does the word dynamic mean only for focusing on the title, the introduction, the body, the conclusion and the image? The answer is certainly no. The objective of content marketing is to make audience devour your words and thoughts and to convince them. True that a blog page that has got a catchy headline to start with and a content that is relevant to the query placed by the target audience will grab more attention. Nevertheless, how are you sure that the reader will stay and continue reading the entire blog till the last sentence?

A Good Content Is Not Enough For A Blog Post

A blog page is the only place where you can make the audience engage, interact and even convert. It is also the place where you get the audience to listen to what you have got to say or maybe suggest.

Blogging is an essential online marketing strategy that every business requires now to survive the internet world chaos. A unique medium of expression, blogging has become an important means of communication, promotion and marketing that almost every company starting from the Fortune 500 to the mom-and-pop shops are utilizing to leverage their digital presence as well as their bottom line.

Several elements make up a blog page. However, a blog post stays incomplete without these five essential elements and they are –

5 Essential Elements Your WordPress Blog Page Cannot Do Without

• Slider

• newsletter widget

• smart sidebar

• contact us form

• pagination

Each of these elements are essential and would require detailed discussion. Hence, I would begin the article here by talking only about sliders. Why sliders? Because they are the quickest way to make your audience reach a group of selected posts all at once. Yes that’s right. You can use it to highlight the most popular ones while the reader is still engrossed reading your current blog post. This will keep the audience stay for sometime in your website and learn more about what your service can offer to its customers. Besides, it even enhances duration of your page stay, which again is good in the eyes of the Google search bots. Having said that, a slider helps to give a dynamic feel to your entire blog page and some of them even come with fancy designs.

You can use a WordPress slideshow plug-in to have your own blog page slider. It’s simple and easy. However, only a developer would know the negative sidebacks that come with a customized plug-in. One of the drawbacks is that the designer would have to stick within the theme layout, thus finding limited independence to explore or experiment with individual ideas. That is why, a lot of developers still prefer to use hand codes for customizing web elements that also includes the one on a website blog page.

Developing a WordPress Blog Page Slider

This tutorial will show you how to make use of the same code that is used by many slider plug-ins for integrating and for controlling a blog post slider function. All the tutorial codes used here need to be included in the php file for the theme’s function. However, before you begin, copy down the files present in a plug-in (for example – Flexslider jQuery plug-in) into the theme directory. Now create a separate directory within the themes directory and name it as flexslider. Since I am using Flexslider jQuery plug-in as an example, therefore after downloading the Flexslider 2 plug-in; you will have to upload the flexslider.css and jquery.flexslider-min.js files and the directories for images and fonts into the newly created flexslider directory.

The next few steps will show you how to insert the necessary CSS and JavaScript code into the theme footer. With the print_my_script() function, you can begin including the JS/CSS files on each of the pages where you will use the slider shortcode.

Begin by registering the JavaScript file and for which follow the necessary steps below –

[php]
add_action(‘init’, ‘register_my_scripts’);

function register_my_scripts() {

wp_register_script( ‘flexslider’, get_stylesheet_directory_uri()
. ‘/flexslider/ jquery.flexslider-min.js’,
array(‘jquery’), ‘1.0.0’, true );

}

add_action(‘wp_footer’, ‘print_my_script’, 99);
[/php]

The next few steps will show you how to print out the other codes into the footer of the theme.

[php]

function print_my_script() {

global $add_my_script, $ss_atts;

if ( $add_my_script ) {

$speed = $ss_atts[‘slideshowspeed’]*1000;

echo "<script type=\"text/javascript\">

jQuery(document).ready(function($) {

$(‘head’).prepend($("<link>").attr({

rel: ‘stylesheet’,

type: ‘text/css’,

media: ‘screen’,

href: ” . get_stylesheet_directory_uri() .
‘/flexslider/flexslider.css’

}

)

);

$(‘.flexslider’).flexslider({

animation: ”.$ss_atts[‘animation’].”,

slideshowSpeed: ‘.$speed.’

controlNav: false

}

);

}

);

</script>

wp_print_scripts(‘flexslider’);

} else {

return;

}

}

[/php]

Now create a custom post type and taxonomy. A custom taxonomy helps to bundle up the slides into one or or more slideshows.

The following steps can help you do the same –

[php]
add_action( ‘init’, ‘create_slider_posttype’ );

function create_slider_posttype() {

$args = array(

‘public’ => false,

‘show_ui’ => true,

‘menu_icon’ => ‘dashicons-images-alt’,

‘capability_type’ => ‘page’,

‘rewrite’ => array( ‘slider-loc’, ‘post_tag’ ),

‘label’ => ‘Simple slides’,

‘supports’ => array( ‘title’, ‘editor’, ‘custom-fields’,
‘thumbnail’, ‘page-attributes’)

);

register_post_type( ‘slider’, $args );

}

add_action( ‘init’, ‘create_slider_location_tax’ );

function create_slider_location_tax() {

register_taxonomy(

‘slider-loc’,

‘slider’,

array(

‘label’ => ‘Slider location’,

‘public’ => false,

‘show_ui’ => true,

‘show_admin_column’ => true,

‘rewrite’ => false

)

);

}
[/php]

For creating the post meta value for individual slide, you can follow the steps below:

[php]
add_action(‘wp_insert_post’, ‘set_default_slidermeta’);

function set_default_slidermeta($post_ID){

add_post_meta($post_ID, ‘slider-url’, ‘http://’, true);

return $post_ID;

}
[/php]

The value included in the custom field has been used as default URL.

Using the WordPress image slider shortcode

This is the last of the few codes that you have to do for displaying the slideshow inside the page, post, theme and other places wherever it is possible to include the shortcodes.

Steps for adding the simple slider shortcode –

[php]
add_shortcode( ‘simpleslider’, ‘simple_slider_shortcode’ );

function simple_slider_shortcode($atts = null) {

global $add_my_script, $ss_atts;

$add_my_script = true;

$ss_atts = shortcode_atts(

array(

‘location’ => ”,

‘limit’ => -1,

‘ulid’ => ‘flexid’,

‘animation’ => ‘slide’,

‘slideshowspeed’ => 5

), $atts, ‘simpleslider’

);

$args = array(

‘post_type’ => ‘slider’,

‘posts_per_page’ => $ss_atts[‘limit’],

‘orderby’ => ‘menu_order’,

‘order’ => ‘ASC’

);

if ($ss_atts[‘location’] != ”) {

$args[‘tax_query’] = array(

array( ‘taxonomy’ => ‘slider-loc’, ‘field’ => ‘slug’,
‘terms’ => $ss_atts[‘location’]

)

);

}

$the_query = new WP_Query( $args );

$slides = array();

if ( $the_query->have_posts() ) {

while ( $the_query->have_posts() ) {

$the_query->the_post();

$imghtml = get_the_post_thumbnail(get_the_ID(), ‘full’);

$url = get_post_meta(get_the_ID(), ‘slider-url’, true);

if ($url != ” && $url != ‘http://’) {

$imghtml = ‘<a href="’.$url.’">’.$imghtml.'</a>’;

}

$slides[] = ‘

<li>

<div class="slide-media">’.$imghtml.'</div>

<div class="slide-content">

<h3 class="slide-title">’.get_the_title().'</h3>
<div class="slide-text">’.get_the_content().'</div>

</div>

</li>

‘;

}

}

wp_reset_query();

return ‘

<div class="flexslider" id="’.$ss_atts[‘ulid’].’"

<ul class="slides">

‘.implode(”, $slides).’

</ul>

</div>

‘;

}
[/php]

The shortcode can accept three attributes. They are – the slider location, the slideshow speed and the animation type. The values of these three attributes are passed on to the JavaScript snippet or the database query.

You can configure the slideshow by using the above mentioned attributes. For example –

[php]
[simpleslider location="homepage" animation="slide"
slideshowspeed="5"]
[/php]

This shortcode will display the slides along with homepage as the custom taxonomy. The slides will appear in animation mode and at a speed limit of 5 seconds.

It’s simple and easy, provided that you have basic knowledge and skills to begin with. If you do not have the knowledge, do not worry for you can easily hire a web development professional instead.