How to build a WordPress plugin

WordPress is the most popular blogging and CMS platform out there today. Part of what has made it so successful is its ability to be extended via plugins to perform any function you desire. Developing a plugin framework is really difficult, but WordPress has one of the best solutions I’ve seen to date. So how do you go about taking advantage of it and building your own plugin?
WordPress development is done in PHP, which makes it pretty accessible as developers generally know their way around the language. Building a plugin is just a matter of creating a basic file structure and using WordPress provided functions and event hooks to drive your application.

The File Structure

All it takes to create a plugin is a single PHP file, but common practice dictates that you house your plugin and its files within a directory. To begin, create a directory to hold your plugin and give it a name matching your plugin. Then, within that directory, create your main PHP file, again naming the file with the name of your plugin:
+ super-plugin     - super-plugin.php
If your plugin is going to require any images, javascript, css, or additional PHP files, you will house those within this directory as well:
+ super-plugin     + admin          - super-plugin-admin.php     + img          - icon.png     + js          - super-plugin.js - super-plugin.php - readme.txt
In this example, I’ve created 3 directories, admin, img, and js to hold my additional files. The super-plugin-admin.php file will be used to provide a web interface to my plugin on the WP backend which I’ll address in another post.
Finally, if you plan on hosting your plugin in the WordPress plugin directory, you’ll need to include a file named readme.txt at the root of the directory. The file should follow the format detailed in this readme.txt example.

Defining Your Plugin

Next, we need to define our plugin so that WP will recognize it and allow it to be installed, removed, and activated.
Open your main plugin file, super-plugin.php and add the following to the top of the file:
\<\?php /* Plugin Name: Name Of The Plugin Plugin URI: http://URI_Of_Page_Describing_Plugin_and_Updates Description: A brief description of the Plugin. Version: The Plugin's Version Number, e.g.: 1.0 Author: Name Of The Plugin Author Author URI: http://URI_Of_The_Plugin_Author License: A "Slug" license name e.g. GPL2 */ ?>
 

Initializing your program
Replace each line with the data for your plugin. This will define your plugin details for WordPress. At a minimum you need the Plugin Name: field for the plugin to be recognized.
Now that WordPress knows about your plugin, it’s time to make it do something. This is accomplished by using hooks and predefined WordPress functions. A hook is an event listener that is trigger based on outside events occurring. If your program needs to perform any type of setup, such as database table creation, you can tap into the plugin activation hook like so:
//SETUP function super_plugin_install(){     //Do some installation work } register_activation_hook(__FILE__,'super_plugin_install');
Then, when a user activates your plugin, any function that has been registered with the activation hook will be executed.
You might also want to register some custom javascript that your plugin will need to operate. You can do this by using the add_action hook to piggyback on to another process. In this case, we’re going to listen for the wp_enqueue_scripts event to trigger and let WordPress know that we want in on the script party and to please execute our function as well.
//SCRIPTS function super_plugin_scripts(){     wp_register_script('super_plugin_script',plugin_dir_url( __FILE__ ).'js/super-plugin.js');     wp_enqueue_script('super_plugin_script'); } add_action('wp_enqueue_scripts','super_plugin_scripts');
When scripts are being loaded up, your function will get executed and your script will get registered and queued to be added into the head portion of the HTML.
Finally, you want to actually run your program. You can do this by listening to various WP hooks and waiting for an appropriate event that would trigger your code to run. If you want to run your program every time a visitor comes to your site, you can use the ‘init’ or ‘wp_loaded’ action to trigger your code:
//HOOKS add_action('init','super_plugin_init'); /********************************************************/ /* FUNCTIONS ********************************************************/ function super_plugin_init(){     //do work     run_sub_process(); } function run_sub_process(){     //more work }

In this example, the super_plugin_init() function will get called on every new request and you can perform whatever logic you need. 

How To: Insert Ads Only After the First Post

Have you ever tried to insert advertisements (or any bit of code really) into the WordPress post loop, then found that it will insert the banner after each post?   It really depends on what you are going for, but this usually will not be an ideal solution to placing advertisements between posts on your homepage.   If you’d like to place something only after the first post in the WordPress post loop, here is a quick hack you can do to tell WordPress to only display it after the first post.
Simply go to your themes homepage and look for the following code:
<?php endwhile; ?>
Immediately before this code, place the following code:
<?php if(!$show_ads){ ?>
Insert Code Here<?php $show_ads = 1; } ?>
Obviously you’ll want to replace Insert Code Here with your code.  Told you it was easy!

How to add slider in Genesis Themes

Add a Slider to the Home Page in Genesis Theme WordPress using Cyclone Slider

Sliders have been slammed a lot recently, notably for their effectiveness and usability, however within certain contexts they are still relevant and more importantly still popular with clients, their use may be more relevant to certain industries, their usage may be better suited to subtle areas of the page. That said, here is a guide to slap one in front and center of the home page.

genesis-slider-home-pageThis guide adds a slider to the home page only of the sample Genesis WordPress theme usingCyclone Slider 2 plugin, light weight and free.
The slider will appear directly below the main menu above the sidebar and main content.

Register a New Widget Area

First thing is to register and position a new widget area for the slider.
The above code needs to be added to your functions.php file, the code contains 2 functions and actions, the first registers the new widget area and the second positions it only on the front page.

See the Widget in the WP Dashboard

genesis-slider-widget

Using Cyclone Slider Plugin

Download and install the plugin  and add your slides
genesis-slider-cyclone-plugin

On the left side in the plugin settings are the width and height and transition values, enter what suits your layout, also leave the responsive setting on so the slider will display on all devices. It is best you initially create your slide images to the maximum size pixel dimensions that you need in your layout.
genesis-slider-cyclone-plugin-settings
Once you publish your slider you will get both shortcode or php to add into the widget area.
genesis-slider-cyclone-plugin-shortcode

Adding Shortcode to Widgets in WordPress

By default you can’t add shortcode or php to widgetized areas, but you can get around this by adding in your functions.php
or if you want to use PHP

 Add the Shortcode to the Slider Widget

genesis-slider-cyclone-shortcode
Add in the slider shortcode and the slider is now viewable in the from end.
genesis-slider-cyclone-frontend

Fixing up Slider Alignment in CSS

In this example above my slider is not centered as my slides are set to 1100px whilst my main content area is 1200px wide and the sider is aligning left, in style.css setting the slider to have an auto margin for left and right will center the slides.
genesis-slider-cyclone-frontend-centered

This layout also responds for smaller devices.
genesis-slider-mobile-responsive

Going All The Way – Full Width Slider

Making the slider go edge to edge of the viewport  just requires a couple of tweaks of what was already done. First is to remove the .wrap class in the new widget area
Add in your slides via the Cyclone plugin, for full width images, the original image needs to be more landscape and at about 1400px wide to be most effective, also add in the  function to allow shortcodes, grab the shortcode and add to your widget.

Adjusting the CSS for Full Width

Add the above CSS to your style.css to make the images go full width, adjust the max-height value to your preference.
Giving us…
genesis-slider-mobile-responsive-full-width