Bookmark and Share

The Must Have Features In A New WordPress Theme

The wordpress.org and other third-party theme galleries have uncounted number of WordPress themes. Users often ask which one to select and which one to leave. A good Theme Designer must focus on the latest users’ requirements and build a theme to address the same. If you are going to build a WordPress theme or already have built it, then this article is dedicated to you.

We have listed following critical and the most important features needed in a WordPress theme. Please have a look on the same before designing or launching a theme.

1. Introduce & Test Right-To-Left Support

It is quite necessary to provide the right-to-left support in your WordPress theme. You can add rtl.css to override the language variables and functions mentioned in style.css only when WP_LANG variable of settings.php is set to any right-to-left language like Hebrew or Arabic.

define (‘WP_LANG’, ‘ar’); //ar for Arabic

Following is an illustration of the necessary change in rtl.css: -

body {
direction: rtl;
Unicode-bidi: embed;
}

Please remember not to reiterate each style from style.css to rtl.css. You just need to change required styles needed while reading from right to left. We suggest you to get familiar with the bidirectional algorithm and Unicode to get expertise in R-to-L implementation. You can also visit Wikipedia, Twitter, and Facebook in Arabic or Hebrew. Also give a peek at Al Jazeera – the famous Arabic News Website.

2. Hide Comments On Protected Posts

WordPress users can apply password protection on selected posts. The visitors are supposed to enter registration details like username and password to read protected posts. As a Theme Designer, you are required not to display comments on such posts. Make sure whether you have included following coding lines in comments.php.

<?php if ( post_password_required() ): ?>
<p><?php _e( ‘This post is password protected. Enter the password to view and post comments.’ , ‘mytheme’ ); ?></p>
</div>
<?php
return;
endif;
?>

3. Include and Style Default Widgets

Few theme designers do not include the default widgets of WordPress like Calendar, Category etc. and the users really miss them in their blog. Therefore, we will recommend you including the default widgets as well as to style them according to your theme.

4. Attachment.php – To Show Attachments Properly

The bloggers add attachment using following toolbar while composing a post in WordPress.

The attachment.php is used when visitors click on attached file like image, audio, video, or any other file.

If there is no attachment.php or any other template then browser displays file using any plug-in. So, what is the advantage of attachment.php? You can use this php file to show an attached image at full size in a new or same window/tab.

For example, TwentyTen theme include following lines in attachment.php.

1. if ( wp_attachment_is_image() ) {
2. echo ‘ <span>|</span>  ‘;
3. $metadata = wp_get_attachment_metadata();
4. printf( __( ‘Full size is %s pixels’, ‘twentyten’),
5. sprintf( ‘<a href=”%1$s” title=”%2$s”>%3$s × %4$s</a>’,
6. wp_get_attachment_url(),
7. esc_attr( __(‘Link to full-size image’, ‘twentyten’) ),
8. $metadata['width'],
9. $metadata['height']
10. )
11. );
12. }

5. Post Pagination

The WordPress bloggers often need pagination in their posts to enhance the readability and provide better visitors’ experience. Noteworthy that post pagination is not included in WordPress by default. Therefore, you should include Post Pagination in your theme. You can include wp_link_pages with following code in loop.php

wp_link_pages(array(‘before’ => ‘<p><strong>Pages:</strong> ‘, ‘after’ => ‘</p>’, ‘next_or_number’ => ‘number’));

The users can include following code:

to include pagination
<!–nextpage–>

to display pagination
<strong>Pages:</strong> 1 2 3

Visitors can click the page numbers to visit subsequent pages.

6. Make sure to include wp_head() and wp_footer()

Cross check whether you have included wp_head() before closing <head> tag and wp_footer() before closing body tag. Most of the plug-ins and features will not work if you miss to include both of these functions.

7. Custom Fields

Customization plays an important role in the success of any software or WordPress theme. You can provide the option to include custom fields on each post. Call “the_meta()” function in loop.php to display all the attached custom fields on each post in an unordered list.

8.    Enable Custom Backgrounds

The WordPress 3.0 allows theme designers to provide custom background options. Prefer this option by including “add_custom_background()” function.

9. Custom Menus

Another exciting feature of WordPress is support for Custom Menus. You can include custom menu support with following code:
register_nav_menu( ‘main_nav’, __( ‘Main navigation menu’, ‘mytheme’ ) );

Now, use following code to display custom menus:
wp_nav_menu( array( ‘theme_location’ => ‘main_nav’ ) );

We advise you to make a plan before including the main and sub menus. In addition, you should limit the drop-down menu levels. You can use following code to set menus’ depth level to 4 -

wp_nav_menu(array (‘depth’ => 2));

10. Stylize Inbuilt Editor

Give a new look and feel to the inbuilt default WordPress editor. You can include editor-style.css to modify the outlook of TinyMCE editor. This step is an easy one as you just have to match the typography mentioned in main style.css. If you are using rtl.css to support right-to-left languages then create editor-style-rtl.css with code for typography features like paddings, margins, lists, tabs, etc.

11. Threaded Comments

The proper arrangement of comments is quite essential for a WordPress theme designer. We advise you to include threaded comments as these consumes less space, and have options to distinct replies from comments, display reply buttons, comment body, comment names, avatars, commenter’s name etc. Noteworthy that you do not know how much level of replies it will handle. You also have to make sure that

•    Replies are clearly distinguished with comments,
•    ‘Cancel Reply’ link or button is properly positioned,
•    Comments render appropriately without mashing,
•    Avatar’s layout is enabled for commenter, and
•    Threaded Comments do not overflow their container’s boundaries.

12. Thumbnails

Most of the themes rely on plug-ins to support thumbnails. You can include following code in functions.php to support thumbnails: -

add_theme_support( ‘post-thumbnails’ );
set_post_thumbnail_size( 70, 70 );

The thumbnails of different sizes can break the post layout. You can modify second code line as following to crop the images as per selected size

set_post_thumbnail_size (70, 70, TRUE);

Use following code to create additional thumbnails of different sizes,
add_image_size(‘big-thumb’, 500, 500)

Please note we have applied a name to the thumbnail in above code. Use following code to display name-attached and latter for default thumbnail (without any name)
the_post_thumbnail(‘big-thumb’);
the_post_thumbnail();

13. Custom Headers

You can also allow the users to customize the headers as well. However, you have to modify few constraints to enable custom headers in your theme. You can use following code for the same after mentioned constraints with proper measurements like stylesheet_directory, path/to/image, designerwidth, and designerheight.

define( ‘HEADER_TEXTCOLOR’, ’000′ );
define( ‘HEADER_IMAGE’, get_bloginfo( ‘stylesheet_directory’ ) . ‘path/to/ image’ );
define( ‘HEADER_IMAGE_WIDTH’, ‘designerwidth’ );
define( ‘HEADER_IMAGE_HEIGHT’, ‘designerheight’ );

We recommend you inserting following code in header.php to inform about the CSS being used to enable custom headers.

<?php
function mytheme_header_image() {
?>
<style type=”css”>
#header { background: url(<?php header_image(); ?>) no-repeat; }
</style>
<?php
}
?>

In addition, you have to create a function having following lines to style preview pane in admin console for matching the results. We suggest you to experiment the preview until you finalize the design.

add_custom_image_header( ‘mytheme_header_image’, ‘mytheme_admin_preview_header’ );

14. Enable Translation

The translation service is quite necessary if a blogger wants to address the visitors from different countries and states. You can wrap user readable strings with _e() to echo/print it and _() to translate it.

_(‘Sample String’, ‘designertheme’) // to enable translation
_e(‘Sample String’, ‘designertheme’) // to print translation

After wrapping of each string, create makepot.php. You can download and install Subversion to get this script using following command:

Svn co http://svn.automattic.com/WordPress-i18n/tools/trunk

Now, you will need a directory ‘trunk’ containing makepot.php and others. You can use following script line
php makepot.php wp-theme <themename>

You can replace <themename> with the name of your theme. The next step is to provide a pot file to have translations like <themename>.pot. You can Poedit like program to create a pot file.

Use following code to inform WordPress where to live the translations in theme directory.
load_theme_textdomain( ‘themename’, TEMPLATEPATH . ‘/languages’);

15. Use WordPress.org Theme Unit Test

You can use the sample content file of WordPress.org to test your theme. Import WordPress installation to this file and then apply your designed theme. Test each and every aspect of your theme to make it further amendments.

Resource Box:

In nutshell, the Theme Designer must focus on the customization options to provide additional functions to theme users. Not only the designer has to test the designed theme properly but he/she also has to be ready for future changes.

Technology keeps changing rapidly, therefore we advise you to launch updates for your themes after fixing bugs, and modifying it address users’ latest requirements.

Related Posts

  • Evolution of HTML and CSS in the Modern Era Everyone is on familiar terms regarding the significance of Cascading Style Sheets (CSS) & the use of Hypertext Markup Language in web development. Few advantages of using this language when bu...
  • Easily Customize WordPress’ Default Functionality The absolute best thing about WordPress is how flexible it is. Don’t like the theme? Just change it. Need added functionality? There is probably a plugin you can download or buy. If not, build it y...
  • Advent of HTML5 – A Boon for Web Designers The future of the web is here and you can embrace it, reject it or forget that there is such a thing as upgrading to the latest version of your browser. Either way you look at it the internet is g...
  • WordPress 3.0+ in a Nutshell The hottest edition of WordPress is on the rampage and is available easily all over the web. Initially when it was released into the market it lashed out its rough & geared up beta edition. In ...

Leave a Reply

Current day month ye@r *