Solution Hacker

I have used Wordpress to build my money site as many affiliate marketers suggested. However, this post is not going to show you how to set up a typical Wordpress Website . There are many tutorials online that show you how to do this in steps. So, I am not going to repeat it here. The only tip I suggest here is that if you want to have a professional looking website. You should really consider to spend a little money to purchase a professional and customizable theme from Elegantthemes.com . Just paying around $30 bucks, you can have full access of tons of their professional themes. Since I have owned quite a number of websites, it is indeed a great deal for me. Anyway, as I said, it is not what I am going to talk about here today. Today, I would like to show you how wordpress shortcode works behind the scene.

What is wordpress shortcodes?

The best way to show you the power of wordpress shortcode is to give you some examples.

The widget above is created purely using wordpress shortcodes. See the code below:

[tabs style="default" title="Wordpress shortcode demo"]
   [tab title="Amazon Product"] [amazon asin="B0047DVWLW" template="Simple Ad Unit"][/tab]
   [tab title="Facebook Comments"]
      [rsstag url=http://camelcamelcamel.com/product/B0047DVWLW/new.xml]
      [rsstag url=http://camelcamelcamel.com/product/B0047DVWLW/used.xml]
   [/tab]
   [tab title="Follow"] [twitter_stream search="ipad 2"] [/tab]
[/tabs]

Isn’t that cool? With few lines of xml like tag, I am able to create a widget that shows the product summary, its price history and who is following it. As you can see above, I have combined 4 different shortcodes from 4 different plugins into one widget. At the high level, there are 2 kinds of shortcodes: layout and content . Layout shortcodes are helping you to present the content in a nice looking way. Content shortcodes are to help you to pull the content from different sources in a simple way.

Shortcode in Template

If you are creating a product detail page, you can open your wordpress editor to type in the shortcode like above. However, if you have quit a bit of products, this process will be very tedious. If you are a tech person, you could create a script to load your products’ content into wordpress database’s post table. But if you want to use wordpress as the data entry UI, you can create a product detail template that leverages the shortcodes using the specific method below:

1

You can also use shortcode dynamically based on the custom field setting like below:

1

How to create your own wordpress shortcodes?

There are times you cannot find any shortcode that fits your need exactly. Two things you can do:

1. Customize an existing one from other plugin.
2. Build one from scratch yourself.

However, both require you to have good understanding how shortcodes work behind the scene. Don’t worry. It is not that difficult if you have a little bit of coding skill. To define your own wordpress shortcode, you first write a function of what you want the shortcode to do. Then you register the function via add_shortcode(tagName, functionName). Here is an example to define the shortcode name bartag with attribute foo. The extract method below taking the return of another function shortcode_atts that is used to define the default attribute value(s). If an attribute is not in this default list, it will not even be interpreted.

1

Now you have an good idea how to define a function. Here we are going to create a shortcode to make Google chart creation easier (ie. no need to remember the parameters and url).

Creating a Google chart is quite simple, you just need to simply define a url under “img” will do the magic. However, the url uses some short parameters that you may need to look them up in order to create the url correctly. To make it easier, we create the shortcode above to make the parameters more explicit and hide the google url for you. With this shortcode, now you can create a sparkline chart as following.

1

After you write this code, save it under plugin file named google-chart.php and put the following header above the function.

1

Then you can activate this plugin in Wordpress. If it is activated, you can put the following wordpress shortcode in your post and generate the chart as below:

[chart data="0,12,24,26,32,64,54,24,22,20,8,2,0,0,3" bg="F7F9FA" size="200x100" type="sparkline"]

When wordpress shortcode meets custom fields in post

Congratulation! If you follow my tutorial above, you have just equipped the key skill that can take your wordpress website to the next level.  However, I am not going to stop here. I would like to show you how you can use shortcode with custom field. First, you can write a shortcode to extract custom field value and use it in your post. To do that, you can build a plugin following the code below:

1

Once you can extract the custom field from post using shortcode, you can use it for UI and/ or post content.