WordPress Plugin Development from Scratch, Part 2/4: Integrate Slider

Posted in Plugins, Tutorials, WordPress1 year ago • Written by 30 Comments

In the first part of our WordPress Plugin Development Course for Designers we learned about the importance of WordPress plugins for designers and its base structure. Today we are going to talk about the core WordPress theories and techniques required for creating design focused plugins.

Our final goal is to learn WordPress plugin development while integrating a jQuery slider into WordPress from scratch. Throughout this tutorial, we will be learning the necessary coding techniques using sample slider as the example. By the end of this tutorial, you will have a simple template which is common to most of the design based plugins.

Voting for the slider is still going on and SlidesJS is heading the list. So we will be using SlidesJS the slider for explaining necessary codes in this part.

So let’s get started.

What type of files are needed for Design Based Plugins?

Consider the following image which illustrates the files in a common plugin for creating design based components.

wp1stw2d copy

As you can see JavaScript and CSS will be kept in separate folders inside the main plugin. The main PHP file contains the plugin definition and the important initialization functions of the plugin. If you are developing a single file plugin, all the codes will be kept inside the main PHP file.

Although HTML is the most important type of file for you as designers, it doesn’t show up as separate files in the given screen. Actually there won’t be any HTML files inside the WordPress plugin. All the necessary HTML codes are generated through PHP files.

The preceding screen shows the basic folder and file structure of a WordPress plugin. We can add necessary libraries and additional files to modularize our plugin to increase the reusability.

Understanding the Components of Slider

Throughout this series we will be integrating a jQuery slider plugin to learn WordPress plugin development. Therefore it’s important to get used to the main components of a jQuery slider as shown in the following.

  • jQuery library - We need a core library to develop plugins. jQuery is chosen as the core library for the plugin used in this series. You have the freedom to work with other core libraries such as Prototype, Dojo, MooTools, etc.
  • jQuery plugin file - Every plugin has a main file which is built on top of the jQuery library. Usually we have all the codes for a jQuery plugin inside single JavaScript file.
  • Intialization code - All the plugins need to be initialized at some point to make it work. Generally we use inline scripts in the HEAD section of the HTML document to include the initialization code.
  • CSS files used for plugin - Most of the content or image sliders uses CSS to provide slide transitions and animations. Therefore we have CSS files specific to plugins to provide the default look and feel of the sliders.
  • HTML or Images used for sliding - Final component of a slider is the actual text, image or HTML content which gets converted into a slider by the plugin. Unordered list with HTML and images is the most popular technique of defining the data required for the slider.

Now we have identified the main five components of a jQuery slider plugin. Let’s focus on learning how each of these components fit into an actual WordPress plugin.

Including Scripts in WordPress Plugins

Our slider plugin contains two JavaScript files at the moment and will have the third one for plugin initialization code. Most of the beginner developers makes the mistake of including scripts incorrectly inside WordPress plugins. So this section will focus on identifying the mistakes and learning how to avoid those mistakes in order to comply with the best practices.

I assume that most of the readers of this tutorial will be designers. So let’s see how we include script files in static HTML websites.

<br />&lt;html&gt;<br /><%%KEEPWHITESPACE%%>  &lt;head&gt;<br /><%%KEEPWHITESPACE%%>    &lt;script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js'&gt;&lt;/script&gt;<br /><%%KEEPWHITESPACE%%>    &lt;script type='text/javascript' src='jquery.slides.min.js'&gt;&lt;/script&gt;<br /><%%KEEPWHITESPACE%%>    &lt;script type='text/javascript'&gt;<br /><%%KEEPWHITESPACE%%>          jQuery(function() {<br /><%%KEEPWHITESPACE%%>             jQuery('#slides').slidesjs({<br /><%%KEEPWHITESPACE%%>                width: 940,<br /><%%KEEPWHITESPACE%%>                height: 528,<br /><%%KEEPWHITESPACE%%>                navigation: false<br /><%%KEEPWHITESPACE%%>              });<br /><%%KEEPWHITESPACE%%>          });<br /><%%KEEPWHITESPACE%%>    &lt;/script&gt;<br /><%%KEEPWHITESPACE%%>  &lt;/head&gt;<br /><%%KEEPWHITESPACE%%>  &lt;body&gt;<br /><br /><%%KEEPWHITESPACE%%>  &lt;/body&gt;<br />&lt;/html&gt;<br />

We basically hard code all the script files into HEAD section of the HTML document or footer section. This is not a problem at this stage since we are building static websites. Now let’s see how these scripts are included in WordPress plugin by developers who are not experienced in WordPress.

The Wrong Way of Including Scripts

Most inexperienced developers directly includes the scripts inside the PHP files using the echo statement as shown in the following code. This is considered as a bad practice in WordPress plugin development.

<br />function fwds_scripts(){<br /><%%KEEPWHITESPACE%%>   echo "&lt;script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js'&gt;&lt;/script&gt;";<br /><%%KEEPWHITESPACE%%>   echo "&lt;script type='text/javascript' src='jquery.slides.min.js'&gt;&lt;/script&gt;";<br />}<br />

The code prints the script files anywhere in the HTML file. It can be header, footer or body depending on location you place it. Even though we have a separate header for WordPress themes, it’s not wise to hard code the files in the header.

In static websites you can manage these files since you will be the only designer. WordPress has a plugin based architecture and hence anyone can write plugins. Therefore there is a high possibility of duplicating the same files with the technique mentioned above.

The Right Way of Including Scripts

Now we are going to look at the right way of including scripts, considering the limitations in above technique. WordPress came up with a concept called action hooks which will be executed at specific points of a request or when a specific event occurs in your system. You can define a functions to be called in these execution points.

It will take time to understand the complete concept of WordPress action hooks, even for an experienced WordPress developer. For the moment think of it as a code that calls PHP function at specific points. Consider the following code.

<br />&lt;?php<br />function my_custom_function() {<br /><%%KEEPWHITESPACE%%>    // Place the code to be executed here<br />}<br /><br />add_action('action name', 'my_custom_function');<br />?&gt;<br />

We can replace the action name with predefined WordPress hooks or using our own custom hooks. You have to use different functions to different actions. In depth knowledge of action hooks will be provided in future tutorials when you get comfortable with basics of plugin development.

Now let’s switch back to the correct method for including scripts. WordPress provides a predefined hook called wp_enqueue_scripts to include script files into pages. Inside our custom function we have to include the scripts one by one. Consider the following code.

<br />&lt;?php<br /><br />add_action('wp_enqueue_scripts', 'fwds_scripts');<br />function fwds_scripts() {<br /><br /><%%KEEPWHITESPACE%%>  wp_enqueue_script('jquery');<br /><br /><%%KEEPWHITESPACE%%>  wp_register_script('slidesjs_core', plugins_url('js/jquery.slides.min.js', __FILE__),array("jquery"));<br /><%%KEEPWHITESPACE%%>  wp_enqueue_script('slidesjs_core');<br /><br /><%%KEEPWHITESPACE%%>  wp_register_script('slidesjs_init', plugins_url('js/slidesjs.initialize.js', __FILE__));<br /><%%KEEPWHITESPACE%%>  wp_enqueue_script('slidesjs_init');<br /><br />}<br />?&gt;<br />

Preceding code calls the fwds_scripts function in the execution process using the wp_enqueue_scripts action. I have used fwds(first web designer slider) as the prefix for my functions.

It is recommended to prefix your plugin functions with string related to your plugin name to avoid conflicts with functions in other plugins.

Inside fwds_scripts, we have used two other functions for including script files called wp_enqueue_script and wp_register_script. wp_enqueue_script is used to include the script file to the HTML document. jQuery is one of the libraries which comes in-built with WordPress and hence we can include it directly as shown in the code. Latest version of jQuery will be included in this technique.

wp_register_script is used to register a script file into WordPress. We have to register the slider plugin file and initialization file since it is not built-in with WordPress. First parameter is a unique name to register your library. Next you have to provide the path of the js file. plugins_url function will provide the URL of the plugin folder.

Third parameter specifies the dependent libraries. In this scenario, our plugin file depends on the jQuery library. We don’t have to manage dependencies with this technique. Before registering any script, WordPress checks whether it has been already registered using the given unique name. File is loaded only when it’s not loaded previously. So it will prevent the file duplication discussed in the earlier section.

If you register the same script file with different names, WordPress will not be able to handle the file duplication.

SlidesJs core plugin file is named as jquery.slides.min.js and we have included it in the preceding code. Also we have included the initialization part of the library inside another js file called slidesjs.initialize.js. Following code contains the initialization code inside the js file.

<br />jQuery(function() {<br /><%%KEEPWHITESPACE%%>      jQuery('#slides').slidesjs({<br /><%%KEEPWHITESPACE%%>        width: 940,<br /><%%KEEPWHITESPACE%%>        height: 528,<br /><%%KEEPWHITESPACE%%>        navigation: false<br /><%%KEEPWHITESPACE%%>      });<br />});<br />

There are various other recommended ways of including scripts files without using wp_enqueue_scripts action hook. Technique discussed here is good enough for us to learn plugin development as designers. I will also cover the other techniques when required.

Including Styles in WordPress Plugins

Usually most of the jQuery plugins comes up with built-in CSS file to provide its default look and feel. As designers we are used to including CSS files directly in the HTML document. So the beginners of WordPress plugin development tries to apply the same method as I discussed in JavaScript section.

The Wrong Way of Including Styles

Consider the following code to see how beginners include CSS files in WordPress plugins.

<br />function fwds_styles(){<br /><%%KEEPWHITESPACE%%>    echo &lt;link rel='stylesheet' href='example.css' type='text/css' media='all' /&gt;";<br /><%%KEEPWHITESPACE%%>    echo &lt;link rel='stylesheet' href='font-awesome.min.css' type='text/css' media='all' /&gt;";<br />}<br />

The code will include style files everywhere in the HTML document without considering file duplication. This works exactly the same way how JavaScript worked.

The Right Way of Including Styles

Recommended method of including style files is exactly similar to the method we discussed for JavaScript files. wp_enqueue_scripts action will be used again with different function name to include the styles as shown in the following code.

<br />add_action('wp_enqueue_scripts', 'fwds_styles');<br />function fwds_styles() {<br /><br /><%%KEEPWHITESPACE%%>  wp_register_style('slidesjs_example', plugins_url('css/example.css', __FILE__));<br /><%%KEEPWHITESPACE%%>  wp_enqueue_style('slidesjs_example');<br /><%%KEEPWHITESPACE%%>  wp_register_style('slidesjs_fonts', plugins_url('css/font-awesome.min.css', __FILE__));<br /><%%KEEPWHITESPACE%%>  wp_enqueue_style('slidesjs_fonts');<br /><br />}<br /><br />

We have to use wp_register_style and wp_enqueue_style in this case instead of script functions. Usage and parameters are exactly similar to script functions.

In this part, we are using SlidesJS for implementing the slider plugin. SlidesJS comes up with two CSS files for styles neccessary for look and feel of the presentation and including fonts.

Now we know the basics of including scripts and styles of the jQuery plugin inside the WordPress plugin. Generally we place the initialization code for a plugin, inline within script tags in static HTML files. With WordPress, it’s better to add it to an existing js file or include in a new js file and load using the recommended way.

Assigning Content to Slider Using Shortcodes

Shortcodes can be considered as an alias for reusable piece of code. First we have to define the common code inside a PHP function. Then we can access it anywhere in themes, plugins or page editor by using the alias given for function. Consider the code below for most basic use of WordPress shortcode.

<br />add_shortcode("my_shortcode", "my_shortcode_function");<br /><br />function my_shortcode_function() {<br /><%%KEEPWHITESPACE%%>  return "&lt;h1&gt;Hello Shortcodes&lt;/h1&gt;";<br />}<br />

WordPress provides a built-in method called add_shortcode for defining shortcodes. First parameter is the name (alias) of the shortcode. Second parameter contains the function to be executed when the shortcode is requested. We return a simple string from the shortcode.

Some developers like to directly print the output of the shortcode inside the function. You should always prefer returning output from function and printing externally as shown in the preceding example.

Then you can use [my_shortcode/] to refer the common code in multiple locations. Folowing screen shows how you can use a shortcode inside the post or page editor in WordPress.

shortcodes_editr

Shortcodes can be used inside theme or plugin files with do_shortcode function as shown below.

<br /><%%KEEPWHITESPACE%%> &lt;?php echo do_shortcode('[my_shortcode]') ?&gt;<br />

Advanced Usage of Shortcodes

In the previous example, we used the most basic form of shortcode. We can also have attributes and content in shortcodes to add additional features. Consider the following shortcode with attributes and content.

<br /><br />[my_advanced_shortcode name="Nimesh" age="27"] Description about me [/my_advanced_shortcode]<br /><br />

These types of shortcodes contain opening and closing shortcode tags. Information placed between the opening and closing tags is considered content and key-value pairs inside the opening tag is considered as attributes. Following code shows how we can extract these information inside the actual shortcode function.

<br />function my_advanced_shortcode_handler( $atts, $content = null ) {<br /><%%KEEPWHITESPACE%%>   extract( shortcode_atts( array(<br /><%%KEEPWHITESPACE%%>      'name' =&gt; 'Rakhitha',<br /><%%KEEPWHITESPACE%%>      'age' =&gt; '20'<br /><%%KEEPWHITESPACE%%>      ), $atts ) );<br /><br /><%%KEEPWHITESPACE%%>   echo $name;<br /><%%KEEPWHITESPACE%%>   echo $age;<br /><%%KEEPWHITESPACE%%>   echo $content;<br />}<br /><br />

Content and attributes of the shortcodes will passed as the default parameters to shortcode function. We can directly use the content using the $content variable. Here you will get “Description about me” as the content.

Handling attributes is not straightforward as content. We have to extract each attribute from the $attr array. We can use the extract function as shown here. We define all the attribute with the default values. If attributes are supplied with shortcodes, default value will be replaced by passes value. Finally you can access these attributes using $name and $age.

Integrating Slider Using Shortcodes

In the previous sections we discussed how scripts, styles and initialization code fits into a WordPress plugin. Final part of the slider will be the actual HTML or images used as the content for sliding. Shortcodes will be the ideal method for providing slider content. Now let’s see how images fit into the shortcode.

<br />add_shortcode("1wd_slider", "fwds_display_slider");<br />function fwds_display_slider() {<br /><br /><%%KEEPWHITESPACE%%>  $plugins_url = plugins_url();<br /><br /><%%KEEPWHITESPACE%%>  echo '&lt;div class="container"&gt;<br /><%%KEEPWHITESPACE%%>    &lt;div id="slides"&gt;<br /><%%KEEPWHITESPACE%%>      &lt;img src="'.plugins_url( 'img/example-slide-1.jpg' , __FILE__ ).'" /&gt;<br /><%%KEEPWHITESPACE%%>      &lt;img src="'.plugins_url( 'img/example-slide-2.jpg' , __FILE__ ).'" /&gt;<br /><%%KEEPWHITESPACE%%>      &lt;img src="'.plugins_url( 'img/example-slide-3.jpg' , __FILE__ ).'" /&gt;<br /><%%KEEPWHITESPACE%%>      &lt;img src="'.plugins_url( 'img/example-slide-4.jpg' , __FILE__ ).'" /&gt;<br /><%%KEEPWHITESPACE%%>      &lt;a href="#" class="slidesjs-previous slidesjs-navigation"&gt;&lt;i class="icon-chevron-left icon-large"&gt;&lt;/i&gt;&lt;/a&gt;<br /><%%KEEPWHITESPACE%%>      &lt;a href="#" class="slidesjs-next slidesjs-navigation"&gt;&lt;i class="icon-chevron-right icon-large"&gt;&lt;/i&gt;&lt;/a&gt;<br /><%%KEEPWHITESPACE%%>    &lt;/div&gt;<br /><%%KEEPWHITESPACE%%>  &lt;/div&gt;';<br />}<br /><br />

Now we have integrated all the necessary parts into WordPress plugin. But we still have a slider with static content. Real power of plugin comes when we can add the slider content dynamically and create multiple sliders to use in multiple locations.

Now you can download the static version of WordPress slider plugin here. Copy the downloaded plugin into plugins folder and activate using the admin dashboard. Then create a post or page and insert [1wd_slider/] in the TinyMCE editor and click the publish button to see the slider in action. You will be able to use the navigation button to see how sliding works.

So try out the static version of slider plugin for multiple jQuery libraries using the following template we created throughout this tutorial.

<br />&lt;?php<br /><br />/*<br />Plugin Name: 1WD Slider<br />Plugin URI: http://1stwebdesigner.com/<br />Description: Slider Component for WordPress<br />Version: 1.0<br />Author: Rakhitha Nimesh<br />Author URI: http://1stwebdesigner.com/<br />License: GPLv2 or later<br />*/<br />function fwds_slider_activation() {<br />}<br />register_activation_hook(__FILE__, 'fwds_slider_activation');<br /><br />function fwds_slider_deactivation() {<br />}<br />register_deactivation_hook(__FILE__, 'fwds_slider_deactivation');<br /><br />add_action('wp_enqueue_scripts', 'fwds_scripts');<br />function fwds_scripts() {<br /><br /><%%KEEPWHITESPACE%%>  wp_enqueue_script('jquery');<br /><br /><%%KEEPWHITESPACE%%>  wp_register_script('slidesjs_core', plugins_url('js/jquery.slides.min.js', __FILE__),array("jquery"));<br /><%%KEEPWHITESPACE%%>  wp_enqueue_script('slidesjs_core');<br /><br /><%%KEEPWHITESPACE%%>  wp_register_script('slidesjs_init', plugins_url('js/slidesjs.initialize.js', __FILE__));<br /><%%KEEPWHITESPACE%%>  wp_enqueue_script('slidesjs_init');<br /><br />}<br /><br />add_action('wp_enqueue_scripts', 'fwds_styles');<br />function fwds_styles() {<br /><br /><%%KEEPWHITESPACE%%>  wp_register_style('slidesjs_example', plugins_url('css/example.css', __FILE__));<br /><%%KEEPWHITESPACE%%>  wp_enqueue_style('slidesjs_example');<br /><%%KEEPWHITESPACE%%>  wp_register_style('slidesjs_fonts', plugins_url('css/font-awesome.min.css', __FILE__));<br /><%%KEEPWHITESPACE%%>  wp_enqueue_style('slidesjs_fonts');<br /><br />}<br /><br />add_shortcode("1wd_slider", "fwds_display_slider");<br />function fwds_display_slider() {<br /><br /><%%KEEPWHITESPACE%%>  $plugins_url = plugins_url();<br /><br /><%%KEEPWHITESPACE%%>  echo '&lt;div class="container"&gt;<br /><%%KEEPWHITESPACE%%>    &lt;div id="slides"&gt;<br /><%%KEEPWHITESPACE%%>      &lt;img src="'.plugins_url( 'img/example-slide-1.jpg' , __FILE__ ).'" /&gt;<br /><%%KEEPWHITESPACE%%>      &lt;img src="'.plugins_url( 'img/example-slide-2.jpg' , __FILE__ ).'" /&gt;<br /><%%KEEPWHITESPACE%%>      &lt;img src="'.plugins_url( 'img/example-slide-3.jpg' , __FILE__ ).'" /&gt;<br /><%%KEEPWHITESPACE%%>      &lt;img src="'.plugins_url( 'img/example-slide-4.jpg' , __FILE__ ).'" /&gt;<br /><%%KEEPWHITESPACE%%>      &lt;a href="#" class="slidesjs-previous slidesjs-navigation"&gt;&lt;i class="icon-chevron-left icon-large"&gt;&lt;/i&gt;&lt;/a&gt;<br /><%%KEEPWHITESPACE%%>      &lt;a href="#" class="slidesjs-next slidesjs-navigation"&gt;&lt;i class="icon-chevron-right icon-large"&gt;&lt;/i&gt;&lt;/a&gt;<br /><%%KEEPWHITESPACE%%>    &lt;/div&gt;<br /><%%KEEPWHITESPACE%%>  &lt;/div&gt;';<br />}<br />?&gt;<br />

Demo and Challenge

1wd-wordpress-plugin-development-course

If you want to see the working version of what we have created so far, you can check the demo here.

Now, here’s a challenge to you:

If you have installed the plugin and checked, you will notice that it occupies a full width of 940px. And on our demo site the slider has overlapped the sidebar because of this. Question is, can you make it responsive on your own? It’s easy!

The answer will be revealed on the next instalment of our WordPress Plugin Development Course for Designers, watch out for it!

Up Next

In the next part we will be creating the actual integration of jQuery plugin into WordPress. Instead of just hard coding HTML or images inside unordered lists, we will be creating sections to upload images dynamically and create multiple sliders by selecting preferred images.

Until then I would like to suggest following resources to get an idea about the contents in the next part of this tutorial series.

Now it’s your turn.

Integrate various other sliders using the technique we discussed today. Now don’t worry about sliders being static at the moment. I will explain how to make it dynamic and reusable in the next part.

Let me know about the type of sliders you tried and any difficulties you faced in applying the discussed technique.

If you enjoyed this article, get email updates (it's free).

Join over 77,235 Subscribers Today.

22 Written ArticlesWebsiteGoogle+

Rakhitha Nimesh is a software engineer and writer from Sri Lanka. He likes to develop applications and write on latest technologies. He is available for freelance writing and WordPress development. You can read his latest book on WordPress Web Application Development. He is a regular contributor to 1stWebDesigner, Tuts+ network and Sitepoint network. Make sure to contact him at www.innovativephp.com or follow him on Twitter and Google+

30 Comments Best Comments First
  • David

    Tuesday, March 26th, 2013 11:21

    8

    Nice article! Just a heads up though to the admin of this site. Clicking the link to this article in the notification email Aweber sent led to a 404 page i.e “Not Found The requested URL /y/ct/ was not found on this server.” Had to do a search to get here.

    +1
    • Rakhitha Nimesh

      Wednesday, March 27th, 2013 11:50

      14

      Hi David

      Thank you very much for taking time to read the article even when you were having trouble finding the link.
      Rean will probably look into the 404 issue you are having.

      0
    • Rean John Uehara

      Tuesday, March 26th, 2013 22:09

      10

      Hi David, I’d like to check what went wrong, can you forward the email to me at rean[@]1stwebdesigner[dot]com? Thanks!

      +1
  • Wellington Lorindo

    Friday, March 29th, 2013 21:58

    19

    Nice tutorial! I was needing to learn about wordpress’ plugins and I think this is all I need! Thank you!

    0
    • Rakhitha Nimesh

      Tuesday, April 2nd, 2013 20:10

      20

      Hi Lorindo

      Thanks for your interest in my tutorial.

      Are you a Web designer? What are the things you would like to see from us in the future?

      Feel free to share your ideas and questions.

      +1
  • Harli

    Wednesday, March 27th, 2013 15:47

    16

    I meen this “Hey, I’m sorry to say but unfortunately your comment seems too short. why don’t you give us a chance to have a better conversation with us. Tell us more about what you think, or just ask a question.”

    0
    • Rakhitha Nimesh

      Wednesday, March 27th, 2013 20:19

      17

      Hi

      Now I totally get what you meant.

      I am lacking some skills in having discussions. I think this will be a good opportunity.

      As you are interested in having this discussion, why don’t we talk about how we can make the sliders responsive. I am plannng to go with default method of slidesjs, which is the pixel based approach.

      In percentage based approach, do you create different sizes of images for different device sizes? What is your experience on that?

      -1
  • Ivascu Madalin

    Monday, March 25th, 2013 09:54

    1

    For the “.container” to be responsive it needs a width in % instead of pixels , you can do this by changing it from 940px to 100% , the downside to this is that the images aren’t displayed properly, a quick fix is to change the width of the images from 100% to 70% or manualy make tham smaller

    0
    • Rakhitha Nimesh

      Monday, March 25th, 2013 21:41

      6

      Hi Ivascu

      Thanks for the solution.

      Do you think it is possible to keep pixel based widths and still make it responsive?

      Answer will be given in the next part and let’s see how many solutions we can create together.

      -1
      • Ian Belanger

        Wednesday, April 3rd, 2013 09:23

        22

        Hi Rakhitha,

        Do you think it is possible to keep pixel based widths and still make it responsive?

        Yes, this is possible, but you must use max-width for your pixel based width and set your image class in the css to have width: 100%; and height: auto;

        This should make your slider images responsive, while keeping the aspect ratio, but still keep them from going above your max-width. This technique will also work with iframe, object and embed, although you may still run into problems with the heights not automatically resizing.

        My advice, test, test and test some more.

        Hope that helps and I am really enjoying the plugin tutorial so far.

        Ian Belanger from im Graphic Designs

        -1
        • Rakhitha Nimesh

          Saturday, April 6th, 2013 09:50

          24

          Hi Ian

          Thanks for providing the correct solution to the responsive issue. I will also go with pixel based technique to fix the responsive issue in the next part.

          In this technique the images will be shown in smaller size. But the actual full size image will be used. Do you see any disadvantages? and how you will solve those?

          Let us know.

          Definitely we have to test a lot. No matter how much you check, there will always be a browser or device that comes up with an issue in your layout :)

          It really helps to improve future tutorials as well as teach something extra for the readers.

          Thank you enjoying my plugin.

          -2
          • Ian Belanger

            Thursday, April 11th, 2013 10:09

            26

            Hi Rakhitha,

            The one disadvantage is that you will be loading the full size images, no matter the resolution of the users screen. So if your images are huge, they may load slower on mobile devices.

            Now, if you were using css background-image and not images that are embedded in the html. You could create different size images and use media queries to display the smaller versions depending on resolution.

            So far that is the best solution I have come up with. Would love to hear your thoughts and if anyone has a better solution.

            Thanks,

            Ian Belanger

            PS. Most of the problems I run into are with IE, go figure :)

            -1
      • ivascu madalin (@harli91)

        Tuesday, March 26th, 2013 14:40

        9

        You can use media querys or js that listens to the browser width and than change the width of the element based on that

        PS: I hate this comment restriction put to this site

        -1
        • Rakhitha Nimesh

          Wednesday, March 27th, 2013 11:45

          12

          Hi Ivascu

          Thanks for taking time to answer the question on slider.

          What do you mean by comment restriction? Let me know

          0
  • Eisentrout

    Friday, May 24th, 2013 09:12

    29

    Thanks for the great tutorial so far, really looking forward to the back-end section of this tutorial series. Do you have any info on when part 3 will come out?

    0
  • Sam

    Tuesday, March 26th, 2013 10:24

    7

    I find plugins for wordpress are the easiest to install and maintain. Other platforms like Joomla or Drupal have plugins which maybe easy to install, but not always compatible. Otherwise every blog we build is default WP with a security plugin (very important these days). We use WP Better Security plugin.

    -1
    • Rakhitha Nimesh

      Wednesday, March 27th, 2013 11:47

      13

      Hi Sam

      Thanks for your suggestions.

      I am also a big fan of WordPress plugins compared to Joomla and Drupal.

      -1
  • Rafal

    Thursday, March 28th, 2013 18:46

    18

    Hello Rakhitha,

    Nice post although I’ve got two comments for you:

    - echoing values from shortcodes is NEVER ok, as it conflicts with ‘the_content’ filter and potentially messes up the markup
    - I personally use output buffering with shortcodes, to keep the code clean.

    echo '&lt;div class=&quot;container&quot;&gt;
        &lt;div id=&quot;slides&quot;&gt;
          &lt;img src=&quot;'.plugins_url( 'img/example-slide-1.jpg' , __FILE__ ).'&quot; /&gt;
          &lt;img src=&quot;'.plugins_url( 'img/example-slide-2.jpg' , __FILE__ ).'&quot; /&gt;
          &lt;img src=&quot;'.plugins_url( 'img/example-slide-3.jpg' , __FILE__ ).'&quot; /&gt;
          &lt;img src=&quot;'.plugins_url( 'img/example-slide-4.jpg' , __FILE__ ).'&quot; /&gt;
          &lt;a href=&quot;#&quot; class=&quot;slidesjs-previous slidesjs-navigation&quot;&gt;&lt;i class=&quot;icon-chevron-left icon-large&quot;&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;a href=&quot;#&quot; class=&quot;slidesjs-next slidesjs-navigation&quot;&gt;&lt;i class=&quot;icon-chevron-right icon-large&quot;&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;';
    

    The above is quite messy, hard to read, debug and edit.

    In case you were interested I wrote an article on how to do it THE clean way: http://rafalgicgier.com/portfolio/index.php/2013/03/use-output-control-with-shortcodes/

    Regards,

    -1
    • Rakhitha Nimesh

      Tuesday, April 2nd, 2013 20:19

      21

      Hi Rafal

      First I would like to thank you for liking my tutorial.

      Thanks for pointing out the issue in the shortcode. That’s something I have missed. Since this is for beginners I need to keep the explanations as simple as possible. While trying to make things so simple we forget the improtant rules. So I have fixed it in the next part (will be published soon) to use return statement instead of echo for shortcode.

      I like the output buffering method and I haven’t personally used it. Now I am going to use it and see how it works.

      You have mentioned the advantages in your great article. What are the limitations of output buffering?

      Also we can use templates inside the code to provide cleaner code right?

      Thanks for the tips and looking forward to hear from you.

      0
      • Rafal

        Wednesday, April 3rd, 2013 09:44

        23

        Hello Rakhitha,

        I noticed that this tutorial target audience were beginners :) Output buffering is quite an advanced topic and

        ‘This can be useful in several different situations, especially if you need to send headers to the browser after your script has began outputting data. ‘

        to quote php.net http://www.php.net/manual/en/intro.outcontrol.php

        Actually there are not much limitations of output buffering, although it has to be used with care, as it might cause extensive memoryh usage.

        You can include or execute any code between the output control functions, set_cookie() and header() are not affected though.

        I find it very useful to keep the code clean.

        For those who consider that quite complicated the code above could be written in a cleaner way. I personally try to avoid the concatenation operator ‘.’ in spite of using heredoc, nowodoc or double quoted strings with variables within, for example:


        <?php
        $a = "test 1";
        $str = "test 2 {$a}";

        The above would do the same as:


        $a = "test 1";
        $str = "test 2 " . $a;

        And is much more readable :)

        Knowing that you could store .plugins_url( ‘img/example-slide-1.jpg’ , __FILE__ ). in a variable and merge it with the output as above, finally returning it from the shortcode function.

        0
        • Rakhitha Nimesh

          Saturday, April 6th, 2013 09:54

          25

          Hello Rafal

          First I would like to thank you for the detailed answers.

          Output buffering seems to be a pretty good technique to create clean codes. I’ve learned something new today from your answers. Thank you very much.

          Using curly braces without using the dot notation is another good technique for clean code and probably I should have included it in this tutorial.

          Do you write online? Your explanations are pretty good. I would like to read some of your articles if available.

          Let me know.

          0
  • Inayahs

    Monday, March 25th, 2013 10:50

    2

    This excellent write-up about WordPress Plugin Development. Your tutorial is really understandable and it,s very easy language by the way i appreciate for your tutorial.

    -1
    • Rakhitha Nimesh

      Monday, March 25th, 2013 21:35

      5

      Hi Inayahs

      Thank you very much for your thoughts.

      Did you try to use this plugin? If so what are the difficulties you faced and what need to be improved?

      Let me know so that I can include those things in the next part coming soon.

      -1
  • sabuj

    Wednesday, March 27th, 2013 02:51

    11

    I can’t know real different of CSS and HTML though I’m a beginner web designer

    -2
  • Peter

    Monday, March 25th, 2013 11:20

    3

    Hi! Is it necessary to do anything addtional in order to use a script from the form() function of a Widget?? I’ve been trying the same code as above but the tag is not added in the page and of course, I can’t use the script.
    Thanks!

    -2
    • Rakhitha Nimesh

      Monday, March 25th, 2013 21:33

      4

      Hi Peter

      You can directly use the plugin inside the WordPress with a shortcodes inserted into page or post.

      Your question is not clear to me. Can you explain further?

      Are you trying to use it as a widget instead of plugin? If so please let me know the things you did step by step.

      Thanks

      -1
  • Lorenzo de Jong

    Saturday, April 13th, 2013 12:04

    27

    Thanks for the great tutorial so far, really looking forward to the back-end section of this tutorial series. Do you have any info on when part 3 will come out?

    Great work!

    -2
  • angry

    Saturday, June 8th, 2013 09:31

    30

    this is a really poorly designed tutorial/ I found myself wondering which bloody file to put the code in. I dont want to have to download the rar file in order to see what code goes where. i tried following this and I just cant. very poorly designed. Also, feel free to delete this comment. If you were a real developer you would leave this comment so other people can see my opinion. Its a waste of time. Certainly a waste of my time.

    -7
  • angry

    Saturday, June 8th, 2013 09:31

    30

    this is a really poorly designed tutorial/ I found myself wondering which bloody file to put the code in. I dont want to have to download the rar file in order to see what code goes where. i tried following this and I just cant. very poorly designed. Also, feel free to delete this comment. If you were a real developer you would leave this comment so other people can see my opinion. Its a waste of time. Certainly a waste of my time.

    -7
  • Eisentrout

    Friday, May 24th, 2013 09:12

    29

    Thanks for the great tutorial so far, really looking forward to the back-end section of this tutorial series. Do you have any info on when part 3 will come out?

    0
  • Lorenzo de Jong

    Saturday, April 13th, 2013 12:04

    27

    Thanks for the great tutorial so far, really looking forward to the back-end section of this tutorial series. Do you have any info on when part 3 will come out?

    Great work!

    -2
  • Wellington Lorindo

    Friday, March 29th, 2013 21:58

    19

    Nice tutorial! I was needing to learn about wordpress’ plugins and I think this is all I need! Thank you!

    0
    • Rakhitha Nimesh

      Tuesday, April 2nd, 2013 20:10

      20

      Hi Lorindo

      Thanks for your interest in my tutorial.

      Are you a Web designer? What are the things you would like to see from us in the future?

      Feel free to share your ideas and questions.

      +1
  • Rafal

    Thursday, March 28th, 2013 18:46

    18

    Hello Rakhitha,

    Nice post although I’ve got two comments for you:

    - echoing values from shortcodes is NEVER ok, as it conflicts with ‘the_content’ filter and potentially messes up the markup
    - I personally use output buffering with shortcodes, to keep the code clean.

    echo '&lt;div class=&quot;container&quot;&gt;
        &lt;div id=&quot;slides&quot;&gt;
          &lt;img src=&quot;'.plugins_url( 'img/example-slide-1.jpg' , __FILE__ ).'&quot; /&gt;
          &lt;img src=&quot;'.plugins_url( 'img/example-slide-2.jpg' , __FILE__ ).'&quot; /&gt;
          &lt;img src=&quot;'.plugins_url( 'img/example-slide-3.jpg' , __FILE__ ).'&quot; /&gt;
          &lt;img src=&quot;'.plugins_url( 'img/example-slide-4.jpg' , __FILE__ ).'&quot; /&gt;
          &lt;a href=&quot;#&quot; class=&quot;slidesjs-previous slidesjs-navigation&quot;&gt;&lt;i class=&quot;icon-chevron-left icon-large&quot;&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;a href=&quot;#&quot; class=&quot;slidesjs-next slidesjs-navigation&quot;&gt;&lt;i class=&quot;icon-chevron-right icon-large&quot;&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;';
    

    The above is quite messy, hard to read, debug and edit.

    In case you were interested I wrote an article on how to do it THE clean way: http://rafalgicgier.com/portfolio/index.php/2013/03/use-output-control-with-shortcodes/

    Regards,

    -1
    • Rakhitha Nimesh

      Tuesday, April 2nd, 2013 20:19

      21

      Hi Rafal

      First I would like to thank you for liking my tutorial.

      Thanks for pointing out the issue in the shortcode. That’s something I have missed. Since this is for beginners I need to keep the explanations as simple as possible. While trying to make things so simple we forget the improtant rules. So I have fixed it in the next part (will be published soon) to use return statement instead of echo for shortcode.

      I like the output buffering method and I haven’t personally used it. Now I am going to use it and see how it works.

      You have mentioned the advantages in your great article. What are the limitations of output buffering?

      Also we can use templates inside the code to provide cleaner code right?

      Thanks for the tips and looking forward to hear from you.

      0
      • Rafal

        Wednesday, April 3rd, 2013 09:44

        23

        Hello Rakhitha,

        I noticed that this tutorial target audience were beginners :) Output buffering is quite an advanced topic and

        ‘This can be useful in several different situations, especially if you need to send headers to the browser after your script has began outputting data. ‘

        to quote php.net http://www.php.net/manual/en/intro.outcontrol.php

        Actually there are not much limitations of output buffering, although it has to be used with care, as it might cause extensive memoryh usage.

        You can include or execute any code between the output control functions, set_cookie() and header() are not affected though.

        I find it very useful to keep the code clean.

        For those who consider that quite complicated the code above could be written in a cleaner way. I personally try to avoid the concatenation operator ‘.’ in spite of using heredoc, nowodoc or double quoted strings with variables within, for example:


        <?php
        $a = "test 1";
        $str = "test 2 {$a}";

        The above would do the same as:


        $a = "test 1";
        $str = "test 2 " . $a;

        And is much more readable :)

        Knowing that you could store .plugins_url( ‘img/example-slide-1.jpg’ , __FILE__ ). in a variable and merge it with the output as above, finally returning it from the shortcode function.

        0
        • Rakhitha Nimesh

          Saturday, April 6th, 2013 09:54

          25

          Hello Rafal

          First I would like to thank you for the detailed answers.

          Output buffering seems to be a pretty good technique to create clean codes. I’ve learned something new today from your answers. Thank you very much.

          Using curly braces without using the dot notation is another good technique for clean code and probably I should have included it in this tutorial.

          Do you write online? Your explanations are pretty good. I would like to read some of your articles if available.

          Let me know.

          0
  • Harli

    Wednesday, March 27th, 2013 15:47

    16

    I meen this “Hey, I’m sorry to say but unfortunately your comment seems too short. why don’t you give us a chance to have a better conversation with us. Tell us more about what you think, or just ask a question.”

    0
    • Rakhitha Nimesh

      Wednesday, March 27th, 2013 20:19

      17

      Hi

      Now I totally get what you meant.

      I am lacking some skills in having discussions. I think this will be a good opportunity.

      As you are interested in having this discussion, why don’t we talk about how we can make the sliders responsive. I am plannng to go with default method of slidesjs, which is the pixel based approach.

      In percentage based approach, do you create different sizes of images for different device sizes? What is your experience on that?

      -1
  • sabuj

    Wednesday, March 27th, 2013 02:51

    11

    I can’t know real different of CSS and HTML though I’m a beginner web designer

    -2
  • David

    Tuesday, March 26th, 2013 11:21

    8

    Nice article! Just a heads up though to the admin of this site. Clicking the link to this article in the notification email Aweber sent led to a 404 page i.e “Not Found The requested URL /y/ct/ was not found on this server.” Had to do a search to get here.

    +1
    • Rean John Uehara

      Tuesday, March 26th, 2013 22:09

      10

      Hi David, I’d like to check what went wrong, can you forward the email to me at rean[@]1stwebdesigner[dot]com? Thanks!

      +1
    • Rakhitha Nimesh

      Wednesday, March 27th, 2013 11:50

      14

      Hi David

      Thank you very much for taking time to read the article even when you were having trouble finding the link.
      Rean will probably look into the 404 issue you are having.

      0
  • Sam

    Tuesday, March 26th, 2013 10:24

    7

    I find plugins for wordpress are the easiest to install and maintain. Other platforms like Joomla or Drupal have plugins which maybe easy to install, but not always compatible. Otherwise every blog we build is default WP with a security plugin (very important these days). We use WP Better Security plugin.

    -1
    • Rakhitha Nimesh

      Wednesday, March 27th, 2013 11:47

      13

      Hi Sam

      Thanks for your suggestions.

      I am also a big fan of WordPress plugins compared to Joomla and Drupal.

      -1
  • Peter

    Monday, March 25th, 2013 11:20

    3

    Hi! Is it necessary to do anything addtional in order to use a script from the form() function of a Widget?? I’ve been trying the same code as above but the tag is not added in the page and of course, I can’t use the script.
    Thanks!

    -2
    • Rakhitha Nimesh

      Monday, March 25th, 2013 21:33

      4

      Hi Peter

      You can directly use the plugin inside the WordPress with a shortcodes inserted into page or post.

      Your question is not clear to me. Can you explain further?

      Are you trying to use it as a widget instead of plugin? If so please let me know the things you did step by step.

      Thanks

      -1
  • Inayahs

    Monday, March 25th, 2013 10:50

    2

    This excellent write-up about WordPress Plugin Development. Your tutorial is really understandable and it,s very easy language by the way i appreciate for your tutorial.

    -1
    • Rakhitha Nimesh

      Monday, March 25th, 2013 21:35

      5

      Hi Inayahs

      Thank you very much for your thoughts.

      Did you try to use this plugin? If so what are the difficulties you faced and what need to be improved?

      Let me know so that I can include those things in the next part coming soon.

      -1
  • Ivascu Madalin

    Monday, March 25th, 2013 09:54

    1

    For the “.container” to be responsive it needs a width in % instead of pixels , you can do this by changing it from 940px to 100% , the downside to this is that the images aren’t displayed properly, a quick fix is to change the width of the images from 100% to 70% or manualy make tham smaller

    0
    • Rakhitha Nimesh

      Monday, March 25th, 2013 21:41

      6

      Hi Ivascu

      Thanks for the solution.

      Do you think it is possible to keep pixel based widths and still make it responsive?

      Answer will be given in the next part and let’s see how many solutions we can create together.

      -1
      • ivascu madalin (@harli91)

        Tuesday, March 26th, 2013 14:40

        9

        You can use media querys or js that listens to the browser width and than change the width of the element based on that

        PS: I hate this comment restriction put to this site

        -1
        • Rakhitha Nimesh

          Wednesday, March 27th, 2013 11:45

          12

          Hi Ivascu

          Thanks for taking time to answer the question on slider.

          What do you mean by comment restriction? Let me know

          0
      • Ian Belanger

        Wednesday, April 3rd, 2013 09:23

        22

        Hi Rakhitha,

        Do you think it is possible to keep pixel based widths and still make it responsive?

        Yes, this is possible, but you must use max-width for your pixel based width and set your image class in the css to have width: 100%; and height: auto;

        This should make your slider images responsive, while keeping the aspect ratio, but still keep them from going above your max-width. This technique will also work with iframe, object and embed, although you may still run into problems with the heights not automatically resizing.

        My advice, test, test and test some more.

        Hope that helps and I am really enjoying the plugin tutorial so far.

        Ian Belanger from im Graphic Designs

        -1
        • Rakhitha Nimesh

          Saturday, April 6th, 2013 09:50

          24

          Hi Ian

          Thanks for providing the correct solution to the responsive issue. I will also go with pixel based technique to fix the responsive issue in the next part.

          In this technique the images will be shown in smaller size. But the actual full size image will be used. Do you see any disadvantages? and how you will solve those?

          Let us know.

          Definitely we have to test a lot. No matter how much you check, there will always be a browser or device that comes up with an issue in your layout :)

          It really helps to improve future tutorials as well as teach something extra for the readers.

          Thank you enjoying my plugin.

          -2
          • Ian Belanger

            Thursday, April 11th, 2013 10:09

            26

            Hi Rakhitha,

            The one disadvantage is that you will be loading the full size images, no matter the resolution of the users screen. So if your images are huge, they may load slower on mobile devices.

            Now, if you were using css background-image and not images that are embedded in the html. You could create different size images and use media queries to display the smaller versions depending on resolution.

            So far that is the best solution I have come up with. Would love to hear your thoughts and if anyone has a better solution.

            Thanks,

            Ian Belanger

            PS. Most of the problems I run into are with IE, go figure :)

            -1

Comments are closed.

54.204.163.26 - unknown - unknown - US