QUICK OVERVIEW OF WHAT IS COVERED:
- #1: Stylesheet Headers
- #2: Stylesheets
- #3: Cross Browser Compatibility
- #4: Page Templates
- #5: Style Elements
- #6: Standard CSS Classes
- #7: CSS & Markup Validation
- #8: WordPress Code
- #9: Blog Elements
WordPress comes with default themes during the initial installation, so it is advisable to refer to these default files before starting, so that you get a decent idea about developing your own theme.
Under this section of the checklist, you will find some of the basic header settings related to the theme name, URI, version, etc, which will need to be in place before you move on to the more technical part.
You will also need to make sure that your stylesheet provides details about the theme in the form of stylesheet headers.
/* Theme Name: The Name of your theme * Theme URI: The URL for more information * Description: Theme Description * Version: 1.0 * Author: Your Name * Author URI: Your URL * Tags: Red, black, widget‐ready etc * Template: If you are building a child theme*/
The stylesheet is responsible for the visual design and layout of the theme. That is why, it is very important that you pay special attention to the style.css file.
In addition to that, you also need to make sure you maintain the other CSS files in a separate CSS folder.
- Theme Preview Image (screenshot.jpg/screenshot.png/screenshot.gif)
- Widget Ready Sidebars
- Add Rules to your Comment form
- Backwards Compatibility (WordPress 2.5 +)
- Add Sample Posts
- Use sprite images
- Compress the image size.
- Properly indent the Css and js code
While developing a WordPress theme, one of the most important things to ensure is that your theme is fully compatible with the latest versions of all the major browsers.
- Internet Explorer 9, 10, 11
- Google Chrome
Page templates are responsible for the appearance and layout of the page. They are highly specific and generally target an individual page on the website.
Also, naming the page templates gives the WordPress users who are editing the page more control over those specific templates. This section covers all the steps related to the template pages.
Now, before you go ahead, you need to make sure you have styled all the page elements including titles, images, videos, tables, etc, appropriately.
- h1, h2, h3, h4, h5, h6
- Unordered lists
- Ordered lists
Next thing you need to do is make sure that all the images on your website are aligned properly. The CSS Classes were introduced in WordPress for this purpose.
WordPress 2.5 introduced many classes for aligning images and block elements (div, p, table, etc.), like alignleft, aligncenter, alignright. And if you need to align or style the images separately, you can use alignnone.
Similarly, the same CSS classes can be used for aligning images with captions.
- .aligncenter, div.aligncenter
- a img.alignright
- .wp-caption img
- a img.alignnone
- .wp-caption p.wp-caption-text
- a img.alignleft
- a img.aligncenter
Now, you need to validate your CSS using the CSS Validation service. In the same way, also validate your HTML with the Markup Validation service.
Add alt attribute to image tag
- The other templates.
- With/without Comments
- Login Required
- Password Protected
The tags mentioned here are life savers when it comes to developing custom themes. Therefore, it is important that you have proper tags for all the different elements of your web pages in place, as shown below.
<?php include(TEMPLATEPATH . ‘/x’); ?> <?php the_time('m‐d‐y') ?> <?php /* Template Name: X */ ?>
<?php get_template_directory_uri(); ?> or <?php bloginfo('template_url'); ?>
<?php define('VARIABLE','VALUE') ?>
for constant value
[For eg: Version 1.1 or Template directory link]
<?php if(have_posts()) : ?> <?php while(have_posts()) :the_post(); ?> <?php endwhile; ?> <?php endif; ?> /%category%/%postname%/
For eg: is_page('PAGE_NAME') is_home() is_front_page() is_single('POST') get_post_type( get_the_ID())=='POST_TYPE'
Finally, ensure that all the style elements of your blog are taken care of, and you are good to go!
- Navigation of Pages
- Copyright message
- Navigation of Categories/Tags
- Past/Next links
- RSS links
- Back to Top link
- Search Form
- Archives links
- Add Function to unlink the links from the comment and add rel=”no_follow” attribute to the links while submitting the form
- Social Sharing Links
- Google Re-captcha on the Comment form