Advertise here with BSA

Over the past year, we’ve made great strides towards improving conversion at our startup, Docebo. What we do at our startup is help companies deliver e-learning solutions through a web interface and a WordPress plugin.

Because of our recent efforts in improving our conversion rates, we now have a fairly good idea of who lands on our homepage, and whether or not they’re likely to convert and becoming a user.

But it wasn’t always like that for us.

Now we take the view that knowing about our website visitors and users leads to the best conversion rates, and we’re continually giving our design and development teams new challenges of trying to find more ways to do that.

In our search for better conversion rates, and through many trials and errors, we’ve discovered plenty of different ways to increase signups on our platform.

I will share to you how we did it.

Optimize Ads Based on User Behavior Trends

It’s easy to pour money into pay per click (PPC) campaigns over at Google AdWords and Facebook advertising to drive traffic to our site.

However, it’s much harder to quantify what they’re giving us back for our money.

It’s also difficult to determine how to optimize our ad spending for value and quality, rather than just page views.

Search engine marketing (SEM) is a full time job, and it’s one that most startups don’t have the time, or perhaps even the resources, for.

Bid Management Tool

So how could we optimize our search engine advertisement spending without breaking the bank?

We got help in the form of software.

With the same amount of spending, we nearly doubled conversions using a bid management software. In short, bid management software automatically adjusts your PPC marketing campaigns based on which combinations of keywords and ads are converting the best.

We tested several, and we eventually settled on Adspert. It only took minutes to sign up and the dashboard was fairly self-explanatory.

Once you’re in, the software hooks up with your Google account to download all of the data on campaigns and then sits in the background, making automatic adjustments to bids to reduce campaign spend by 20%.

It also factors in seasonality, changing bids depending on the historical data for particular dates or time periods.

Look for a solution like ours if you’re unhappy with the results of your ad campaigns, or if you think you can get better performance for the same amount of money.

The Results

The results of using bid optimization were fairly startling.

In the weeks after beginning to use the software, our new visits were up by 10% and returning visitors up by 20%.

By tweaking keywords and placements automatically, our bid management software also had a direct impact on the quality of the visitors that found us through PPC, with a 50% increase on page visit duration.

It’s important to note that although we’ve had great success with PPC advertising, I’d like to think it’s because we don’t just stop after the visitor lands on the site.

That’s because for a startup like ours, getting signups is what matters the most. Even with a high amount of traffic but very poor conversion rates, our advertising would not be sufficient.

We prefer to work with information handed to us by users when they engage or convert on the site. We want to know about our site visitors as much as we can.

Engaging Site Visitors and Users

If we’re paying to acquire visitors, it’s important to us that the visit isn’t wasted. This is where we begin to make a proactive effort to understand what our users want.

Online Surveys

Our most "in-your-face" method of learning more about our site visitors is using surveys — something often used by businesses for market research, and then subsequently forgotten as the customers begin to arrive.

But us, we try to hit visitors with surveys to understand why they’re behaving as they are on the site (in conjunction with several other methods which I’ll discuss later on).

If someone isn’t performing a conversion activity, we want to understand why — a train of thought that eventually leads to gaining a much greater value from our ad spend than just thinking "Oh, the target was wrong, let’s change the keyword."

SurveyMonkey is undoubtedly the brand leader in this space, but we chose FluidSurveys, which is pretty easy to set up and offers powerful logic options so that we can fine-tune each survey depending on the previous answers.

Instant Messaging and Live Chat

We also use Vivocha, an instant messaging widget that pops up on the site to offer help when customers match the profile we select.

It’s commonly thought that live chat widgets like Vivocha are a sales tool, but we’ve tried hard to make it into a customer research tool instead.

All feedback received through the widget is cataloged and prioritized so that we can keep track of what’s being asked.

For instance, we noticed that many users communicating through Vivocha were asking for web conferencing integration. That’s an important trend in visitor feedback that we may not have picked up on through surveys, because it’s a spur-of-the-moment, unadulterated thought visitors had while browsing our site that may never have been conveyed any other way. (Subsequently the conferencing integration was added to our development pipeline.)

Not only does live chat lead to incredibly useful feedback, it also feels more natural to our users too. Live chat is the equivalent of a store assistant approaching as you browse their store, compared to surveys that are more comparable to someone knocking on your door to ask questions.

In fact, we were so impressed by Vivocha that we integrated it into the Docebo API, allowing our clients and trainers to chat directly with their members of staff as they navigate the online training environment.

Tweak the Website’s Design for Our Users

We try to understand our users by monitoring what they respond to best.

Thanks to a host of young startups, A/B testing has moved from something reserved only for big brands into something that all of us can use to quickly and easily test what site visitors are looking for when they land on our site.

It is quite simply the most efficient way to know more about our website visitors.

We’ve used Optimizely, but Visual Website Optimizer seems equally popular with startups.

Those of a more technical mindset can use easy-to-implement multivariate solutions such as Split (Rails gem) or the Django Experiments framework. These are slightly different from A/B testing but they have the same goal, which is to improve the user interface.

Identify Common Conversion Activities

The best way to increase conversions for businesses is to map out the steps that a customer takes from their signup to their payment.

That means understanding how a visitor is using the app — and what value they’re getting from it — which is generally measured using engagement.

Lincoln Murphy’s Common Conversion Activities (CCA) are how we measure behavior within our app.

We list down what we expect our visitors to do, and then measure whether they’re behaving as we think that they should.

Murphy defines Common Conversion Activities (CCA) as:

"a set of story-driven actions defined by falsifiable hypotheses that, when completed as a set during the trial, lead to conversion."

Essentially, this means defining a broad hypothesis such as, "If we can produce immediate results, the prospective customer will pay" and marking the steps required to reach that point, whether it’s sending an email, uploading a training course, creating a user, or something else.

Above all, we focused on designing our app so that customers realized value from it as soon as possible.

For example, it’s commonly advised that users should be guided through a set of steps based on a functional view of the software; e.g., a user must provide one detail before they can proceed to an action.

What we realized was that this UI flow is limiting. Sometimes, to get users to engage straight away, we need to hack the process so that the value is immediately clear without a bunch of steps in between.

One of the clearest ways you can see this in our system is the offer of pre-written training packs in a marketplace as soon as you sign up, which removes one of the biggest barriers in online training delivery: The creation of the materials.

It’s the same reason Apple suggests apps for beginners and PC manufacturers bundle software: Nobody likes to buy something that they then aren’t sure what to do with.

It makes an instant difference to UX and conversion when trial users get down to experiencing the value of the system for what it’s good at — delivering training — rather than getting stuck because they don’t have material at hand.

By identifying CCAs in this manner, we managed to do away with complex signup flows and replace them with a welcome process that immediately drives the user towards their e-learning goals — and also towards conversion.

Don’t Ever Underestimate the Power of Email

It’s easy to get bogged down in the minutiae of what’s happening on your main website. There’s an assumption that what happens there is what matters the most, so that’s where the time should be spent.

For many types of business, that’s a false assumption.

Any SaaS company like ours that maintains a lead list — whether those are potential customers, expired users, or some other group — needs to pay attention to how those leads are nurtured.

For a start, we worked hard to make sure we maximized the thousands of people who have signed up to try Docebo in the past. We told them about new features, we alerted them about best practices, and we’ve offered them free time slots to benefit from our e-learning experts.

Then, we tried to make sure that we were maximizing the touchpoints available. In one example, we sent former users a friendly email to tell them about three new features we’d added to the Docebo learning management system (LMS).

We learned quickly that this should have been three emails spaced out over 2-3 weeks to maximize the chances that our communications were being sent.

When we started looking at the volume of emails being sent, we realized that huge opportunities were being lost to convert as we communicate with our users.

In some communications, we hadn’t included the website address as the most distinctive link, which meant we were clearly missing opportunities to drive people who had an interest in our solution back towards where we wanted them.

Integration with Web Services and Products That Our Users Love Using

In recent months, we’ve been making a big development push to get involved in other areas of our customers’ lives.

For instance, we now know that many of our users are existing users of CRM, ERP and content management tools. So a massive part of our conversion strategy has been around the development of third-party integrations, helping Docebo to become not just a learning management system, but a wider ecosystem that allows us to talk to users that are not yet e-learning experts, but that can benefit from e-learning integration with a third party.

The rationale behind this, of course, is that when users begin to link up one software product with others, it becomes a lot harder for them to let it go. This is the Internet equivalent of how reluctant most of us are in messing around with our TV, DVD player and set-top box once it’s all set up.

API

Our first step was to create an API, which allows web developers to integrate Docebo into their own sites to any degree they require, helping other developers to get more value from the product than just with our app alone.

However, API integration wasn’t a panacea. Many customers simply couldn’t spare the time to build custom integration.

Therefore, we’ve also focused on providing users with off-the-shelf integration, so developing an "app store" of sorts has been a critical part of our strategy so far.

WordPress Plugin

We recently launched a WordPress plugin that integrates an existing content management system with our e-learning solution.

Based on the most recent results, integrating with existing solutions like WordPress is a track we’re going to continue down on.

Results of the WordPress Plugin

Since we released the plugin, we’ve had 300 new Docebo installations from users who want to turn WordPress into an e-learning solution.

We’ve gotten roughly 200 new customers from those. It’s a small start when viewed against our overall signup figures, but the traffic numbers are continuing to grow, with the number of people discovering the special WordPress landing page via other sources such as Facebook and the WordPress site itself increasing since the launch of the plugin.

We also believe that the traffic arriving via WordPress is higher quality.

The visitors from WordPress go to more web pages and spend over 1 minute longer on the site on average than our other non-paid referrals.

We’re hoping for similar (or better!) results from our next web service integrations, this time with video conferencing systems (i.e., Adobe Connect and Big Blue Button).

Conclusion: Know Your Users, and then Build Your Product for Them

We’ve improved quite a lot of things in recent months, but our overriding focus for the near future will still be around knowing our customers and figuring out how we can tweak their experiences for the highest conversion.

The strategies and tools that I discussed here have helped Docebo grow to over 500,000 users.

And we’re still discovering new things about them every day.

If you’d like to learn more about Docebo, check out our website.

Related Content

• Getting Users to Sign Up: Factors in Design and Content
• Designing Web Apps for the iPad
• 5 Simple Tips for Designing Better iPhone Apps
• Related categories: Web Applications and Web Design

About the Author

Jacopo Mauri is a natural born communicator, in love with everything related to writing and tech and with expertise as freelance journalist writing about technology and videogames. He’s an experienced marketer and has worked for companies including Nintendo Italy and Microsoft Italy’s official street marketing agency.

After a few years (or even months) of designing and developing WordPress themes, especially for clients, you start to realize that a lot of the functionality can be standardized or distilled down into a “starter theme or kit”. This helps get the development process started and moving along apace.

The best first step in doing this, I’ve found, is to nail down most of the common functions and include them in the functions.php. This functions.php file will need to be extended to meet the particular theme’s needs as new projects arise, but it will provide a more than awesome starting point for development.

There are about 13 key functions that I like to start out with and will add to them as needed…

1. Custom menu support

The navigation menu feature, introduced in WordPress 3.0, allows for the intuitive creation and maintaining of navigation menus in themes.

At the very least, a standard theme will need a main navigation menu, perhaps in the header and a secondary navigation menu in the footer. To do this, we will register those two menus “Main Menu” and “Secondary Menu”

While this isn’t a particularly new feature, its still nice to wrap it in an if function_exists() just in case the user is stuck in a pre 3.0 installation:

In the functions.php file, include the following:

if ( function_exists( 'register_nav_menus' ) ) {
    	register_nav_menus(
    		array(
    		  'main_menu' => __( 'Main Menu', 'cake' ),
    		  'secondary_menu' => __( 'Secondary Menu', 'cake' ),
    		)
    	);
    }

Now that the Menus are registered, we need to tell the theme where to output them. We’d like the Main Menu to appear in our header. So, in our header.php file, we include the following code:

<?php if ( has_nav_menu( 'main_menu' ) ) { ?>
    	<?php $defaults = array(
    	  'theme_location'  => 'main_menu',
    	  'menu'            => '', 
    	  'container'       => false, 
    	  'echo'            => true,
    	  'fallback_cb'     => false,
    	  'items_wrap'      => '<ul id="%1$s"> %3$s</ul>',
    	  'depth'           => 0 );
    	  wp_nav_menu( $defaults );
    	?>
    <?php } else { ?>
    	<ul>
    	  <?php wp_list_pages('title_li='); ?>
    	</ul>
    <?php } ?>

First, we check to see if we have a menu called ‘main_menu’ defined and if we do, we insert its contents here, otherwise we fallback to the default wp_list_pages() which we can further customize to display the links as we need.

If you’d like even further customization of the menu, see the WordPress codex page on wp_nav_menu() function.

We want the secondary menu to appear in the footer, so we open up the footer.php and include the following code:

<?php if ( has_nav_menu( 'secondary_menu' ) ) { ?>
    	<?php $defaults = array(
    	  'theme_location'  => 'secondary_menu',
    	  'menu'            => '', 
    	  'container'       => false, 
    	  'echo'            => true,
    	  'fallback_cb'     => false,
    	  'items_wrap'      => '<ul id="%1$s"> %3$s</ul>',
    	  'depth'           => 0 );
    	  wp_nav_menu( $defaults );
    	?>
    <?php } else { ?>
    	<ul>
    	  <?php wp_list_pages('title_li='); ?>
    	</ul>
    <?php } ?>

2. Style the visual editor

This function allows you to use custom CSS to style the WordPress TinyMCE visual editor.

Create a CSS file named editor-style.css and paste your styles inside. As a placeholder, I like to start with styles in the editor-style.css file of the Twenty Twelve theme.

In the functions.php add the following:

add_editor_style();

If you don’t want to use the name “editor-style” for your CSS file and also want to move the file elsewhere, e.g. in within a css directory, then modify the function.

For example, I want to name my file tiny-mce-styles.css and I want it within my CSS directory; so my function will look like this:

add_editor_style('/css/editor-style.css');

While we’re at it, we might as well style the editor for right-to-left languages. In the theme directory, create a CSS file called editor-style-rtl.css and, at the very least, include the following:

html .mceContentBody {
    	direction: rtl;
    	unicode-bidi: embed;
    }
    li {
    	margin: 0 24px 0 0;
    	margin: 0 1.714285714rem 0 0;
    }
    dl {
    	margin: 0 24px;
    	margin: 0 1.714285714rem;
    }
    tr th {
    	text-align: right;
    }
    td {
    	padding: 6px 0 6px 10px;
    	text-align: right;
    }
    .wp-caption {
    	text-align: right;
    }

Again, as a placeholder, the above styles are from the Twenty Twelve theme. Restyle and extend as needed.

3. Custom avatar support

Most people commenting on blogs online have an avatar associated with them. If, however, they don’t and you don’t particularly like the WordPress default avatar options, you can define your own.

To do so, include the following code in your functions.php:

if ( !function_exists('cake_addgravatar') ) {
    	function cake_addgravatar( $avatar_defaults ) {
    		$myavatar = get_template_directory_uri() . '/images/avatar.png';
    		$avatar_defaults[$myavatar] = 'avatar';
    		return $avatar_defaults;
    	}
    	add_filter( 'avatar_defaults', 'cake_addgravatar' );
    }

What we’re doing here first, is checking to see if the function exists. If it does, we add a filter that tells WordPress to use our custom defined avatar as the default.

We are telling WordPress to find this avatar in our “images” directory inside the theme directory. Next step, obviously, is to create the image itself and upload it to the “images” folder.

4. Post formats

The post formats feature allows you to customize the style and presentation of posts. As of this writing, there are 9 standardized post formats that users can choose from: aside, gallery, link, image, quote, status, video, audio, and chat. In addition to these, the default “Standard” post format indicates that no post format is specified for the particular post.

To add this functionality to your theme, include the following code in your functions.php, specifying the post formats you’ll be taking advantage of. e.g. If you only want the aside, image, link, quote, and status Post Formats, your code should look like this:

add_theme_support( 'post-formats', array( 'aside', 'image', 'link', 'quote', 'status' ) );

5. Featured image function

The featured image function, as the codex explains, allows the author to choose a representative image for Posts, Pages or Custom Post Types.

To enable this functionality, include the following code in your functions.php:

add_theme_support( 'post-thumbnails' );

We could stop there and leave it up to WordPress to define the thumbnail sizes or we could take control and define them ourselves. We’ll do the latter, obviously!

Let’s say we’re running a magazine site where the featured image will appear in at least 3 different sizes. Maybe one large image if the post is featured or is the newest, a medium sized image if its just a post among the rest and a regular size perhaps to appear elsewhere.

We take advantage of the add_image_size() function that instructs WordPress to make a copy of our featured image in our defined sizes.

To do this, we add the following to the functions.php:

// regular size
    add_image_size( 'regular', 400, 350, true );
    
    // medium size
    add_image_size( 'medium', 650, 500, true );
    	
    // large thumbnails
    add_image_size( 'large', 960, '' );

See how to work with the add_image_size() function to either soft crop or hard crop your images on the WordPress codex page.

6. Attachment display settings

Once we’ve defined the above image sizes (regular, medium and large) — and since by default WordPress doesn’t do it for us — we’ll add the ability to select our those image sizes from the Attachment Display Settings interface.

It would be nice if you could, when writing a post, insert the desired size image by selecting it from the dropdown as you normally would for the WordPress default sizes.

To do this, we add the following to our functions.php:

// show custom image sizes on when inserting media
    function cake_show_image_sizes($sizes) {
        $sizes['regular'] = __( 'Our Regular Size', 'cake' );
        $sizes['medium'] = __( 'Our Medium Size', 'cake' );
        $sizes['large'] = __( 'Our Large Size', 'cake' );
        return $sizes;
    }
    add_filter('image_size_names_choose', 'cake_show_image_sizes');

With that in place, we can select our image sizes.

7. Add feed links (instead of old RSS code in head)

This one is simple. If you’ve been building WordPress themes for a while, you’ll remember the days when you had to manually include code to output the RSS feed right in the header.php. This approach is cleaner and relies on the wp_head() action hook to output the necessary code.

In the functions.php file, include the following:

// Adds RSS feed links to for posts and comments.
    add_theme_support( 'automatic-feed-links' );

Make sure that you have it in the header.php, right before end of &rgt;/head&lgt;

8. Load text domain

With this function you take the first step towards making your theme available for translation.

Its best to call this function from within the after_setup_theme() action hook i.e. after the setup, registration, and initialization actions of your theme have run.

add_action('after_setup_theme', 'my_theme_setup');
    function my_theme_setup(){
        load_theme_textdomain('my_theme', get_template_directory() . '/languages');
    }

Now add a directory named ‘languages‘ in your theme directory.

You can learn more about load_theme_textdomain() function on the WordPress codex page.

9. Define content width

Content width is a feature in themes that allows you to set the maximum allowed width for videos, images, and other oEmbed content in a theme.

That means, when you paste that YouTube URL in the editor and WordPress automatically displays the actual video on the front end, that video will not exceed the width you set using the $content_width variable.

if ( ! isset( $content_width ) )
    	$content_width = 600;

WordPress also recommends the addition of the following CSS:

.size-auto, 
    .size-full,
    .size-large,
    .size-medium,
    .size-thumbnail {
    	max-width: 100%;
    	height: auto;
    }

While this is useful, its a bit heavy handed. It defines the content width for all content. What if you wanted videos of a larger width on pages than in posts and an even larger size in a custom post type? Currently, there is no way to define this. There is however a feature request proposing the inclusion of the $content_width variable into the built-in add_theme_support().

10. Dynamic sidebar

Your typical theme will have at least one sidebar. The code to define the sidebar is pretty straightforward.

Add the following to your functions.php:

if(function_exists('register_sidebar')){
    	register_sidebar(array(
    		'name' => 'Main Sidebar',
    		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    		'after_widget' => '</aside>',
    		'before_title' => '<h3>',
    		'after_title' => '</h3>',
    	));
    }

This registers and defines a sidebar named “Main Sidebar” and its HTML markup.

You can learn more about the register_sidebar() function on the WordPress codex page.

You’ll routinely find the need to have more than that one sidebar so you can just copy/paste the above code and change the name.

There is also a register_sidebars() function that will allow you to register and define multiple sidebars all at once but it doesn’t give you the flexibility of giving each new sidebar a unique name.

11. Custom “more” link format

If you’re displaying excerpts of your posts on a blog index page, by default WordPress will show [...] to indicate there’s more “after the jump”.

You will most likely want to add a “more link” and define how that looks.

To do this we need to add the following code to our functions.php:

function new_excerpt_more($more) {
           global $post;
    	return '...<br /><br /><a href="'. get_permalink($post->ID) . '" class="read_more">read more →</a>';
    }
    add_filter('excerpt_more', 'new_excerpt_more');

This adds an ellipses ‘…‘ right after the excerpt and includes a read more link after two break tags. You can rename and style the read_more CSS class for the link as desired.

12. Basic pagination

Each theme might have different pagination needs but it’s always safest to start with a nice default functions: previous_posts_link() and next_posts_link().

function cake_content_nav( $nav_id ) {
    	global $wp_query;
    
    	if ( $wp_query->max_num_pages > 1 ) : ?>
    		<nav id="<?php echo $nav_id; ?>" class="content_nav clearfix">
    			<ul>
    				<li class="nextPost"><?php previous_posts_link( __( '← newer ', 'cake' ) ); ?></li>
    				<li class="prevPost"><?php next_posts_link( __( 'older →', 'cake' ) ); ?></li>
    			</ul>					
    		</nav>
    	<?php endif;
    }?>

13. Redirect after theme activation

If you have special instructions in your theme eg. in your theme options page that you’d like the user to see when they first activate the theme, you can use the following function to redirect them there:

if (is_admin() && isset($_GET['activated']) && $pagenow == "themes.php")
    	wp_redirect('themes.php?page=themeoptions');

Pay special attention to the wp_redirect() function. Make sure to replace the ‘themes.php?page=themeoptions‘ with the URL of your page.

14. Hide admin bar (during development)

During development, I sometimes find the WordPress admin (tool) bar to be quite distracting.

It’s in a fixed position at the top of the window and depending on my layout can cover some elements of the header.

While still designing and developing, I like to hide the admin bar with this handy function.

show_admin_bar( false );

Do you have any favourite functions for jump starting WordPress template development? What functions would you like to see? Let us know in the comments.

Featured image/thumbnail, multi-tool image via Shutterstock.

DXThemes: 50+ WP Themes and Responsive Templates – only $27!

After a few years (or even months) of designing and developing WordPress themes, especially for clients, you start to realize that a lot of the functionality can be standardized or distilled down into a “starter theme or kit”. This helps get the development process started and moving along apace.

The best first step in doing this, I’ve found, is to nail down most of the common functions and include them in the functions.php. This functions.php file will need to be extended to meet the particular theme’s needs as new projects arise, but it will provide a more than awesome starting point for development.

There are about 13 key functions that I like to start out with and will add to them as needed…

1. Custom menu support

The navigation menu feature, introduced in WordPress 3.0, allows for the intuitive creation and maintaining of navigation menus in themes.

At the very least, a standard theme will need a main navigation menu, perhaps in the header and a secondary navigation menu in the footer. To do this, we will register those two menus “Main Menu” and “Secondary Menu”

While this isn’t a particularly new feature, its still nice to wrap it in an if function_exists() just in case the user is stuck in a pre 3.0 installation:

In the functions.php file, include the following:

if ( function_exists( 'register_nav_menus' ) ) { register_nav_menus( array( 'main_menu' => __( 'Main Menu', 'cake' ), 'secondary_menu' => __( 'Secondary Menu', 'cake' ), ) ); }

Now that the Menus are registered, we need to tell the theme where to output them. We’d like the Main Menu to appear in our header. So, in our header.php file, we include the following code:

<?php if ( has_nav_menu( 'main_menu' ) ) { ?> <?php $defaults = array( 'theme_location' => 'main_menu', 'menu' => '', 'container' => false, 'echo' => true, 'fallback_cb' => false, 'items_wrap' => '<ul id="%1$s"> %3$s</ul>', 'depth' => 0 ); wp_nav_menu( $defaults ); ?> <?php } else { ?> <ul> <?php wp_list_pages('title_li='); ?> </ul> <?php } ?>

First, we check to see if we have a menu called ‘main_menu’ defined and if we do, we insert its contents here, otherwise we fallback to the default wp_list_pages() which we can further customize to display the links as we need.

If you’d like even further customization of the menu, see the WordPress codex page on wp_nav_menu() function.

We want the secondary menu to appear in the footer, so we open up the footer.php and include the following code:

<?php if ( has_nav_menu( 'secondary_menu' ) ) { ?> <?php $defaults = array( 'theme_location' => 'secondary_menu', 'menu' => '', 'container' => false, 'echo' => true, 'fallback_cb' => false, 'items_wrap' => '<ul id="%1$s"> %3$s</ul>', 'depth' => 0 ); wp_nav_menu( $defaults ); ?> <?php } else { ?> <ul> <?php wp_list_pages('title_li='); ?> </ul> <?php } ?>

2. Style the visual editor

This function allows you to use custom CSS to style the WordPress TinyMCE visual editor.

Create a CSS file named editor-style.css and paste your styles inside. As a placeholder, I like to start with styles in the editor-style.css file of the Twenty Twelve theme.

In the functions.php add the following:

add_editor_style();

If you don’t want to use the name “editor-style” for your CSS file and also want to move the file elsewhere, e.g. in within a css directory, then modify the function.

For example, I want to name my file tiny-mce-styles.css and I want it within my CSS directory; so my function will look like this:

add_editor_style('/css/editor-style.css');

While we’re at it, we might as well style the editor for right-to-left languages. In the theme directory, create a CSS file called editor-style-rtl.css and, at the very least, include the following:

html .mceContentBody { direction: rtl; unicode-bidi: embed; } li { margin: 0 24px 0 0; margin: 0 1.714285714rem 0 0; } dl { margin: 0 24px; margin: 0 1.714285714rem; } tr th { text-align: right; } td { padding: 6px 0 6px 10px; text-align: right; } .wp-caption { text-align: right; }

Again, as a placeholder, the above styles are from the Twenty Twelve theme. Restyle and extend as needed.

3. Custom avatar support

Most people commenting on blogs online have an avatar associated with them. If, however, they don’t and you don’t particularly like the WordPress default avatar options, you can define your own.

To do so, include the following code in your functions.php:

if ( !function_exists('cake_addgravatar') ) { function cake_addgravatar( $avatar_defaults ) { $myavatar = get_template_directory_uri() . '/images/avatar.png'; $avatar_defaults[$myavatar] = 'avatar'; return $avatar_defaults; } add_filter( 'avatar_defaults', 'cake_addgravatar' ); }

What we’re doing here first, is checking to see if the function exists. If it does, we add a filter that tells WordPress to use our custom defined avatar as the default.

We are telling WordPress to find this avatar in our “images” directory inside the theme directory. Next step, obviously, is to create the image itself and upload it to the “images” folder.

4. Post formats

The post formats feature allows you to customize the style and presentation of posts. As of this writing, there are 9 standardized post formats that users can choose from: aside, gallery, link, image, quote, status, video, audio, and chat. In addition to these, the default “Standard” post format indicates that no post format is specified for the particular post.

To add this functionality to your theme, include the following code in your functions.php, specifying the post formats you’ll be taking advantage of. e.g. If you only want the aside, image, link, quote, and status Post Formats, your code should look like this:

add_theme_support( 'post-formats', array( 'aside', 'image', 'link', 'quote', 'status' ) );

5. Featured image function

The featured image function, as the codex explains, allows the author to choose a representative image for Posts, Pages or Custom Post Types.

To enable this functionality, include the following code in your functions.php:

add_theme_support( 'post-thumbnails' );

We could stop there and leave it up to WordPress to define the thumbnail sizes or we could take control and define them ourselves. We’ll do the latter, obviously!

Let’s say we’re running a magazine site where the featured image will appear in at least 3 different sizes. Maybe one large image if the post is featured or is the newest, a medium sized image if its just a post among the rest and a regular size perhaps to appear elsewhere.

We take advantage of the add_image_size() function that instructs WordPress to make a copy of our featured image in our defined sizes.

To do this, we add the following to the functions.php:

// regular size add_image_size( 'regular', 400, 350, true ); // medium size add_image_size( 'medium', 650, 500, true ); // large thumbnails add_image_size( 'large', 960, '' );

See how to work with the add_image_size() function to either soft crop or hard crop your images on the WordPress codex page.

6. Attachment display settings

Once we’ve defined the above image sizes (regular, medium and large) — and since by default WordPress doesn’t do it for us — we’ll add the ability to select our those image sizes from the Attachment Display Settings interface.

It would be nice if you could, when writing a post, insert the desired size image by selecting it from the dropdown as you normally would for the WordPress default sizes.

To do this, we add the following to our functions.php:

// show custom image sizes on when inserting media function cake_show_image_sizes($sizes) { $sizes['regular'] = __( 'Our Regular Size', 'cake' ); $sizes['medium'] = __( 'Our Medium Size', 'cake' ); $sizes['large'] = __( 'Our Large Size', 'cake' ); return $sizes; } add_filter('image_size_names_choose', 'cake_show_image_sizes');

With that in place, we can select our image sizes.

7. Add feed links (instead of old RSS code in head)

This one is simple. If you’ve been building WordPress themes for a while, you’ll remember the days when you had to manually include code to output the RSS feed right in the header.php. This approach is cleaner and relies on the wp_head() action hook to output the necessary code.

In the functions.php file, include the following:

// Adds RSS feed links to for posts and comments. add_theme_support( 'automatic-feed-links' );

Make sure that you have it in the header.php, right before end of &rgt;/head&lgt;

8. Load text domain

With this function you take the first step towards making your theme available for translation.

Its best to call this function from within the after_setup_theme() action hook i.e. after the setup, registration, and initialization actions of your theme have run.

add_action('after_setup_theme', 'my_theme_setup'); function my_theme_setup(){ load_theme_textdomain('my_theme', get_template_directory() . '/languages'); }

Now add a directory named ‘languages‘ in your theme directory.

You can learn more about load_theme_textdomain() function on the WordPress codex page.

9. Define content width

Content width is a feature in themes that allows you to set the maximum allowed width for videos, images, and other oEmbed content in a theme.

That means, when you paste that YouTube URL in the editor and WordPress automatically displays the actual video on the front end, that video will not exceed the width you set using the $content_width variable.

if ( ! isset( $content_width ) ) $content_width = 600;

WordPress also recommends the addition of the following CSS:

.size-auto, .size-full, .size-large, .size-medium, .size-thumbnail { max-width: 100%; height: auto; }

While this is useful, its a bit heavy handed. It defines the content width for all content. What if you wanted videos of a larger width on pages than in posts and an even larger size in a custom post type? Currently, there is no way to define this. There is however a feature request proposing the inclusion of the $content_width variable into the built-in add_theme_support().

10. Dynamic sidebar

Your typical theme will have at least one sidebar. The code to define the sidebar is pretty straightforward.

Add the following to your functions.php:

if(function_exists('register_sidebar')){ register_sidebar(array( 'name' => 'Main Sidebar', 'before_widget' => '<aside id="%1$s" class="widget %2$s">', 'after_widget' => '</aside>', 'before_title' => '<h3>', 'after_title' => '</h3>', )); }

This registers and defines a sidebar named “Main Sidebar” and its HTML markup.

You can learn more about the register_sidebar() function on the WordPress codex page.

You’ll routinely find the need to have more than that one sidebar so you can just copy/paste the above code and change the name.

There is also a register_sidebars() function that will allow you to register and define multiple sidebars all at once but it doesn’t give you the flexibility of giving each new sidebar a unique name.

11. Custom “more” link format

If you’re displaying excerpts of your posts on a blog index page, by default WordPress will show [...] to indicate there’s more “after the jump”.

You will most likely want to add a “more link” and define how that looks.

To do this we need to add the following code to our functions.php:

function new_excerpt_more($more) { global $post; return '...<br /><br /><a href="'. get_permalink($post->ID) . '" class="read_more">read more →</a>'; } add_filter('excerpt_more', 'new_excerpt_more');

This adds an ellipses ‘…‘ right after the excerpt and includes a read more link after two break tags. You can rename and style the read_more CSS class for the link as desired.

12. Basic pagination

Each theme might have different pagination needs but it’s always safest to start with a nice default functions: previous_posts_link() and next_posts_link().

function cake_content_nav( $nav_id ) { global $wp_query; if ( $wp_query->max_num_pages > 1 ) : ?> <nav id="<?php echo $nav_id; ?>" class="content_nav clearfix"> <ul> <li class="nextPost"><?php previous_posts_link( __( '← newer ', 'cake' ) ); ?></li> <li class="prevPost"><?php next_posts_link( __( 'older →', 'cake' ) ); ?></li> </ul> </nav> <?php endif; }?>

13. Redirect after theme activation

If you have special instructions in your theme eg. in your theme options page that you’d like the user to see when they first activate the theme, you can use the following function to redirect them there:

if (is_admin() && isset($_GET['activated']) && $pagenow == "themes.php") wp_redirect('themes.php?page=themeoptions');

Pay special attention to the wp_redirect() function. Make sure to replace the ‘themes.php?page=themeoptions‘ with the URL of your page.

14. Hide admin bar (during development)

During development, I sometimes find the WordPress admin (tool) bar to be quite distracting.

It’s in a fixed position at the top of the window and depending on my layout can cover some elements of the header.

While still designing and developing, I like to hide the admin bar with this handy function.

show_admin_bar( false );

Do you have any favourite functions for jump starting WordPress template development? What functions would you like to see? Let us know in the comments.

Featured image/thumbnail, multi-tool image via Shutterstock.

DXThemes: 50+ WP Themes and Responsive Templates – only $27!

A roundup of the most interesting stories from other sites, collected by the staff at MIT Technology Review.

Anatomy of a Hack: How Crackers Ransack Passwords
This is exceptionally geeky but smartly done, because it shows in a memorable way how passwords get cracked. 
—Brian Bergstein, deputy editor

Partnership brings together Northway's industry-leading implementation and training services with Mobile Labs' leading-edge mobile app testing software.

Upgrade enables developers to view the coverage of their tested code within Visual Studio, and view where tests fail.