Good resources learn how to develop WordPress plugin

Tags: ,

Create a Custom WordPress Plugin From Scratch

This tutorial is from: http://code.tutsplus.com/tutorials/create-a-custom-wordpress-plugin-from-scratch–net-2668

WordPress stores its plugins in the wp-content/plugins/ folder. This is the place where we’ll be adding our files as well.

we are going to use two files (one for the main plugin file and one for implementing the administration page) therefore we’ll be putting all our files in a specific folder that we’ll name oscommerce_importer

Now we create our main plugin file. We’ll name it as  itoscommerce_importer.php. You can really name it whatever you want, it doesn’t make any difference.

If you now open your WordPress administration panel and navigate to thePlugins sections, your screen will look something like this:

Admin panel

 

As you can see, there is not the slightest sign of our new plugin. It’s time to change that and tell WordPress that our file is going to implement a plugin. We need to add a plugin specific information header to our newly created file. This header will look like this:

You can change the content of this header to your liking but make sure you keep all the lines, otherwise WordPress won’t correctly recognize your plugin.

If you refresh your administration panel’s plugin page, you’ll now see our plugin listed along with the other ones.

Admin panel with deactivated plugin

 

See how all the relevant information like name, description, author, URL are extracted from the information header? This is why it is always important to correctly fill out this information. Let’s go and activate our plugin by clickingActivate to the right of the plugin entry.

Our plugin is now shown in the administration panel so WordPress is aware of it. However, it doesn’t do anything as it contains nothing except of the information header. 

WordPress offers a great way to include your plugin code in different places all over the template, be it physical positions within a page or logical positions within the process of building up a page that is going to be displayed. First, we are going to have a closer look at the second category, the logical positions, better known as action hooks.

You can view action hooks as callback function. Whenever WordPress is executing a certain operation, like, for instance, displaying the page footer, it will allow your plugins to execute their own code that must be run at that exact moment.

For a better understanding, let’s consider a generic plugin called my_plugin that implements a function called mp_footer() that has to be run whenever the page footer is displayed. We will tell WordPress to call this function, at the moment of displaying the footer by using a special function called add_action():

The add_action() function takes the action hook name as its first parameter and the name of the function that must be executed, as a second parameter. This function call will be added to your main plugin file (the one containing the information header), usually, right under the function code that needs to be executed (mp_footer() in our example). You will find the full list of available action hooks in the WordPress Codex.

We’ll be using action hooks in the next chapter, where we are going to build the administration page for our plugin.

We’ll start the implementation of the module by defining its configurable parameters and make these accessible to the site administrator. Let’s see what these configuration bits would be:

  • Database settings
    • database host
    • database name
    • database user
    • database password
  • Store settings
    • store URL
    • folder for the product images

First, we need the database host, name, user and password in order to be able to connect to it and extract the needed data. Second, we need some general data about the store like its URL and the folder where the product images are stored. We need this information in order to be able to build the links because the paths contained in the database are all relative the previously mentioned product image folder.

Now that we know what we want to include in the configuration panel, it’s time to implement it. We’ll start by creating a new menu item to access the page and we’ll place it inside the Settings menu. Remember our chat about the action hooks in the previous chapter? It’s time to use this feature.

If you’ll scroll over the list of action hooks, you’ll see that WordPress also provides one that gets called when the basic menu structure has been generated (admin_menu) so, this would be the optimal place to chime in and create our own menu item.

Now that we identified the action we are going to use, all we need is to define our own function that will be called when this action hook runs. We’ll call our function oscimp_admin_actions() where oscimp_ stands for oscommerceimporter and is used to create a possibly unique function name that will not get mismatched with any other function within WordPress or any of its plugins. Let’s see how the code will look like:

As you can see, we are creating our function oscimp_admin_actions() then associate it with the admin_menu action hook using the add_action() function. The next step would then be to add some code to our oscimp_admin_actions()function to actually create the new menu item.

As with most WordPress things, adding a new menu item is also very easy. It all boils down to calling a single function. We would like to add our new menu item to the Settings menu so, in this case the function we need isadd_options_page(). We’ll add the code inside the oscimp_admin_actions()function.

If you refresh your admin page, you’ll see the new menu item appear underSettings.

New menu item

Each existing menu has its own function to be used to add sub-menu items. For instance, if we would like to add our sub-menu item to the Tools menu instead of Settings, we would use the add_management_page() function instead of add_options_page(). You can find more details about the available options in the Adding Administration Menus section of the WordPress Codex.

If we get back to the newly added code line, you’ll probably notice the last parameter. This is actually a function name that will be called when the newly added menu item is clicked on and will be used to build the administration page of our plugin. Next, we’ll be adding this new function. However, before proceeding we should stop for a moment and think about what will be implemented on this page.

We already defined the parameters we want to make configurable (database host, name, user, etc) so these will have to be included in a form in order to allow the user to send the data to the database. Once the form is defined, we’ll need a bit of code that extracts the sent data from the form and saves it to the database.

Last but not least, we need some code to extract the existing data from the database (if any) and pre-populate the form with these values. As you can see, there are quite a few things to do so, it might be a good idea to separate this functionality to its own file. We’ll name the fileoscommerce_import_admin.php. Now, go and create an empty file with the given name.

As already mentioned, we’ll have to create the function that will display our plugin configuration page (we named this function oscimp_admin()). The code inside this function will be included from our newly created PHP file,oscommerce_import_admin.php

 

Empty plugin configuration page

 

Next, we are going to create our form. For this we’ll use the following code:

 

If you are familiar with HTML and PHP, the code above will make some sense but, still, let us shortly walk through the lines.

  • We start by creating a div with the class wrap. This is a standard WordPress class that will make our page look like any other page in the administration area.
  • The form will be using the POST method to send data back to itself. This means that the form data will be received by the same page so, we can add the database update code to the same file.
  • Next, there is a hidden field that will be used to determine whether the current page is displayed after the user has pressed the Update Optionsbutton or not. When the page receives the form data, the value of this field will be set to Y.
  • The next lines will create the form input fields for the database and store settings. As you can easily see, the value parameters are be set by the content of PHP variables. We’ll talk about these soon.
  • Now if you refresh the admin page, you’ll see our newly created form. However, pressing the Update Options button will have no effect other than refreshing the page and the form fields are empty.
Plugin configuration page with form

Once the form is ready to go, we’ll take care of the form data handling itself, updating the database and retrieving existing option values from the database. For this, we’ll first have to decide whether the current page is displayed after the user has pressed the Update Options button or not. We’ll do this by analyzing the value of the form’s hidden field, oscimp_hidden. The following code will be added at the very beginning of ouroscommerce_import_admin.php file, before the code for displaying the form:

Next, we’ll be handling the form data and update the plugin options in the database accordingly. For this we’ll be using the update_option() function. The first parameter of this function is the option name which will be sued later to uniquely identify this option and its value. The second parameter is the value to be assigned.

 

The code above if pretty much self-explanatory but please note that here we are using the PHP variables we have previously mentioned while building the form. These variables will be updated with the current form data values and will be displayed in the form itself. Go, check it out! Refresh the configuration page and enter your OSCommerce database settings as well as your store parameters then press Update Options.

If everything was implemented like described above, you’ll see an Options saved success message and the form fields will contain the data you have just entered.

Plugin configuration page with success message

Last but not least, we’ll need to pre-populate the form with the database data when the user opens the configuration page. For this, we’ll be using the get_option() function which retrieves the specified option from the database.

 

You can test the code above by simply navigating to another page within the admin area and then retuning to this page by clicking the OSCommerce Product Display sub-menu item in the Setting menu. If everything goes well, you will see the form with all the fields pre-populated with the data you have entered.

Plugin configuration page with pre-populated form

With this last piece of code, we have finished implementing the plugin’s configuration page so, let’s review what has been done in this chapter:

  • we defined what parameters need to be configured by the site administrator
  • we added an action hook for when the menu is displayed in the administration panel to help us add a new sub-menu item for our plugin
  • we have added a new sub-menu item to the Settings menu that will link to our plugin’s configuration page
  • we have defined a function that will build the plugin’s configuration page and separated its code in a second PHP file
  • we have built the form containing the user inputs for each of the configurable data bits
  • we have built the database update function
  • we have built a function that will pre-populate the form with the option values stored in the database

Well, everything went quite fine so far but our plugin is yet unusable because we haven’t implemented the part that will actually allow us to display the products in the front-end.

In order to allow our users to display the products in the front-end, we’ll need to declare a function that can be called from the template’s PHP code and which will return the HTML code to be inserted in the template. We are going to name this function oscimp_getproducts() and accept the number of products to be displayed as a function parameter. The function itself will be implemented in our plugin’s main file, oscommerce_import.php

As you can see, we are assigning a default value to our function parameter thus allowing our users to call the function both with and without a parameter. If the function is called with a parameter, like oscimp_getproducts(3), it will display three products. If the function is called without a parameter, likeoscimp_getproducts(), it will only display one product.

First thing in our function would be to establish a connection to the OSCommerce database. Thanks to our plugin configuration page, we now have all the information we need: database host, name, user and password. We’ll be using the built-in wpdb class to create a new database object.

 

Once this is done, we declare a variable that will contain the HTML code and start quering the OSCommerce database for each of the specified number of products. The code below merely implements this query loop and can be further-on improved by checking for duplicates, for instance, but this is not the subject of this tutorial so, we’ll keep it simple for the sake of readability.

 

Once this is done, all we have to do is insert the oscimp_getproducts() function call to the template. We’ll be displaying three products at the bottom of the sidebar so, we are going to modify the sidebar.php file of our template, inserting the following code right below the list item containing the meta links:

 

If you refresh your front-end page now, you’ll see the three random products displayed at the bottom of the sidebar.

Frontpage with random products

With this last piece of code, we have finished implementing the front-end function as well.

We have now implemented a WordPress plugin from scratch. Let’s summarize what has been done:

  • we defined the way we store our plugin files
  • we defined the information header in order to make our plugin visible for WordPress
  • we talked about the action hooks and the way these are used
  • we defined what parameters need to be configured by the site administrator
  • we added an action hook for when the menu is displayed in the administration panel to help us add a new sub-menu item for our plugin
  • we have added a new sub-menu item to the Settings menu that will link to our plugin’s configuration page
  • we have defined a function that will build the plugin’s configuration page and separated its code in a second PHP file
  • we have built the form containing the user inputs for each of the configurable data bits
  • we have built the database update function
  • we have built a function that will pre-populate the form with the option values stored in the database
  • we have built our user function for use in the template
  • we connected to the OSCommerce database
  • we queried the OSCommerce database extracting the product ID, image and name
  • we have built the HTML code for displaying the extracted data
  • we have included the user function to the template sidebar

I hope this tutorial gave you all the information you need to build a WordPress plugin from the beginning. Please feel free to post your comments below.

 

Learn How To Create Shortcodes in WordPress Plugin With Examples

 

For the beginners, creating shortcode is sometimes not easy. But, WordPress makes it pretty simple to create your own shortcode by using WordPress shortcode function.

In this tutorial I am going to explain you how easily you can create your own shortcode using 3 simple examples. You will learn how to create WordPress shortcode plugin.

Example 1 – I am going to create a WordPress plugin to display form on any page or post of the website.

Example 2 – I am going to create a WordPress plugin to display text on any page or post of the website.

Example 3 – I am going to create a WordPress plugin that helps to share pages or posts on Twitter.


Create Shortcodes in WordPress Plugin

WordPress offers a predefined shortcode function to create shortcode in WordPress plugin. For using shortcode function, you have to define a handler function that parse the shortcode and return some output.

Then, you need to register a shortcode using add_shortcode() function.

add_shortcode( $shortcode_name, $handler_function);

  • $shortcode_name – (required, string) It is a string that to be searched in the post.
  • $handler_function – (required, callable) It is a hook to run when shortcode is found.

 create a wordpress shortcode

 
 
 

Note: I have created a shortcode folder under the plugin folder of my WordPress where I have created a file named shortcode.php.

WordPress ShortCode Example 1 – Display Form On Pages/Posts

You can create shortcode to display form on any page or post of the website. The below code includes-

  • Plugin details
  • form_creation() to create a form which includes form fields.
  • add_shortcode() function which contain shortcode name test and calling of form_creation() function as parameters.

Output

You need to place WordPress shortcode within square brackets in order to represent it on any page or post of the website. As you can see in the below image, code wordtest enclosed within square brackets.

 apply shortcode

This is how the form page appears on the front end.

form appears by shortcode

WordPress Shortcode Example 2 – Display Text On Pages/Posts

You can create shortcode to display text on any page or post of the website. The below code includes-

  • Plugin details
  • wp_first_shortcode() contain the text that you want to display in front end.
  • add_shortcode() function contain shortcode name first and calling of wp_first_shortcode() function as parameters.

Output

You can insert a shortcode with code word first enclosed with square brackets.

develop shortcode

This is how the text display in the post on front end.

text shortcode

WordPress Shortcode Example 3 – Share Pages/Posts On Twitter

You can create shortcode to share your pages or posts on Twitter. The below code includes-

  • Plugin details
  • ink_wp_shortcode() get the particular post or page that you want to share on Twitter.
  • add_shortcode() function contain shortcode name twitter and calling of ink_wp_shortcode() function as parameters.

Output

You can see in the below image, shortcode twitter is placed at the end of the post.

twitter shortcode

You can directly share the pages or posts on Twitter by click on the text Share on Twitter.

output of twitter shortcode

Conclusion

I hope this tutorial is helpful to you and make you understand the concept that you need to use while creating a WordPress shortcode for your own purpose. You can create as many as shortcode you want and use it wherever you want.

Moreover, you can also watch the video tutorial for this post, just check it out.

Some more resources in Chinese:

http://www.wpdaxue.com/creating-a-custom-wordpress-registration-form-plugin.html

http://code.tutsplus.com/tutorials/creating-a-custom-wordpress-registration-form-plugin–cms-20968

https://tareq.co/2011/07/simple-pagination-system-in-your-wordpress-plugins/