Creative Digital Content

For anyone who ever took an interest in how WordPress themes work, you may have noticed that many of them come with an excessive amount of external scripts and stylesheets. This is usually the result of team projects. While building pieces separately and putting them together makes it quick and convenient for developers, it can really hurt you in terms of performance. If your website is slow, WordPress is not at fault. By itself, the WP engine can deliver results rather quickly when compared to other software, but a poorly optimized theme can ruin that. This guide will show you how to build a WordPress 2018 theme optimized for performance by stripping out any unnecessary components.  

Starting with a Stylesheet 

For WordPress to register your theme folder as an actual theme, it needs to contain a few core files. One of those files is style.css. You don’t have to use it for styling purposes, but it must contain the following for your theme to work:  

/* 

Theme Name: Name it 

Theme URI: exact path to your theme folder 

Author: Your Name 

Author URI: https://yourwebsite.com 

Description: Example theme 

Version: 1.0 

License: Private 

License URI:  

Tags: SEO, development, design 

*/ 

Keep in mind that you cannot rename this file. Other than that, the only other file needed for WordPress to run is an index file. However, for all the WP functions to work, you’ll also need a functions file, and to keep things convenient, a separate header and footer. 

Building Your Index File 

An index file for WordPress is almost the same as a regular html page, with a few adjustments. First, you’ll need to add wp_head(); before the closing head tag, and wp_footer(); before the closing body tag like so: 

 

<!DOCTYPE HTML> 

<html lang="en-US"> 

<head> 

<meta charset="UTF-8"> 

<?php wp_head(); ?> 

</head> 

<body> 

<h1>My Test Blog</h1> 

<section id="blog"> 

<article> 

//Post or Excerpt Content 

</article> 

</section> 

<footer><?php wp_footer(); ?></footer> 

</body> 

</html> 

The wp head and footer tags are not necessary to run WordPress, but if you don’t use them, most plugins won’t work, and you’ll have to manually add SEO meta to each blog post. 

This next part will pull post contents from your database and insert them into the page: 

<?php 

if (have_posts()) : 

    while (have_posts()) : the_post(); 

    ?> 

    <div class='short-post'> 

    <h2><a href=<?php echo the_permalink(); ?>><?php the_title(); ?></a></h2> 

    <em><?php echo get_the_date(); ?></em> 

    <?php the_content(); ?> 

    <?php comments_template(); ?> 

    </div> 

    <?php 

    endwhile; 

else : 

    ?> 

    <h2>No Posts Found</h2> 

    <p>Sorry, there are no posts yet.</p> 

<?php 

endif; 

?> 

Without any modification, your home page will show all your post content, except for comments, which are only shown on single posts. To show excerpts instead, either replace the_content(); with the_excerpt(); or go into your post editor and use the “read more” tag.  

Your index file should now look similar to this: 

<!DOCTYPE HTML> 

<html lang="en-US"> 

<head> 

<meta charset="UTF-8"> 

<?php wp_head(); ?> 

</head> 

<body> 

<h1>My Test Blog</h1> 

<section id="blog"> 

<article> 

<?php 

if (have_posts()) : 

    while (have_posts()) : the_post(); 

    ?> 

    <div class='short-post'> 

    <h2><a href=<?php echo the_permalink(); ?>><?php the_title(); ?></a></h2> 

    <em><?php echo get_the_date(); ?></em> 

    <?php the_content(); ?> 

    <?php comments_template(); ?> 

    </div> 

    <?php 

    endwhile; 

else : 

    ?> 

    <h2>No Posts Found</h2> 

    <p>Sorry, there are no posts yet.</p> 

<?php 

endif; 

?> 

</article> 

</section> 

<footer><?php wp_footer(); ?></footer> 

</body> 

</html> 

WordPress Hierarchy

You may be wondering how WordPress decides which files to use on certain posts or pages, and that’s done through a WordPress hierarchy system. For example, single.php will automatically be used to show your single posts, while index.php will be used for your home page. This is a very basic example, you can get quite creative with the WordPress template hierarchy tree.

 

At this point, you can create a theme folder in wp-content/themes/ and upload your files there. Now you can share your blog with the web through a custom theme, just log in as WP admin and go to the themes tab. However, your posts will look ugly, so let’s add some styling to improve things. You can do this by including your stylesheet the original way, but that will cause render blocking problems if it’s done in the head. The best way to go around this issue is to inline your styles like so: 

<head> 

<meta charset="UTF-8"> 

<style type="text/css"> 

* {padding: 0; margin: 0;} 

body {width: 100%; height: auto;} 

#blog {position: relative; margin: 0 auto; width: 80%; min-width: 320px; height: auto; overflow: hidden;} 

.short-post {width: 100%; min-width: 320px; height: auto; float: left; margin: 1em 0; box-shadow: 0 0 2px 2px blue;} 

footer {width: 80%; min-width: 320px; margin: 0 auto;} 

h1 {text-align: center;} 

</style> 

<?php wp_head(); ?> 

</head> 

Things look at little better, but obviously you’ll need more if you want an attractive page. 

Adding Functionality to WordPress 

If you want to take full advantage of WordPress, a functions.php file is required. To get you started, let’s add the title tag and featured image functions to your posts. Create a functions.php file and add the following at the very top: 

<?php 

function custom_theme_setup(){ 

add_theme_support( 'title-tag' ); 

add_theme_support( 'post-thumbnails' ); 

} 

add_action('after_setup_theme', 'custom_theme_setup'); 

Upload it to your themes folder. You should now have the featured image option available with all posts. The title tag function automatically pulls your post title and inserts it into the head as a meta tag, which is important for SEO purposes.  

Achieving Faster Load Speeds

Having a fast theme is not enough to deliver load speeds which most users demand today, some WordPress and server configuration will be required to achieve that. You may end up ripping your hair out if you try to achieve faster load speeds with a poorly optimized server, or one lacking resources because it’s on a shared environment. If you’re interested in having your website stand out among the rest, take a look at this article which talks about improving WordPress Performance and Achieving Load Speeds Under One Second. 

Performance Over Appearance 

On a last note, keep in mind that in most cases, the information you provide is more valuable than the appearance of your theme. However, since user interaction plays such a big factor in how long consumers stay on websites, it’s important that you don’t overlook website functionality as well. This means that load speeds, readability and ease of use should be prioritized over everything else when you build a WordPress 2018 theme optimized for performance.

One response to “WordPress 2018 Theme Optimized for Performance”

  1. Aly Chiman says:

    Hello there,

    My name is Aly and I would like to know if you would have any interest to have your website here at cdcontent.com promoted as a resource on our blog alychidesign.com ?

    We are in the midst of updating our broken link resources to include current and up to date resources for our readers. Our resource links are manually approved allowing us to mark a link as a do-follow link as well
    .
    If you may be interested please in being included as a resource on our blog, please let me know.

    Thanks,
    Aly

Leave a Reply

Design will determine how user-friendly your websites and applications are. A UI that is fast, convenient, and easy to understand is key to improving consumer interaction.

About

kirill sukharev's profile photo
kirill sukharev's University of Washington diploma
w3schools.com logo linking to kirill sukharev's certificates

Generating traffic won't mean much for your business if your conversion rate is low. I can help you with that, by eliminating web and application issues that have a negative impact on user interaction, and by filling your site with content readers actually find valuable.