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.

Note: You can also buy Easy Digital Downloads plugins on Mojo-Code

We have plans to launch many more tutorials here on WP Roots related to working with WordPress code and scripts which should hopefully help you better understand the Mojo-Code marketplace.

Mojo-Code launched with 17 WordPress plugins and we are seeing many uploads everyday so be sure to check it out!

With the launch of the new marketplace, we have added some new features that are specific to selling code such as video demos, integration time and steps just to name a few. Let us know your thoughts about the new code marketplace.

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.

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.

Feel free to download and use on all your awesome themes and items!

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.

Bootstrap from Twitter

12-column grid with fixed and fluid width layouts

Skeleton

960px grid system

Columnal

1140px fluid width system

1140 CSS Grid

12 column fluid system that starts at 1280px

Gumby Framework

960px grid with fluid or fixed layouts

Foundation 3

12 column fluid system

The above list is by no means comprehensive although I have personally used many of these options and would recommend them for your next WordPress theme. Feel free to take a look at these options and let me know what you prefer to use for your themes.

Need inspiration: Take a look at some of these amazing responsive WordPress themes.

Feel free to download and use on all your awesome themes and items!

Imagine you are writing a plugin that has upwards of 10,000 lines of code; which do you think is easier to enhance and debug, a plugin that has the 10,000 lines separated into meaningfully named files and folders, or a plugin that has all 10,000 lines in a single file? If you have answered with a single file, then I’d highly advise you to think about it a little longer, or challenge yourself to go write a very large plugin, and do it all in one file. You will quickly find that it’s highly disadvantageous.

I would like to discuss and share several aspects of my personal development strategy. Some of these are simply things that should be done because WordPress Coding Standards dictates that we should (with good reason), and some of them are strategies that I have simply found to be extremely helpful in development.

Use a Unique Prefix for Everything

This is one of the first rules of development, and it should never, ever be broken. When you write your plugin, everything absolutely must receive a unique prefix specific to your plugin. This includes function names, class names, global variables, option names, database tables and more.

The primary reason for always, without exception, using prefixes is that it prevents conflicts. If two plugins (or themes) use the same name for a function, and both are active at the same time, they will cause a fatal error, since all function names must be unique.

For example, you might have a function in your plugin like this:

load_plugin_scripts() {
    // script loading happens here
}

But this is a terrible name, because if any theme or other plugins also has a function named load_plugin_scripts, a fatal error will be thrown. Let’s imagine for a moment that your plugin is named “Load Posts with Ajax”. I usually create my prefixes by taking the first letter of each word in the plugin’s title, so our prefix will be “lpa_”, or “lpwa_”, which means our function should be this instead:

lpa_load_plugin_scripts() {
    // script loading happens here
}

Define Constants for File Paths and URLs

This mostly applies to large plugins, but can be useful with smaller ones as well. The absolute path to your plugin’s folder can be used for including extra plugin files, loading templates, and a few other things. I usually define a constant with the path to the plugin’s directory like this:

// plugin folder path
if(!defined('LPA_PLUGIN_DIR')) {
	define('LPA_PLUGIN_DIR', plugin_dir_path( __FILE__ ));
}

Remember that “LPA_” is the prefix we created for our plugin above.

It is also a good idea to define a constant for the plugin directory’s URL. This will be used for loading assets, like images, CSS files and Javascript files.

// plugin folder path
// plugin folder url
if(!defined('LPA_PLUGIN_URL')) {
	define('LPA_PLUGIN_URL', plugin_dir_url( __FILE__ ));
}

While these constants are not entirely necessary, they do make things easier in the long run. Instead of figuring out the file path or URL every time you need it, you simply call the constant. In large plugins this can save a lot of time.

Organize Your Plugin Into Multiple Files

When you are working with a plugin that has a large amount of code, then separating it into multiple files is one of the best things you can do. You should separate your code into “blocks” that are organized based on what they do. For example, all of your short code definitions should go into a file called “shortcodes.php” (or similar). All of your code that relates to loading CSS or jQuery should go into a file named perhaps “scripts.php”.

By separating your code into “blocks” that are each placed into meaningfully named files, you make your job as the developer much easier on yourself. It is suddenly dramatically easier to locate the code you’re looking for, especially when debugging errors. When you want to enhance the functionality of your plugin, perhaps by adding another short code, you immediately know where the new code should go: shortcodes.php.

With smaller plugins, this is not always the case, however. A small plugin with just 100 lines of code could easily be all placed into a single file and still be very manageable, but even in this case, I would still advise you to separate it into multiple files. The main reason for doing this is that it opens the door to further development and expansion. It is a lot easier to organize your plugin early on when there is only a small amount of code than it is to reorganize later once you have thousands of lines.

Once your plugin is separated into multiple files, you will pull the files into the main plugin file like this:

include_once( LPA_PLUGIN_DIR . 'includes/shortcodes.php' );

Note that I advise you place all of your extra files into sub directories as well. I usually place my files into a folder called “includes” (because these are included into the main file), and this directory will often have sub directories within it as well.

My plugin folder structure usually looks something like this:

• my_plugin_folder_name
  • includes
    • admin-pages
    • templates
  • js
  • css
  • images

Format Your Code

There is very little more frustrating to a developer than opening some one else’s code and finding that it is a formatting nightmare. Messy code is usually bad code. A very simple way that you can dramatically help yourself in your development, and help anyone that works with your code, is by taking the time to format your code nicely and consistently.

Code should have even indention (I prefer tabs, not spaces) and consistent line breaks. When a chunk of code is nested inside of conditional or switch (or other) statements, it should be indented. Take this bad code for example:

if( $conditional ) {
do_action('some_action_here');
execute_some_function();
}

While there are only two lines inside of the conditional, this is still much harder to read and follow than a block that is properly indented:

if( $conditional ) {
	do_action('some_action_here');
	execute_some_function();
}

Just imagine how hard it is to read a plugin that has 100s or 1000s of lines of code that isn’t properly indented. It becomes a debugging nightmare.

Do yourself and everyone else a favor: indent and format.

Do Not Reinvent the Wheel

There are a lot of APIs and methods built into WordPress that are designed to make your job as a developer easier, so utilize them and save yourself the trouble of building your own solution.

For plugin options, use the Settings API. This API can be a bit confusing to work with at first, but once you figure it out, it is really quite simple, and extremely powerful. Tom McFarlin wrote a phenomenal tutorial series on using the Settings API, if you are unsure about it then definitely check his series out.

For showing data in your plugin in a table format (like Posts and Pages), there is a class called WP_List_Table. This class will do all of the heavy lifting for you, including pagination, filtering, bulk actions, etc, all you have to (to start at least) is provide an array of data to populate the table with.

When creating custom admin screens, make sure of core WordPress CSS. There is absolutely no reason to write dozens (or hundreds) of lines of CSS to style your custom admin pages when, instead, you could use the core styles included with WordPress. There is a pretty decent guide to admin styles at One Extra Pixel.

There are many other general strategies that you can use during development, but these alone will help you tremendously if you choose to follow them.

This tutorial assumes you want all your theme search results being displayed in a table like your forums are structured.

Step 1:

Download and install the Search bbPress plugin. You can either search for the plugin from your WordPress dashboard or simply go here and download the plugin. Once you have installed the plugin go ahead and activate it. Nothing fancy or exciting will happen (that you can see ) but it’s working.

Step 2:

Go to your widget section under Appearance -> Widgets. Drag the default Search widget to the sidebar that you would like to display it in give it a title and that is it for step 2.

Step 3:

This step is where things could get a little tricky. Since bbPress forums are displayed using tables most likely the results look a little weird since your theme’s search.php doesn’t have the results being displayed in tables. If you think the results are just fine then you are good to go from here.

In my case, I wanted to have my results displayed in tables so I had to open the search.php and style.css files in my editor and make some changes.

Results in a table

First you need to find the loop in the page. The loop should look something like this:

<!--?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?-->

// Content inside the loop

<!--?php endwhile; else: ?-->

<!--?php _e('Sorry, no posts matched your criteria.'); ?-->

<!--?php endif; ?-->

Since we want each result to be inside a table row, we need to add the following inside our loop.

<tr>
	<td><a href="<?php the_permalink() ?>><?php the_title(); ?></a></td>

	<td><?php the_time('l jS F, Y - g:ia') ?></td>
</tr>

If you are not familiar with tables the tr stands for table row and the td stands for table data. So what this is doing is adding a row with the title and the time inside of the row. Now, we need to finish up the table information that will go outside the loop.

If there are results that are found, we want to display the table and give the table columns a headline. I am going to break up the loop and add a title to the results stating the results for what I searched for.

<?php if (have_posts()) : ?>

<h1><?php printf( __( 'Search Results for: %s' ), '<span>' . get_search_query() . '</span>' ); ?></h1>

<table>
	<thead>
		<tr>
			<th>Title</th>
			<th>Date</th>
		</tr>
	</thead>

	<tbody>

<?php while (have_posts()) : the_post(); ?>

<tr>
	<td><a href="<?php the_permalink() ?>><?php the_title(); ?></a></td>

	<td><?php the_time('l jS F, Y - g:ia') ?></td>
</tr>

<?php endwhile; ?>

<?php endif; ?>

	</tbody>

</table>

Now you should see your results being displayed just like your forum tables are displayed. Something I would recommend adding to your pages is a simple line of code to limit the number of results on your page.

<?php $posts=query_posts($query_string . '&posts_per_page=20'); ?>

You can change the 20 to the number of results you would like to display.

Here is the final code to display your search results.

<div class="search-results-wrap">

<?php $posts=query_posts($query_string . '&posts_per_page=20'); ?>

<?php if (have_posts()) : ?>

<h1><?php printf( __( 'Search Results for: %s' ), '<span>' . get_search_query() . '</span>' ); ?></h1>

<table>
	<thead>
		<tr>
			<th>Title</th>
			<th>Date</th>
		</tr>
	</thead>

	<tbody>

<?php while (have_posts()) : the_post(); ?>

<tr>
	<td><a href="<?php the_permalink() ?>><?php the_title(); ?></a></td>

	<td><?php the_time('l jS F, Y - g:ia') ?></td>
</tr>

<?php endwhile; ?>

<?php endif; ?>

	</tbody>

</table>

</div>

If you have other questions regarding how to display your forums or how to use bbPress shortcodes, see the following posts:

• How to setup and install bbPress forum
• bbPress Shortcodes

Step 1

First you will obviously need to create a metabox if you currently don’t have one. If you don’t have any meta boxes you can read our ultimate guide to meta boxes or on the codex.

Step 2

Secondly, there will be a callback in the add_meta_box function that you will need to locate. In my example, I am going to use an example callback function of media_uploader_box. Now that we have our callback function, lets begin to add some content and data to it.

We begin with a base function:

<?php function media_uploader_box(): global $post; ?>

<?php endif; ?>

Next if you want, you can add some css styling to your function. I will add a background color of #ccc.

<?php function media_uploader_box(): global $post; ?>

<style> .media-upload h2 { font-weight: bold; } </style>

<?php endif; ?>

Now it is time to add the necessary jQuery to call the media uploader popup.

<?php function media_uploader_box(): global $post; ?>

<style> .media-upload h2 { font-weight: bold; } </style>

<script>
( function( $ ) {

   $(document).ready(

       function()
       {
             $('#upload_image_button').click(
                 function()
                 {
                     tb_show('', 'media-upload.php?post_id=<?php  echo $post->ID; ?>&type=image&amp;TB_iframe=true');
                     return false;
                 }
             );
       }
   );

} ) ( jQuery );
</script>

<?php endif; ?>

There are some points to make note of in this example. First, notice that we are attaching the click function to the upload_image_button ID. So when that ID is clicked, it will call this jQuery. Next, if you look at the URL structure being used in the popup we are using the post_id. What this will do is attach the media unique to this post. In our case we wanted to upload images inside of a custom post type and only have those images be registered with those posts.

Note: If you are looking to just add a general media uploader which is not post specific then replace line 15 above with the following:

tb_show('', 'media-upload.php?type=image&TB_iframe=true');

Step 3

Third, we now need to create our html for the meta box and for our button.

<?php function media_uploader_box(): global $post; ?>

<style> .media-upload h2 { font-weight: bold; } </style>

<script>
( function( $ ) {

   $(document).ready(

       function()
       {
             $('#upload_image_button').click(
                 function()
                 {
                     tb_show('', 'media-upload.php?post_id=<?php  echo $post->ID; ?>&type=image&amp;TB_iframe=true');
                     return false;
                 }
             );
       }
   );

} ) ( jQuery );
</script>

<div class="media-upload">
    <h2>Upload Media</h2>
    <table>
       <tr valign="top">
          <td><input id="upload_image_button" type="button" value="Upload Media"></td>
       </tr>
    </table>
</div>

<?php endif; ?>

All that is going on here is that we are adding a title and table with a button. Simple stuff.

Step 4

The last step in the process is to make sure and include our necessary scripts to make the popup work. We are going to enqueue the given admin scripts from the core.

<?php function media_uploader_box(): global $post; ?>

<style> .media-upload h2 { font-weight: bold; } </style>

<script>
( function( $ ) {

   $(document).ready(

       function()
       {
             $('#upload_image_button').click(
                 function()
                 {
                     tb_show('', 'media-upload.php?post_id=<?php  echo $post->ID; ?>&type=image&amp;TB_iframe=true');
                     return false;
                 }
             );
       }
   );

} ) ( jQuery );
</script>

<div class="media-upload">
    <h2>Upload Media</h2>
    <table>
       <tr valign="top">
          <td><input id="upload_image_button" type="button" value="Upload Media"></td>
       </tr>
    </table>
</div>

<?php endif; ?>

function admin_scripts()
{
   wp_enqueue_script('media-upload');
   wp_enqueue_script('thickbox');
}

function admin_styles()
{
   wp_enqueue_style('thickbox');
}

add_action('admin_print_scripts', 'admin_scripts');
add_action('admin_print_styles', 'admin_styles');

?>

Thats it! Now if you are like most people and are looking to just quickly copy and paste the above code and expect it to work you might be sorely disappointed. The main point to reiterate is that you must name this function the same as your callback when you are adding the meta box. Again, if you are not sure what this means take a look at the add_meta_box function and how the callback works.

If you have any questions or comments please let me know below.