In this example I will show you how to add an image url into the theme and then display the image in the submitted post.

First things first we need to add a functions.php to the Nominate custom directory. You can read how to customise child themes (including Nominate) here. The reason for this, as opposed to modifying the built in functions.php, is that when it’s time to update the theme – you won’t lose your changes.

So once you have your custom functions.php, you can start adding code.

The following code will add custom fields to the submit post form. I have added comments that explain the different settings. If you’re familiar with WordPress custom theme functions it should be very obvious what is happening:

NOTE: You need to make sure this code is wrapped in php tags or it will not work.

function add_customSubmitFields ($fields) {

	// set properties of value to store. You can create as many of these as you like
	// name = the variable name (don't use spaces or punctuation besides _ or -)
	// label = the value to use on the submit post form
	$fields[] = array (
		'name' => 'test_image',
		'label' => 'Custom Image',
	);

	return $fields;

}

add_filter ('bm_submitFields', 'add_customSubmitFields');

Once you have added this you will have a working form. Couldn’t be simpler right? Next up, you need to display the content somehow. Since this is an image url I will display it if the value has been set. Again – there’s a lot of properties set that explains how things work:

NOTE: Be aware of data sanitization. You should always make sure user submitted data is cleaned up before it is used. In this case I am using WordPress built in function esc_url to make sure the image url is ok

function insert_customSubmitFields () {

	// get the image value using the custom variable mentioned before
	$image = bm_getSubmittedField ('test_image');

	// make sure the image is set so that I don't try to display something htat doesn't exist
	if (!empty ($image)) {
		// display image (use esc_url to make sure the url is safe!)
		echo '<img src="' . esc_url ($image) . '" />';
	}

}

add_action ('bm_contentAfter', 'insert_customSubmitFields');

To save you some time you can download the file created for this tutorial here.

Besides this Nominate has also had a number of bug fixes, and a couple of small speed improvements, so if you like the look of it now is a great time to grab a copy.

If there’s anything else to do with Pro Theme Design themes that you’d like to see video tutorials for then please do let me know in the comments and I’ll see what I can do.

Unfortunately I can’t control all themes, but for those I can control I have built in a simple system for adding your own stylesheets to child themes to allow you to edit things as you wish.

Create Your Own Custom Site Styles

If you have Nominate already then you can see this skinning system in place. If you open up the theme directory you will see there is a custom directory – this contains a series of css files with the name ‘skin_XXX.css’ – these are what show up in the admin panel under ‘Site Style’.

Below is a very quick tutorial explaining how to customise Nominate without editing the core theme files.

Creating a new Site Style is a very simple process.

1. Make sure that you have your theme up and running. In this case you will have installed Elemental and Nominate in the wp-content/themes directory
2. If it doesn’t exist already create a ‘custom’ directory in the theme folder. For Nominate this should already exist.
3. Create a new css file – give it any name you like but make sure to prefix it with ‘skin_‘
4. Now when you load the theme admin panel you will be able to select the site style under the Site Styles heading in the ‘Basic Blog Settings’ panel. The file will show up with the ‘site_’ and ‘.css’ part of the filename removed to make it look nice.
5. Once the style is selected you can edit the css file as much as you like and all changes will be applied to the theme.

It’s that simple! A basic Site Style will take you no more than 5 minutes to create, and you can have a custom design in no time.

This system will work with all Elemental based child themes, which (at the time of writing) means Elemental, The Local, and Nominate.

It takes just 5 lines of code, placed in your functions.php file, to change your homepage order.

function bm_alterCategoryOrder($settings) {
$settings['category'] = array(1,2,3);
return $settings;
}
add_filter('bm_categorySummaryDetails','bm_alterCategoryOrder');

All you have to do to set the different category orders is swap the 1,2,3 above for a comma separated list of category ids.

All this functionality is great so long as you, the developer, implement it in a way that is tough to break. Because once in the hands of the client, anything goes.

Then there is the issue of layout. For clients, moving content from one column to the other can be a technical hurdle, particularly for dynamic sites which rearrange content frequently to satisfy advertisers, audience demands, and so on. Default drag-and-drop widgets are a great part of our arsenal, but adding custom widgets can really make life simpler for both developer and client.

Example Custom Widgets

In the quest to give more control to end users, Pro Theme has been experimenting with more custom widgets. Check out the demo for themes like The Local and Elemental for examples.

Below are widgets we’ve started including with most themes, including Mimbo Pro:

• Google Adsense. In the control panel you enter your Adsense ID and the widgets display ads accordingly. Works in any of the standard block sizes.
• Community Tweets. Aggregates Twitter activity according to location latitude/longitude. Contains fields for Number of Tweets and Mile Radius.
• Latest Tweets. Contains fields for Username and Number of Tweets
• Post Author Details. Contains author avatar, date and comments feed.
• Upcoming Posts. Displays a list of future-dated posts.
• More from this Author. For single-post pages. Displays five headlines from the same author.
• More from this Category. For single-post pages. Displays five headlines from the same category.
• Print Preview. Uses javascript to render the page print-friendly and free of images.
• Share This. Lets you post the current page to Twitter, StumbleUpon, Digg, Delicious and Facebook.
• YouTube. Displays a featured video with fields for Embed Code and Description
• Map Your Location. A Google Maps widget with fields for Location, Zoom Amount and Type of Map View (Roadmap, Satellite or Terrain).
• Popular Posts. Displays five headlines of most-commented posts.
• Subscribe to Feed. Includes an RSS icon and feed link.

In the case of The Local, the entire homepage is 90% widgetized, with four columns to configure. We’ve gotten tons of great feedback from users who rely on positioning Google Adsense blocks and want to adjust their content accordingly. Not to mention writers in the hyperlocal space who write unique content, but also rely on aggregating from other sites and social media sources.

How Do Custom Widgets Work

At the simplest possible level, custom widgets are implemented by 1) creating a class, and 2) registering a new widget. Forget about functionality within the widget for a moment and look at the basic setup which you would paste inside functions.php:

class My_Widget extends WP_Widget {
	function My_Widget() {
		parent::WP_Widget(false, 'Our Test Widget');
	}

	function form($instance) {
		// outputs the options form on admin
	}

	function update($new_instance, $old_instance) {
		// processes widget options to be saved
		return $new_instance;
	}

	function widget($args, $instance) {
		// outputs the content of the widget
	}

}
register_widget('My_Widget');

That’s it. We can now visit our widgets panel to confirm:

Adding editable functionality into our widget is another story. Using the “Popular Posts” widget as an example, my partner Ben Gillbanks will walk us through creating the rest.

Creating a “Popular Posts” Widget

Firstly we have to name the widget class. I prefix my functions and classes with bm_ (Binary Moon) as it means there will never be any clashes with other functions and plugins. We can then name the widget in the constructor, which is the first function, and it should have the same name as the class. This will be called when the class is first created and it defines the name you see in the widget editor.

Next up, I create the last method which is a form function which defines what data can be editable within the widget. In this case, it’s simply the title of the widget to be displayed on the blog. The update method can often remain as it is, although you may want to do some data validation (make sure the data input is safe/ allowed).

Then finally, the widget method. This is where the widget itself is displayed. You’ll notice I am actually passing the arguments to another function that is elsewhere in the theme. The reason I do this is because I like to split the display out separately so that I can use the function directly in the theme without widgets as well.

Notice the $args parameter in the widget method. These args are actually the arguments you pass to the register sidebar method, before_widget, after_widget etc. You can read more about these and creating custom widgets on the WordPress Codex Widget API page.

Here is the final code:

<?php
class bm_widget_popularPosts extends WP_Widget {

	function bm_widget_popularPosts() {
		parent::WP_Widget(false, 'Popular Posts');
	}

	function widget($args, $instance) {
		$args['title'] = $instance['title'];
		bm_popularPosts($args);
	}

	function update($new_instance, $old_instance) {
		return $new_instance;
	}

	function form($instance) {
		$title = esc_attr($instance['title']);
?>
		<p><label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?> <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; ?>" /></label></p>
<?php
	}

}

function bm_popularPosts($args = array(), $displayComments = TRUE, $interval = '') {

	global $wpdb;

	$postCount = 5;

	$request = 'SELECT *
		FROM ' . $wpdb->posts . '
		WHERE ';

	if ($interval != '') {
		$request .= 'post_date>DATE_SUB(NOW(), ' . $interval . ') ';
	}

	$request .= 'post_status="publish"
			AND comment_count > 0
		ORDER BY comment_count DESC LIMIT 0, ' . $postCount;

	$posts = $wpdb->get_results($request);

	if (count($posts) >= 1) {

		if (!isset($args['title']) {
			$args['title'] = 'Popular Posts';
		}

		foreach ($posts as $post) {
			wp_cache_add($post->ID, $post, 'posts');
			$popularPosts[] = array(
				'title' => stripslashes($post->post_title),
				'url' => get_permalink($post->ID),
				'comment_count' => $post->comment_count,
			);
		}

		echo $args['before_widget'] . $args['before_title'] . $args['title'] . $args['after_title'];
?>

		<ol>
<?php
		foreach ($popularPosts as $post) {
?>
			<li>
				<a href="<?php echo $post['url'];?>"><?php echo $post['title']; ?></a>
<?php
			if ($displayComments) {
?>
			(<?php echo $post['comment_count'] . ' ' . __('comments', BM_THEMENAME); ?>)
<?php
			}
?>
			</li>
<?php
		}
?>
		</ol>

<?php
		echo $args['after_widget'];
	}
}
?>

Further Uses for Custom Widgets?

Clients frequently need special notifications and other dynamic bits to display on their site with minimal fuss. What other content that’s frequently handled via plugins would make a great custom widget?

By default Elemental (and it’s child themes such as The Local) come with a link to Pro Theme Design in the footer. Obviously we’d love it if you kept this in place, but it’s by no means a requirement at all.

If you open up footer.php in Elemental you will see that there is no reference to Pro Theme Design, however we’re not trying to hide the links, what we’re trying to do is make the theme as flexible as possible, and so you can easily edit the links using a child theme and a simple filter in your child themes functions.php file (more info on child themes here).

Swap the credit link for a “Powered by WordPress link”


function changeFooterLinks($footerLinks) {
$footerLinks[1] = 'Powered by <a href="http://wordpress.org">WordPress';
return $footerLinks;
}
add_filter('bm_footerContent', 'changeFooterLinks');


Remove the credit entirely


function changeFooterLinks($footerLinks) {
unset($footerLinks[1]);
return $footerLinks;
}
add_filter('bm_footerContent', 'changeFooterLinks');


Custom Skins

Custom Skins are the colour schemes you get with the theme. The default theme is blue but, from the control panel, you can also select a red or green scheme. We’ve had a number of people express interest in creating their own skins so here’s how.

1. Navigate to the wp-content/themes/mimboPro/skins folder on your server
2. Inside the skins directory create a new folder and give it the name of your new skin (note: _ and – get converted to spaces when listed in the control panel)
3. Inside your newly created folder add a file called styles.css – this will be your new skin.

To activate the skin simply go to the Mimbo Pro options page (Design -> Mimbo Pro Options) and select your new skin from the dropdown, then hit save. To give you a head-start I would suggest looking at the contents of the bundled skins as they will tell you all the properties to change to do a total colour conversion.

Why use skins?

The biggest reason to create a skin instead of modifying the core theme files is simple, future updates of Mimbo Pro (there have been 3 so far) will “just work”, you won’t need to go in and make all your changes again, the theme itself is untouched so you have nothing to worry about.

These non-destructive ideas are things I will be expanding upon in future themes, and the skins system will play a big part in it – so you might as well get used to it now

To test on your local computer requires a few things.

• A copy of WordPress – easy, grab one here
• A decent text editor – I like PsPad but you can use whatever you prefer
• A local webserver – this is the most complicated bit but is worth doing so read on to find out how.

Local Webserver (EasyPHP)

I should probably also point out that this post is a guide for getting set up to develop themes on a pc – sorry Mac and Linux users.

Download a webserver package. You want one that includes a server (normally Apache), and installers for both MySQL and PHP. There are many of these packages around but my fave is EasyPHP (although it hasn’t been updated in a while). Click here to download EasyPHP. If you have one you prefer then please do let me know in the comments.

As the name suggests it’s very easy to use EasyPHP. Just run as you would any other installer and it’s there. Now run the app (start->EasyPHP etc) and yourlocal copies of Apache and MySQL will be started up. You can now browse your brand new local webserver from the wonderfully titled url – http://localhost/

Once you have the package downloaded and installed you need to get WordPress up and running so open up your previously downloaded version and extract it to your new local directory (most likely c:\program files\easyphp\www\ ).

Before setting up WordPress we need to create a database. To do this open up the EasyPHP window and administration. This will take you to the admin panel on your localhost (probably – http://localhost/home/) from there click “mysql manager”, and you will be taken to a copy of phpMyAdmin which has rather nicely been installed for you. From the phpMyAdmin splash page create a new database making sure to remember the db name/

Now you can set up WordPress using the fabled 5 minute install. Browse to the new WordPress folder – http://localhost/wordpress/ and follow the instructions. EasyPHPs database defaults are host: localhost, username: root, and the password is blank. You can also enter the name of the database you just created.

Once complete you are good to go. Just treat the wordpress folder as if it were a remote website folder. You can install plugins, and themes, through windows explorer and start work on your local development. There are however some more changes you can make that will make the whole process even better still…

Permalinks

To make the most of your blog, you really should enable permalinks, which means enabling mod_rewrite on the server. Most web hosts have this turned on, but it’s something you will need to do yourself with your new local server. To do this run EasyPHP and click the “E” on the control panel. Select configuration -> Apache. This will open the httpd.conf file. Now search for and uncomment (uncomment means remove the #) the following two lines.

• LoadModule rewrite_module modules/mod_rewrite.so
• AddModule mod_rewrite.c

Restart Apache, rewrite your permalinks (from the wordpress admin) and you’re all set.

Let me know how you get on in the comments.

1. Bad promotion
2. Bad design

Bad Promotion

How do you get people to download and use your theme? Promoting a theme, especially at the moment since there are so many to choose from, is a challenge.

How do you get people to keep using your theme after they’ve downloaded it? There are so many free themes around that it’s very easy to switch from one to another s the mood takes you.

Making the theme free is clearly an easy option for getting people to download the thing, but if you want people to use it you still have to make it good (see Bad Design) – however getting them to your site, in order to download it is the hard part.

If you do make you theme free then add a link to your own website in the footer so that new users can find you. You can also try submitting your theme to theme galleries and emailing popular WordPress based sites.

If it’s a premium theme you are releasing then give away free copies for review and hold theme based competitions to try and draw new users in. Anything that will get new visitors to see your theme is good.

Submit your theme to as many theme galleries and WordPress websites as possible. Basically get as many people talking about it as you can.

Bad Design

Bad design is very much a subjective thing. Different people like different things, and different websites require different types of design. However there are certain things, not necessarily visual, that you can do to take your theme to the next level, and increase adoption rates.

• Make sure you include as many of the WordPress built in features as possible (widgets etc) and include hooks for popular plugins. WordPress users love to customise the themes so making this as easy for them to do as possible is always a bonus.
• Keep the theme code clean and as simple as possible. Again, people like customising things. The code doesn’t have to validate, but it’s a good idea if it does, if only for future maintenance.
• Keep colours relatively neutral. If you go for bold colours or schemes appropriate for a narrow audience (your football teams colours for example) then your potential downloads will shrink. Also don’t go crazy with the colours, stick to a single main colour with 1 or 2 spot colours for highlights. Make these colours easy to find in the css so people can customise the theme quickly and easily.
• Test theme with as many different html tags as possible. There will always be people who want to style their code and blockquotes (and even use <b> and <i> even though they shouldn’t) so take care to make their styles look good.