Guide to understanding Meta Data and when to use it

WordPress started as a blogging platform and turned itself into a powerful CMS, running a variety of mid-size and large projects all over the world. Posts and pages are the beginning of the custom post type generation, just like categories and tags form the first pair of custom taxonomies. How about all the properties that we want to add to our items? Custom fields are on the right track for this venture.

What are Custom Fields?

In simple words custom fields are additional information that you can add in Posts and Pages, as well as to any custom post type defined to your system. A good starting point is to check the WordPress Codex, where custom fields are described in details and you can find some examples.
In our tutorial we will add Product Name and Product price to the post and we will display it bellow the post title. Also we will make price discount for our registered users.

Setting the stage

We have to enable (if not enabled already) Custom Fields from Screen Options in our Post Editor.

When we are ready the Custom Fields Area should be visible right bellow our WYSIWYG post editor.

Adding our first Custom Field

Go to Custom Fields and click the “Enter New” button.

In the “Name“field we should define the name of our Custom Filed (in our case “product_name“) and in “Value” – our custom filed’s value (for instance, “Butterflies“).
Now, click on “Add Custom Filed” button and there we go – we have created our first custom filed.

We can repeat step two and do the same, but this time we will add product price.
Again we go to Custom Fields, click Enter New. For Name add product_price and for Value add 100.
Now we have our two Custom Fields and we can proceed to the next step.

Display our Custom Fields below Post title.

For the sake of our example we would be using a basic WordPress installation and display our content based on the Twenty Eleven theme.
Now go to Appearance => Editor and from Twenty Eleven files choose content-single.php(or single.php, it depends of your WordPress theme).
We have to display Product Name and Product Price bellow Post title, so will place our code somewhere bellow Post title.

We will use get_post_meta() WordPress and update_post_meta() functions.

<?php
/*
* We will use this place for our Custom Fileds
*/
// set defaults for our name and price should they be empty
$product_name_def = ‘Default name’;
$product_price_def = 0;
$product_name = get_post_meta($post->ID, ‘product_name’, true);
// check if the custom field has a value
if (empty ( $product_name )) {
$product_name = $product_name_def;
}
$product_price = get_post_meta($post->ID, ‘product_price’, true);
// check if the custom field has a value
if ( empty( $product_price ) ) {
$product_price = $product_price_def;
}
$vat = 1.2;
$product_price_vat = ($product_price * $vat);
$product_price_updated = update_post_meta($post->ID, ‘product_price_vat’, $product_price_vat);
if (is_user_logged_in()) {
echo ‘The price of <strong>’. $product_name .’</strong> is: <strong>$’. $product_price .’</strong>.’;
} else {
echo ‘The price of <strong>’. $product_name .’</strong> is: <strong>$’. $product_price_vat .’</strong>.’;
}
?>

Let’s revise the sample code above.
We use the get_post_meta($post_id, $key, $single); function.
where:
$post_id – The ID of the post from which you want the data. Use $post->ID to get a post’s ID.
$key – A string containing the name of the meta value you want.
$single – this is a boolean variable. When it’s set to true, it returns the value as a string. A custom field can have multiple values, in which case you would set this variable to false, returning an array instead.
And also we use update_post_meta($post_id, $meta_key, $meta_value);
where:
$post_id - The ID of the post from which you want the data. Use $post->ID to get a post’s ID.
$meta_key – is the key of the custom field you will edit.
$meta_value – is the new value of the custom field.
Using the is_user_logged_in() function creates a scenario for our sample where logged users of ours see the flat price of our product where regular visitors are only able to see the price with VAT added.

The Result

Logged user:

Regular user (non-logged):

And in our post editor you will notice that we have third custom filed product_price_vat added automatically from WordPress.

Conclusion

Custom fields are a powerful engine helping us to define extra data to our posts or custom post types. You can extend this scenario and use the standard post types available in your setup and add different field types: price, area (for real estates), dimensions (for some property), age (for user profiles) and so on. With further actions you can apply validation rules and assign them to your custom fields, operate with 3rd party APIs such as Google Maps or Real Estate catalogs – everything within your WordPress installation.

Review of WordPress Options Panels

Started as a blog platform, today WordPress is turned into a powerful CMS with great options for everyone to create and maintain his own bussiness or personal site. Every year and with every new vesrion we can find more and more useful features about WordPress. Also you are able to find a lot of free and premium themes to design your project and plugins to adjust its functinality, and why not to create your own theme or plugin.

To create a WordPress theme is not a high level astronaut job – you can learn how to do it in some simple steps. When you finish with the design and set your new theme you would like to give your users some options – this will help them to create unique look of their site and to avoid some features that they don’t really use to make their project faster and easier to use.
So today we will explore how to use popular theme options frameworks for our theme. This will help you to spend more time to the real theme creation and in the same time to add some interesting and helpful options with not so much coding.
First of all let’s take a look to some popular ways to create theme options:

1. Theme Options Plugin – this is a free and a really good plugin that offers you a lot of good features like color pickers and image radio buttons, it can be downloaded by the official WordPress repository and from the site of his author Devin Price. Also the author presents a demo theme to help you learn how to use the plugin, some additional educational examples and documentation – could be found on his site. After you download the plugin and take a look to the demo theme you need to copy the options.php in your theme and change the “options” array in accordance to your needs. Next step is to add the function in your function.php file to relate the options framework to your theme and you are ready to go. This framework offers a lot of different field types:

• textarea
• text
• checkbox
• select
• radio
• upload (an image uploader)
• images (use images instead of radio buttons)
• background (a set of options to define a background)
• multicheck
• color (a jquery color picker)
• typography (a set of options to define typography)
• editor

2. NHP Theme Options by Lee Mason is another choise for the theme creators. Of course it is based on the Setting API but it comes with a lot of field types and makes your job easier. The main point is that you have to define $NHP_Options global and then to use it’s get or show methods. NHP Theme Options includes build-in validation, great default settings and good documentation posted in GitHub that can help you a lot.

Dev options explanation:

3. ProPanel is paid (15$) but а good solution if you need customer support and a big selection of ready for you options, it has plug-and-play set up, a lot of training videos and a dashboard styling that is easy to your clients and can be changed with the default WordPress dashboard layouts. The principle  is similar – you need to create the code for your options page and to add the options array you need. The parameters are  explained in a good manner in the video tutorials, actualy you just need to look to the example and change them to what you need. Simple enough.

4. CheezCap – Cheezburger Custom Administration Panel is another library for creating a simple theme options – doesn’t offer such a big variety of the options field but it is easier and faster to use. It is not updated recently so you will have to check if is complatible with your WordPress version. On the other hand it is free and well documented in GitHub. How it works – you need to add the CheezCap folder to your theme, to require cheezcap.php in your functions.php file and then to create your options in cheezcap/config.php. The actual options creation is related to editing an array in function cap_get_options() where you need to create “Group” objects that accepts the following parameters: Name, ID, Options array (here are your actual options). Each Group will appear in different options tab in your theme and you need to add a relevant code in your theme file to tell them what is happening when some option is chosen.

5. Up Themes Framework is another popular solution and it will be a very good choise as it can provide image management with resize options, import/export of the created settings, Layout and SEO management, Color Scheme picker and more. Also there are a lot of working examples to help you understand the way it works.  It is free and available in GitHub. The way of work is similar – you need to add the framework folder to your theme and to require it in theme functions.php file. To make yout own options you need to create a page in theme options folder where to set your custom array for the new options. The authors have provided a guide for developers if you want to include the framework in your own theme.

How to chose Theme Options Framework:

1. The most of the presented frameworks are working in a similar way, there are differences of course but they are very well specified in the documentations. No matter which one you will choose you will have to learn more about code and Setting API to be able to work with them
2. The first thing you need to do before start adding options to your theme is to make a simple list what kind ot options do you need. This will make your choose more obvious – if you need specific type of fields you will pick the framework that offers that field or may be you have plans to create a lot of different themes – then your choice gonna be related to the solution that offers you import/ export options or you just want to have some simple and easy options – then it is better to use lighter and faster framework
3. Other good advice before you choose the best framework for your theme is to check if it is updated recently and is compatible with WordPress current version. Once you have made your choise it is time to implement the desired options. This can be done in a similar manner and of course depends by your choise. The main point is that you have the following steps: installing or adding the framework/plugin, include the options – in the most cases in function.php file of your theme. After that you just need to change the options to these you need by eddting the array of options and it’s parameters. The most of the frameworks have pretty good examples to help you understand the functions easier. This is a really brief summary because we are not looking to the specific framework but these are the main points you should follow.

Finally the Theme Options Frameworks are really useful tools that can help you develop interesting and popular WordPress theme. You will need to spend some time to learn how any of them is working but this is good investment because it will help to your clients and users to choose your theme and be happy using it. Also this will help you to work faster and create a lot more features with every theme. So take a look, try and choose the best solution that fits to your desires and needs and you will be really suprised how easy will be to create awesome new options for your themes.

Easy Digital Downloads Plugin Wordpress

Easy Digital Downloads is a plugin built specifically for selling digital products. It has been designed around the needs of those people selling digital products, rather than around the idea of physical products with digital as a side feature, as most ecommerce plugins are. The plugin is still relatively new but has already garnered a huge response from the WordPress community.

Since its release in April, Easy Digital Downloads has seen over 27,000 downloads on WordPress.org, a nearly perfect 5 star rating, and some very rapid development that is constantly enhancing the plugin even further.
Let’s look at some of the features of the plugin:
Shopping Cart
It may seem like common sense for an ecommerce plugin to include a shopping cart, but it’s actually pretty rare for purely digital sales to include a cart system. None of the other digital-goods focused ecommerce plugins include one, and nor do the industry giants like Theme Forest (The Mojo marketplaces do though ). The ability to purchase multiple products are once is huge.

Powerful Reporting
Easy Digital Downloads includes a reporting system that can show you earnings graphs for the current month, previous month, current quarter, last quarter, current year, last year, and any other custom date range. It also has reporting features that can show you your top grossing downloads, including their average monthly earnings / sales, and also a reporting system on customers. Want to find who your best customer is? Easy.

Lightweight
While still being very powerful, Easy Digital Downloads is also very lightweight. Rather than impose its own unique styling to your store pages (as most ecommerce plugins do), Easy Digital Downloads lets your current theme dictate most of the styling, which makes a seamless integration much easier. This also means that EDD works with the vast majority of all WordPress themes without having drastic styling clashes.
Simple and Variable Download Pricing
The plugin includes the option to set a simple, single price for each download product as well as the option to enable Variable Prices, which give you the ability to create multiple prices the buyer can choose from. You can also dictate which files the buyer receives depending on which price they choose.

Extensive Documentation
Every aspect and more of the plugin has been documentated and the documentation is being improved every single week.
Highly Extendable
One of the aspects that makes Easy Digital Downloads truly powerful is how extendable it is. This means that add-on plugins can be written to further enhance the default functionality. There are currently over 50 extensions available and some of the highlights include:

• Affiliates Pro Integration for providing a complete affiliate tracking and management system inside your WordPress install.
• Software Licensing for generating and tracking license keys as well as serving automatic updates to WordPress products.
• Commissions for automatically tracking and paying out commissions to multiple users when products sale.
• Payment gateway for accepting credit card payments through PayPal Pro.
• EDD Social Links for adding social sharing icons to download pages.
• Mail Chimp integration for automatically signing up buyers to your Mail Chimp newsletters.
• Payment gateway for accepting credit cards through Authorize.net
• Pushover Notifications for getting sales and earnings reports pushed directly to your phone.
• PDF Invoices that let your buyers download PDF invoice receipts.
• Payment gateway for accepting credit card payments through Stripe.com.
• EDD Slider for showing a fully-responsive image slider on the product pages.
• Amazon S3 integration for delivering download files from your Amazon S3 CDN storage.

Download the Plugin.

WordPress Landing Page – Freebie!

While we were building out this site and getting our articles ready from our editors, we created a simple WordPress landing page. We gave it away for free then and we figured why not offer for free now that the new site is launched?

The freebie includes full source code of the landing page and also includes the design files (PNG’s) as well. You’ll also find a step by step guide on how we built the landing page just in case you need it.

Packaging WordPress Themes for Sale

Premium WordPress themes are the way to go, if one is serious about his Blog/website. What set’s Premium themes apart from others is the customer support, valid XHTML and CSS, more features and functionalities (like shortcodes, page templates, color schemes, easy customizability)  and its packaging. Packaging being an important factor, and for some the deciding factor.
So after developing the theme, one need to think about some questions like:

• Is the theme really ready to be released ?
• Will the theme zip include PSD (Photoshop file)
• Will it contain theme documentation, if yes, then in which format ?
• Will it contain any file for license
• Will it contain any readme file

ok, so let’s understand each point in detail.

Think and brainstorm. Is the theme really ready to be released ?
One advise worth taking. Don’t hurry. One can’t go far if the final product is buggy. So think again if you have done thorough testing, or if it still requires some more testing. It won’t hurt anyone if the product takes some more time to get released, but it will definitely hurt to release a buggy product and thereby harming hard earned reputation. So instead of hurrying, take some more time to test the theme, or hire some Beta testers, who know what they are doing. Sometimes as a developer, you may have much confidence over the product and may even think that it works perfectly, but still you may miss out something. Therefore, hire some people to test out the theme.

Do you want to include PSD file ?
Well, the final decision rests with the developer. There are some strategies and points to consider here. Some developers may even sell their PSD file differently, and some advertise as “PSD included in the theme”. Ofcourse, including PSD file will be an extra plus point for your theme. Those users who know Photoshop, may want to delve in changing colors, icons and images and see how it looks like, and if satisfied then they can apply the same changes in the theme through coding.

Theme Documentation:
Some developers/theme companies include the theme documentation in the package. In most cases, its in PDF format. Some may even have special member’s area, for which user’s who have purchased the theme need to login first and then view the theme documentation. Providing members with some special tutorials, how-to’s and guides can even encourage users to purchase the theme, and thereby succeeds in eradicating piracy of the theme and downloading from illegal sources (to some extent).

License and readme file:
If you’ve come this far, then most probably you must have decided which license to adopt, and if you’ve not yet  decided then now is the time to do so. Decide if you want the theme to be GPL, split GPL (like thesis), or non GPL. Some theme Premium theme companies have adopted GPL license which complies with WordPress, however some may even present a twist, that only PHP is GPL, and images, CSS and artworks are proprietary. So its really important to know what you are doing. It would also benefit others to include a readme file for the license, so that user’s who don’t take the time to read about licensing terms can read this file and understand it. If interested then also read this article on understanding copyright and licenses.

Let’s clean up the theme:
Clean up the code. Remove unnecessary files which are no longer required. Be sure to check each and every folder for any unused file, as that may add up to the size of the theme’s zip. Also remove any SVN files and cache files (when using Time thumb script, it creates temporary files in cache folder). These are small things but somehow get skipped and really looks unprofessional if found in the theme. So be sure to clean up the code.

The final checking:
Last but not least, after spending all that countless hours on developing the theme, you don’t want to mess up anything, agree?. Therefore, do a final check. It would also help if you have made a checklist, which would state what to check when launching a theme. It shouldn’t be a long checklist, but just a short one, with check marks and points, so that you can just check mark the points which are completed, somewhat like to-do lists with check boxes.
Finally, its YOU, who needs to decide which way to go, what to bundle, and what not, and which strategy to adopt. Now that you are armed with all the information, go ahead and zip that folder (don’t use RAR).
That’s done. The package is ready to be delivered. In the end quality matters, not quantity. Bug free coding can improve the sales, while a theme with many bugs can hurt the reputation (which isn’t good for long run).
[author id="saqib"]

The Ultimate Guide to Selling Premium WordPress Themes

Hello and welcome to this advanced tutorial that is aimed at one main thing, how to sell WordPress Themes. In this tutorial I will cover various topics such as testing, presentation, previews, documentation, promoting and lots more! So sit back and enjoy the ride, as by the end of this, hopefully you will learn a few key lessons in gaining those extra sales!
So, you’ve just finished writing your last piece of code, and you tell yourself “I want to sell this, now!”. However there are a few things you must do before even getting to the upload stage, which we shall go through now.

Compatibility

Before you do anything else, top of your priority should always be Compatibility. Here’s a list of what you should test:

• Browsers
• Resolutions (Screen Sizes)
• Web Fonts
• Theme Check

Let’s elaborate on these four crucial key testing ideas.

Browsers

You should always download all of the main browsers onto your computer. Then simply open up your theme in each and every one. Make sure that everything is displayed the way it should and that everything works the way it should, even if the tiniest detail such as a font has rendered differently then you should always change either the font or the specific styling for that browser. This will make your theme more professional if everyone sees the same as everyone else.

Resolutions

Believe it or not, websites do indeed display differently to your screen size. Make sure you have a wrapper around all of your content so that it stays in the same position. A good way to do this would be to create a div that would start just after your <body> tag and end just before your </body> tag. So for example:

<body>

<div id="wrapper">

</div>

</body>

Then in your css code, you would want to display this code so that all of your content is displayed in the center at all times, whatever the screen size.

#wrapper {

width:960px; /*Or whatever the width you want your website to be*/

margin:auto;

}

That’s just one of the many ways to make sure that your website displays it’s layout properly in different screen sizes. A good way to test this would be to either jump onto another computer with a different screen size, ask a friend with a different screen size to view your website, or simply drag the browser window narrower to create a smaller viewing area.

Web Fonts

Be sure that all of your fonts that you have used are either web safe or have come from a system such as Google Fonts or Cufón. The Main reason for this is because many people believe that one can use whatever font they like when creating a website. However the average user will not install extra fonts in their spare time. Therefore they will not have the same font needed to view the website in a substansially better experience. That’s where web safe fonts come into it. These are fonts that work on nearly all systems, Mac, Windows, Linux etc… You can find a full list of web safe fonts here.
Alternatively if you want a more exciting experience you can use Google Fonts and Cufón as mentioned above, which transform your desired font into a web font.
Futhermore check that in every browser and other computers (if you can) that your desired fonts render exactly the same as they should. For example in Firefox the Yanone Kaffeesatz font renders brilliantly, whereas in Google Chrome, it is seen as more thin and does not look as great.

Theme Check

Now, Theme Check is an absolutely brilliant plugin for WordPress that I would recommend every WordPress Web Designer to use. Once you have activated it, you can go to it’s panel and run literally a theme check on your theme. Once the test has finished it will come up with advice to improve your theme, what your theme is missing and also friendly warnings that may come of use. It is constantly updated, so every now and then you can just run a theme check and see what you need and what you can improve on. You can download the plugin here at the WordPress Plugin library.

Documentation

Next is to create your help file/documentation for your theme. These files should be in PDF Format so that nearly all Operating Systems can view the file. You should include in your documentation an FAQ (Frequently Asked Questions), A detailed tutorial of extracting and installing the theme onto a server and eventually activating it in the WordPress Admin Panel, An explanation of your menus and where they are in your theme, An explanation of your widgets and where they are displayed in your theme, An explanation of your shortcodes and what they output, An explanation of your theme options (if you have one) and finally an explanation of all the extra features you may have included in your theme.

Remember a detailed documentation will increase your chances of being approved and will also tell your customers that you are professional and don’t mess around. This may get your customers to buy even more of your products!

Live Preview

Now you should think about presenting your theme to customers who will want to see a preview of your theme. It is Compulsory that you include a live preview now-a-days. Customers want to see what it will look like for real, they want to see the real deal and how it works. So the best possible way to do this is to create a simple url such as
http://www.mysite.com/previews/wordpress/mythemename
and to upload the latest WordPress and to simply install your theme, and you are done!
Obviously if your theme comes with lots of different design options you should include one of the many jQuery plugins out there that act as a small options panel for customers on the demo screen. It could be a background colour option change or even a layout change. Get creative, make your customers see everything that’s in store for them when they buy your theme, after all it is a demonstration of your theme!
Here’s a list of themes that do this very well;

• Creole – A Professional WordPress Theme
• Solidity – Business, Magazine and Blog Theme
• Quasar – A Premium Theme for WordPress
• Essence WordPress Theme

Preview Images/Screenshots

After that you want to start creating your screenshots.zip for the uploading process. This is a zip file full of screenshots of every single page that you can possibly have with your theme. This will also act as a preview much like the live demo. Many people would think the easiest and best way would be to print screen and cut off some bits in photoshop. However that is probably the most time consuming and annoying process of doing this. I have recently found an amazing addon for Firefox, Google Chrome and Safari that lets you take a picture of the whole website even if some of it’s not in the view port. It will take a picture of everything on the website, and it wont show you anything else, none of the browser window or desktop, just the website! This addon is called Awesome Screenshot and you can find out more and download it here.
Once you have finished taking screenshots with your flashy new addon. You need to start creating thumbnails and a featured image for the upload process.

Thumbnail (130 x 78)

This is the wide thumbnail image that represents your screen. Now it has been seen many times before that it’s traditional to include the logo and the WordPress version, usually it also contains a snazzy background.
Here’s an example:

Small Thumbnail ( 69 x 69)

This is very similar to the larger thumbnail above, it’s also traditional to display the version of wordpress and of course the name/logo of your theme, as always another snazzy background.
Here’s an example:

Featured Preview Image ( 590 x 330)

Now this is the big featured image that is displayed on the item page. It is often seen with a list of features that are included in your theme, secondly it is also usually situated with a preview of the theme and the logo. Make sure that this has the same colours and design as your theme as this could confuse your visitors.
Here’s an example:

Theme Description

This is the crucial part in representing your theme, it’s your chance to speak good words about your theme, trying to promote it as well as you can. The only problem about this part is that not everyone will read your description, however the people who do, will expect a good description.
Therefore you need to work really hard to think of a decent description, use imaginative words, get creative. Don’t just leave one line with your slogan for the theme, this would show that you are unprofessional, and didn’t put much effort into it. Below there are some code snippets that could be used in your item description, remember get creative, and don’t be afraid to experiment!

Heading and Version Number

<div class=”classic-intro clearfix”>

<h3>Theme Name Introduction</h3>

<p>Current Version: 1.3</p>

</div>

<p>Introducing… The number item name in the World Wide Web!  This is your time to shine. You need to remember how crucial this part  of the sales process is. Since we understand this, we have set out to  create pre-made templates for our sellers to utilize to make their items  shine! Do your best to not hold back on every feature you can think  of.</p>

Lists

<ul>
<li>30+ Shortcodes</li>
<li>Shortcode Generator (<a href="#">View Screenshot</a>)</li>
<li>Nivo Slider</li>
<li>jQuery Slider</li>
<li>4 Custom Widgets</li>
<ul>
<li>Testimonials</li>
<li>Twitter Stream</li>
<li>Newsletter Signup integrated with FeedBurner</li>
<li>Flickr Photostream</li>
</ul>
<li>7 Page Templates</li>
<li>Custom Post Type used for Featured Slider</li>
<li>Layered PSD included</li>
<li>Compliant in all major browsers</li>
<li>Includes complete setup guide + documentation file!</li>
</ul>

Large Images

<h3>A Closer Look Under the Hood…</h3>
<p>We notice quite a few potential buyers wanting to get a better  idea of how much control they’ll have over the theme. If you can take  some extra time to come up with some nice graphics or screenshots of the  themes flexibility or even the options panel it will go a long  way.</p>

<!– Title Top & Image Below –>

<section>

<h4>Powered by the MOJO + Themify Framework</h4>

<img src=”…” width=”415″ height=”259″ alt=”" title=”MOJO + Themify” />

</section>

Section with Image on the left and text on the right

<section class=”classic-left-image-bg shadow”>

<section class=”clearfix”>

<div class=”classic-left-image”>

<img src=”…” width=”218″ height=”138″ alt=”" title=”Style Changer” />

</div>

<div class=”classic-right-text”>

<h3>Easy Styling + Control</h3>

<p>Just click, select & hit save.<br />				We’ll handle all the CSS coding for you.</p>

</div>

</section>

</section>

Section with Text on the left and Image on the right

<section class=”classic-right-image-bg shadow”>

<section class=”clearfix”>

<div class=”classic-right-image”>

<img src=”…” width=”218″ height=”138″ alt=”" title=”Control Background Images” />

</div>

<div class=”classic-left-text”>

<h3>Controllable Image Library</h3>

<p>All images you upload are stored in<br />				the library for you to preview.</p>

</div>

</section>

</section>

Changelog

It is also a good idea to include a changelog so that customers know which version they are currently on and if there have been updates so that they can re-download the theme with an updated version. It could look something like this:

DATE
- Update 1 Released
  - Includes
    - Feature 1
    - Feature 2

DATE
- Initial Release.

You can find the whole lot of code for a unique description here.

Promotion

So, you’ve now uploaded your theme and it’s been approved by the mojo masters. But you want people to know about your new release, you want to spread the word in as many possible ways.

Twitter

Without a doubt Twitter is a great source for spreading the word, remember to include the link to your mojo item and to include a few hashtags such as
#release #mojo-themes #new #theme #wordpress
try to make it as SEO advanced as possible.

Hello Bar

If you’ve got your own WordPress blog, then why not install a nifty plugin called “Hello Bar”. It may still be in Beta at the time of you reading this, however I simply signed up and once following the instructions I finally got my own Hello Bar plugin installed on my WordPress Install for free! It’s incredibly simple and it sits nicely at the top of your website with a small sentence of what you want it to say. You can include links and even change the colour of the text and the bar!
Here’s what they look like:

You can view this live at my blog here. (If it’s activated.)
You can sign up to this wonderful plugin’s beta right here.

Conclusion

So now you’ve done everything you can to rack in those sales, sit back and enjoy the money coming in.
Thanks for reading my first guide/tutorial here at WPRoots, please feel free to comment below!

Advanced WordPress Widgets

Custom widgets are fantastic additions to all WordPress themes and plugins, and they are relatively easy to create, once you have the no how. This tutorial will walk you through the steps needed to create just about any kind of widget. I will show you how to create different option fields, how to save widget options, how to use options to control the output of your widget, and, at the end, I will give you the complete code to an advanced Blog Authors Widget.

The Widget Class

There are several ways to set up a widget, but by far the best method is to use a CLASS structure. By creating a PHP class for our widget, it makes it very easy to create as many widgets as you wish, without having to worry about conflicting function names. You can simply duplicate the code from your first widget, rename the class, and you’re done! So we are going to use a class for our example widget, and it starts like this:

/**
 * Example Widget Class
 */
	class pippin_example_widget extends WP_Widget {
		// all of our widget code will go here
	}

You can name the class anything you want, but I would advise you to be meaningful in your naming convention. “My Awesome Widget” really doesn’t tell you anything, even though it probably is awesome. I always go for names that explain the widget’s function, such as “blog_authors_widget”. It is also a good practice to always prefix your class names, just as you should prefix your function names. This is to help avoid the possibility of conflicts with other developer’s functions or class names. So our example widget class name is “pippin_example_widget”.

The Widget Functions

Now that we have our widget class, we will begin filling it with the various functions we need to construct our widget. There will be four functions total:

• pippin_example_widget()
• widget()
• update()
• form()

Notice that I have not prefixed these function names. This is because each of these functions lives within our widget class and thus do not need unique names or prefixes.

The Constructor Function

The first function we will write is pippin_example_widget(), and yes, it should be named the same as your widget class. This is a very simple, short function that constructs our widget and gives it a name.

/** constructor */
    function pippin_example_widget() {
        parent::WP_Widget(false, $name = 'Example Widget');
    }

The only thing you should ever need to change with this function is the $name variable. This variable determines the name that appears on the widget in the admin widgets panel.

The Widget Output

Next comes the function that controls the widget’s output to the front end of the site. This function can contain just about anything you want, including HTML, CSS, jQuery, PHP, and more. Because this function does not have many set constraints on what you can do with it, I’m just going to show you examples of how you can use it.
First of all, our base function is going to look something like this:

/** @see WP_Widget::widget */
    function widget($args, $instance) {
        extract( $args );

	// these are our widget options
    $title = apply_filters('widget_title', $instance['title']);
	$text = $instance['text'];
	$checkbox = $instance['checkbox'];
	$textarea = $instance['textarea'];
	$select = $instance['select'];

    echo $before_widget;

	if ( $title ) {
	echo $before_title . $title . $after_title;
	}
         echo $after_widget;
    }

There are several important things going on here. First of all, the two parameters passed to the function are used to retrieve the saved options that we have set on the widget panel (don’t worry, we haven’t actually gotten there yet). These two parameters should never change, and nor should the extract($args) function call just after the opening }.
The next couple lines are the widget options. The options are all stored in the $instance parameter, which is an array, so I have set up a unique variable name for each option.

• $title – This is the main widget title
• $text – This is our sample text input field
• $checkbox – This is our sample checkbox field
• $textarea – This is our sample textarea field
• $select – This is our sample select menu

Note that these options don’t actually work just yet, but we will set them up in a moment. For now just prepend that we’ve already taken care of them

The widget() function above as it is will do nothing more than display the widget title, so we are going to want to make it a little more advanced. I said earlier that you can do just about anything with this function that you want. That’s because it is the function that controls the output of our widget on the front end of the site. We are going to use our option (defined a moment ago) to control the exact output of the widget

/** @see WP_Widget::widget */
	function widget($args, $instance) {
	    extract( $args );

	// these are our widget options
	    $title = apply_filters('widget_title', $instance['title']);
	$text = $instance['text'];
	$checkbox = $instance['checkbox'];
	$textarea = $instance['textarea'];
	$select = $instance['select'];

    echo $before_widget;

	// if the title is set
	if ( $title ) {
	echo $before_title . $title . $after_title;
	}

	// if the text field is set
	if ( $text ) {
	echo '
<div class="widget-text">' . $text . '</div>
';
	}

	// if the checkbox is checked
	if ( $checkbox == true ) {
	echo '

This message is displayed if our checkbox is checked.

';
	}

	// if text is entered in the textarea
	if ( $textarea ) {
	echo '
<div class="widget-textarea">' . $textarea . '</div>
';
	}

	// output text depended on which option is picked
	if ( $select == 'one' ) {
	echo '

Option One is Selected

';
	} else if ( $select == 'two' ) {
	echo '

Option Two is Selected

';
	} else {
	echo '

Option Three is Selected

';
	}
         echo $after_widget;
	}

What I have done is use the option values to control what is displayed. For example, I checked to see if the CHECKBOX field was checked (or had a value of TRUE), and if it was, display a message. I also displayed a different message for each SELECT menu option. These are all really, really simple examples but they convey a very important point: by utilizing your widget options (and a little bit of syntax) you can display anything you want inside of a widget.
While I have left the output to nothing more than simple text messages, you can just as easily use the options to control a post query, just as I did with my Better Recent Posts Widget.

Saving the Widget Options

The next function in our widget class is the update() function. This one does nothing more than save the options chosen from the widgets panel. It’s a very simple function.

/** @see WP_Widget::update */
    function update($new_instance, $old_instance) {
	$instance = $old_instance;
	$instance['title'] = strip_tags($new_instance['title']);
	$instance['text'] = strip_tags($new_instance['text']);
	$instance['checkbox'] = strip_tags($new_instance['checkbox']);
	$instance['textarea'] = strip_tags($new_instance['textarea']);
	$instance['select'] = strip_tags($new_instance['select']);
    return $instance;
    }

Remember how I told you that the widget options were stored in an array variable called $instance? Well, this function takes two parameters, $old_instance which contains all the option values already saved, and $new_instance which contains all of the options that we have just updated. the function does nothing more than take the old instance and set each value in the array equal to the appropriate value in the new instance, thus saving our options
It is important to note that each of the instance variables matches those of the widget() function above. If your variable names do not match, your options will not save correctly.
There is only one more function to write, and that is the one that displays the widget options form in the widgets panel in the WordPress admin.

The Widget Options Form

Once again, there is nothing really special about this function, it simply outputs an HTML form with a field for each of our options. Let’s see the function, then I’ll explain parts of it.

 /** @see WP_Widget::form */
function form($instance) {	

    $title = esc_attr($instance['title']);
	$text = esc_attr($instance['text']);
	$checkbox = esc_attr($instance['checkbox']);
	$textarea = esc_attr($instance['textarea']);
	$select = esc_attr($instance['select']);

    ?>

	 <p>
      	<label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Widget Title'); ?></label>
      	<input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" />
    </p>

     <p>
      	<label for="<?php echo $this->get_field_id('text_field'); ?>"><?php _e('This is a single line text field:'); ?></label>
      	<input class="widefat" id="<?php echo $this->get_field_id('text_field'); ?>" name="<?php echo $this->get_field_name('text_field'); ?>" type="text" value="<?php echo $text_field; ?>" />
    </p>

	<p><
      	<input id="<?php echo $this->get_field_id('checkbox'); ?>" name="<?php echo $this->get_field_name('checkbox'); ?>" type="checkbox" value="1" <?php checked( '1', $checkbox ); ?>/>
    	<label for="<?php echo $this->get_field_id('checkbox'); ?>"><?php _e('This is a checkbox'); ?></label>
    </p>

	<p>
    	<label for="<?php echo $this->get_field_id('textarea'); ?>"><?php _e('This is a textarea:'); ?></label>
    	<textarea class="widefat" id="<?php echo $this->get_field_id('textarea'); ?>" name="<?php echo $this->get_field_name('textarea'); ?>"><?php echo $textarea; ?></textarea>
    </p>

	<p>
		<label for="<?php echo $this->get_field_id('select'); ?>"><?php _e('This is a select menu'); ?></label>
		<select name="<?php echo $this->get_field_name('select'); ?>" id="<?php echo $this->get_field_id('select'); ?>" class="widefat">
			<?php
			$options = array('one', 'two', 'three');
			foreach ($options as $option) {
				echo '<option value="' . $option . '" id="' . $option . '"', $select == $option ? ' selected="selected"' : '', '>', $option, '</option>';
			}
			?>
		</select>
	</p>

    <?php
}

This function takes one $instance parameter, which allows our HTML form to read the saved options. The HTML form in this function is very straight forward, so if you have questions about it, please ask in the comments. I would like to explain how we connect each FORM field with its corresponding option, and how we ensure that the value entered (or selected) in each field is saved correctly.
There are several key functions used inside of this form() function:

• $title – This is the main widget title
• $text – This is our sample text input field
• $checkbox – This is our sample checkbox field
• $textarea – This is our sample textarea field
• $select – This is our sample select menu

The first and second of these functions must match the option names at the top of this form() function, and also those of the option names used in the other functions. So, for example, for the TITLE option, we use $this->get_field_id(‘title’) and $this->get_field_name(‘title’). If these values do not match those of the other functions, your options will not save.
The only other part to the options form that might be a little confusing is the way that the SELECT field is set up. After we’ve done the normal field name and ID stuff, as described a moment ago, we use a FOREACH loop to display the options available in this SELECT menu. We use the foreach loop because we need to have a way of making the saved option as the selected option when we load the page, and because it is much more efficient than simply writing out each option. In order to mark the correct option as selected when the page loads, we use the conditional that looks like this:

foreach ($options as $option) {
	echo '<option value="' . $option . '" id="' . $option . '"', $select == $option ? ' selected="selected"' : '', '<', $option, '</option<';
}

This essentially says: display the option value and id, and if it matches the value of the option saved in the database (remember our $instance variable), include the selected=”selected” attribute.
And that’s it for our widget options form. This also marks the end of our widget class, which means that there is only one more step before our widget is available to use in WordPress.

Activating the Widget

Our widget is built, it’s options can be saved, and all we need to do is turn it on. To do that, we use the add_action() function to hook our widget into WordPress.

// register example widget
	add_action('widgets_init', create_function('', 'return register_widget("pippin_example_widget");'));

This hook will register our widget and make it available for use. Note that the parameter passed to the register_widget() function inside of the hook is the same as our widget class name. If you use a different value than the name of your widget class, the widget will not work.
That’s everything! Keep reading below to see the complete code for an actually useful widget that you can use to display your blog authors.

Simple Blog Authors Widget

To help provide “real world” sense to this tutorial, I’m providing the code for a complete widget that will provide a simple widget that can be used to list your blog authors. The widget includes options for:

• Widget Title
• Author Gravatars
• Author Post Counts

I’m not going to explain the code, as hopefully I’ve done that well enough above. If you want, simply copy the code below into your functions.php, or go to Pippin’s Plugins and download the complete widget as a plugin for free.
The widget code:

/**
 * Authors Widget Class
 */
class pippin_simple_authors_widget extends WP_Widget {

    /** constructor */
    function pippin_simple_authors_widget() {
        parent::WP_Widget(false, $name = 'Simple Authors Widget');
    }

    /** @see WP_Widget::widget */
    function widget($args, $instance) {
        extract( $args );
		global $wpdb;

        $title = apply_filters('widget_title', $instance['title']);
		$gravatar = $instance['gravatar'];
		$count = $instance['count'];

		if(!$size)
			$size = 40;

        ?>
              <?php echo $before_widget; ?>
                  <?php if ( $title )
                        echo $before_title . $title . $after_title; ?>
							<ul>
							<?php

								$authors = $wpdb->get_results("SELECT ID FROM $wpdb->users ORDER BY ID");

								foreach($authors as $author) {

									$author_info = get_userdata($author->ID);

									echo '<li>';

										echo '<div style="float: left; margin-left: 5px;">';

										echo get_avatar($author->ID, 40);

										echo '</div>';

										echo '<a href="' . get_author_posts_url($author->ID) .'" title="View author archive">';
											echo $author_info->display_name;
											if($count) {
												echo '(' . count_user_posts($author->ID) . ')';
											}
										echo '</a>';

									echo '</li>';
								}
							?>
							</ul>
              <?php echo $after_widget; ?>
        <?php
    }

    /** @see WP_Widget::update */
    function update($new_instance, $old_instance) {
		$instance = $old_instance;
		$instance['title'] = strip_tags($new_instance['title']);
		$instance['gravatar'] = strip_tags($new_instance['gravatar']);
		$instance['count'] = strip_tags($new_instance['count']);
        return $instance;
    }

    /** @see WP_Widget::form */
    function form($instance) {	

        $title = esc_attr($instance['title']);
		$gravatar = esc_attr($instance['gravatar']);
		$count = esc_attr($instance['count']);

        ?>
         <p>
          <label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?></label>
          <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" />
        </p>

		<p>
          <input id="<?php echo $this->get_field_id('count'); ?>" name="<?php echo $this->get_field_name('count'); ?>" type="checkbox" value="1" <?php checked( '1', $count ); ?>/>
          <label for="<?php echo $this->get_field_id('count'); ?>"><?php _e('Display Post Count?'); ?></label>
        </p>

		<p>
          <input id="<?php echo $this->get_field_id('gravatar'); ?>" name="<?php echo $this->get_field_name('gravatar'); ?>" type="checkbox" value="1" <?php checked( '1', $gravatar ); ?>/>
          <label for="<?php echo $this->get_field_id('gravatar'); ?>"><?php _e('Display Author Gravatar?'); ?></label>
        </p>

        <?php
    }

} // class utopian_recent_posts
add_action('widgets_init', create_function('', 'return register_widget("pippin_simple_authors_widget");'));

Once again, you can download the complete Simple Authors Widget plugin from Pippin’s Plugins.com. Enjoy!