JBi-Film-Cover
JBi-Film-Cover
Wordpress by Ilya Pavlov
Wordpress by Ilya Pavlov

Eight Key Functions to Kick-start WordPress Theme Development

The majority of website developers will find themselves working in WordPress and the design and development of Themes is all part of the process. Once you begin developing themes you’ll soon realise that many functions can be standardised and put into a basic starter kit which gives you a launch pad for the rest of your development.

To build your starter’s kit you need to pinpoint the most common functions and include them all in the functions.php file. Below we’ve collated eight key functions you should include in your starter kit.

1. Custom Menu Support

WordPress 3.0 saw the introduction of the navigation menu feature which allows for the instinctive creation of navigation menus within themes. A standard theme requires at least a main navigation menu, traditionally positioned in the header and sometimes a secondary navigation menu in the footer. To achieve this you need to register both these menus in the functions.php in the format shown below.

1a-custom-menu
1a-custom-menu

These menus are now registered but you need to tell the theme where to position them. The “Main Menu” is going to appear in the header so in the header.php you input the following:

1b-custom-menu
1b-custom-menu

You then need to check if the “main_menu” menu is defined and then if it has been you then insert its contents. If not you can fall back to the default wp_list_pages() which can be customised to display links as necessary.

The secondary menu is to appear in the footer so the above code is repeated in the footer.php with the necessary changes (‘main menu’ to ‘secondary menu’).


2. Custom Avatar Support

Most people who comment online, as is common with WordPress sites, have their own personal avatar. There are some who don’t and if you don’t particularly like the avatars provided as default by WordPress you can customise them. To do this add the following code to your functions.php file.

2-custom-avatar
2-custom-avatar

3. Style your Visual Editor

This function allows for custom CSS to style WordPress TinyMCE visual editor. You need to create a CSS file named editor-style.css and paste your styles within. In your functions.php you then insert

add_editor_style();

It then makes sense to setup the editor for right-to-left languages and create a further CSS file called editor-style-rtl.css in the theme directory and then include the following code as a minimum.

3-visual-editor
3-visual-editor

4. Featured Image Function

This function allows you to choose a representative image for all posts, pages and custom posts. To enable this you need to include the following in your functions.php file.

add_theme_support( ‘post-thumbnails’ );

You can leave it like this but it would be detrimental to your website development. Instead you should define the thumbnail sizes for your featured posts. To do this you need to take advantage of the add_image_size() function which tells WordPress to make copies of the chosen image in defined sizes which you would code as below:


5. Post Formats

The post formats function allows to customise how your posts are styled and presented. There are nine different standard formats offered by WordPress: aside, gallery, link, image, quote, status, video, audio, and chat. To add this functionality you need to specify the type of post format you want to use in your functions.php file for example:

5-post-formats
5-post-formats

6. Basic Pagination

Your themes may all have different pagination needs but beginning with the following defaults will see you well:

6-basic-pagination
6-basic-pagination

7. Content Width Definition

The content width function allows you to specify maximum widths for videos, images and other embedded content. It means that if you choose to paste a YouTube URL into the WordPress editor the CMS will automatically display the video and it won’t exceed the maximum width set, if you use the $content_width variable in your functions.php file as below.

7-content-width-definition
7-content-width-definition

8. Add Dynamic Sidebar

The theme that you’re developing will need at least one sidebar. Defining a sidebar is pretty straightforward, you simply need to add the below to your functions.php file. Doing so will register and define your “Main Sidebar”. When you want more than one you can edit the above code and register further as necessary.

8-dynamic-sidebar
8-dynamic-sidebar

These eight functions are likely to be central to all your WordPress theme developments. All developers should have them in their arsenal to get off to a quick and easy start.