WordPress, no doubt is one of the most widely used content management systems. The ease and flexibility offered by the platform are what make it the commonly preferred portal for website development. However, it might very well be easy for you to build and design websites using the platform, the large part of the coding done in WordPress is complicated. Developing or designing a WordPress theme is a long and hard work, especially for themes with theme options, widgets, semantic code, clean interface and SEO features.

WordPress coding standards

WordPress has well-established coding standards for PHP, HTML, and CSS. You need to code your WordPress themes using the following standards:

• You should use well-structured, error-free PHP and valid HTML.
• Use clean, valid CSS.
• Follow design guidelines.

Theme Stylesheet

Some of the stylesheet guidelines you need to follow:

• When authoring your CSS, you should follow CSS coding guidelines.
• Use valid CSS when possible.
• Minimize CSS hacks.
• Style all possible HTML elements: tables, captions, images, lists, block quotes, etc. by your theme, in post/page content, and in comment content.
• You can add print-friendly styles.

Theme files

WordPress themes can include three to four languages: HTML, CSS, PHP, and JavaScript.

You need to keep your resources organized. Some of the theme files organization guidelines you can follow:

• Set up template files for header.php, footer.php, sidebar.php etc.
• Keep your main template files in the theme’s root directory.
• You should give JavaScript, page templates, CSS, image, and language files in their own directory.
• You should prefix page template page-about-template.php or nest inside page-templates folder

Template hierarchy

There is a hierarchy that determines the template WordPress platform will use for each. Templates are chosen and generated based on the Template hierarchy.

You need to have a proper understanding of the hierarchy and familiarize yourself with it for theme development.

Theme localization and internationalization

The WordPress platform has been so widely adopted that the market for themes isn’t limited to a single language.

You should make your themes translation ready as WordPress makes it very easy to localize your theme.

SEO Meta tags

Meta tags provide concise information about a website or post to search engines. It will be shown on the search result pages.

Although WordPress is well SEO supported, you can still improve SEO level of your theme by using some small tips for creating Meta title and Meta description tags.

As before, the Meta description tag had been shown with under 150 characters by Google, but now its 300 characters. Thus, you will have more space to add content to that one.

How to add Meta tags to WordPress website without plugins

There are various WordPress plugins which can create Meta tags for page or post well. However, it may cause your WordPress website to be slow loading because of using too many plugins on the site.

On the other hand, adding it can be done without a plugin by following simple steps below.

Step 1: Go to wp-content/themes folder, and browse the theme folder which currently being used.

Step 2: Find and open the file named functions.php.

Step 3: Add the following code to the functions.php file.

——————————–>

function gretathemes_meta_description() {

    global $post;

    if ( is_singular() ) {

        $des_post = strip_tags( $post->post_content );

        $des_post = strip_shortcodes( $post->post_content );

        $des_post = str_replace( array(“\n”, “\r”, “\t”), ‘ ‘, $des_post );

        $des_post = mb_substr( $des_post, 0, 300, ‘utf8’ );

        echo ‘<meta name=”description” content=”‘ . $des_post . ‘” />’ . “\n”;

    }

    if ( is_home() ) {

        echo ‘<meta name=”description” content=”‘ . get_bloginfo( “description” ) . ‘” />’ . “\n”;

    }

    if ( is_category() ) {

        $des_cat = strip_tags(category_description());

        echo ‘<meta name=”description” content=”‘ . $des_cat . ‘” />’ . “\n”;

    }

}

add_action( ‘wp_head’, ‘gretathemes_meta_description’);

———————————**>

Step 4: Update the functions.php file in your theme by saving it.

If you need to add meta keyword tag, add the code below to the functions.php file. Please note that the meta keyword tag is deprecated and not widely used by search engines. So use it with your consideration.

———————————>

function gretathemes_meta_tags() {    echo ‘<meta name=”meta_name” content=”meta_value” />’;}add_action(‘wp_head’, ‘gretathemes_meta_tags’);

——————**>

Please note, the above lines of code should be added before closing tags of php ?>

Additionally, if you plan to choose a new theme, please repeat the same steps in functions.php in your new theme.

So, you have finished adding meta tags to your WordPress website without plugins.

Theme options

With WordPress theme option panel, you can change many options like Google Analytics ID, background color, header logo, codes etc.

The wp_head, wp_footer and comment_form hooks are used by many plugins. You need to implement wp_head () in the head section of the header.php file, wp_footer() in footer.php file and do_action at the end of the comment form in comments.php file.

Template files

If you want to load another template other than header, sidebar, footer into a template, you can use get_template_part(). Now, it is easy for a theme to reuse sections of code.

Test your theme

You need to test your theme before releasing it to the public.

If you’re using the theme for yourself or a client, you should run it through a testing process given below:

• You need to find and fix PHP and WordPress errors. Add define(‘WP_DEBUG’, true); to your wp-config.php to enable debug settings and see deprecated function calls and other WordPress related errors.
• You can test theme with all your target browsers, for e.g. Chrome, Firefox, Opera, Safari etc.
• Check template files against Template File Checklist.
• Validate HTML and CSS.
• You should also check for JavaScript errors if you have used in your theme.