How to Create WordPress Themes From Scratch

If you're looking to create your own unique WordPress themes, this guide will show you everything you need to know, from start to finish.

If you're proficient at using CSS and HTML and are comfortable with a bit of PHP, it's not all that hard to build custom WordPress themes. WordPress themes have several components, some are required while others are optional.

The required files are style.css which contains all the themes style sheets, but also serves to identify the theme. The other required file is functions.php which contains all the theme's custom PHP codes.

Bare Minimum WordPress Themes

At a bare minimum, you should create a theme folder, which contains the above two files. You should leave functions.php as a blank file, and in the style.css file, add the following lines.

/*
Theme Name: Test Theme
Author: Tim Trott
Author URI: https://timtrott.co.uk/
Description: Test theme for a tutorial
Version: 1.0
*/

Connect to your site via FTP and navigate to the /wp-content/themes/ folder. Create a new folder for your theme then upload your styles.css and functions.php.

In WordPress you can now activate your newly created theme by clicking on the appearance menu and selecting theme. When viewing your site, you'll note that it looks like the default theme. This is because themes inherit from the base theme. Your new theme will replace the header, footer, sidebar content and CSS as required, and if you don't it will use the default file.

When creating your theme, the following files are some of the files that you can create to hold your custom theme, or you can copy them from the default theme and modify them as required.

• index.php - The core file that loads your theme, the header, the footer, the sidebars and archive templates. It also acts as the homepage if you have not set a static page.
• header.php - Contains the header of your site and usually the navigation menu
• footer.php - Contains the site footer, copyright information, scripts and so on
• sidebar.php - Contains the sidebar content and widget areas
• single.php - Template for viewing a single post
• page.php - Template for viewing a single page
• archive.php - Template for viewing archives, such as date-based listings and category listings.
• search.php - Template for search results
• comments.php - Template for listing comments and the comment form
• 404.php - Template for displaying the 404 - Not Found message

In addition to these files, several more specific files are optional and used only if they are present. If they are not present, then one of the files above is used instead.

• home.php - The homepage template, uses index.php if not specified.
• single-{post_type}.php - template for viewing a custom post type, uses single.php if not specified
• page-{slug}.php - Template for a specific page slug, uses page.php if not specified
• page-{id}.php - Template for a specific page id, uses page.php if not specified
• category-{slug}.php - Template for a specific category slug, uses category.php if not available
• category-{id}.php - Template for a specific category id, uses category.php if not available
• category.php - Template for category listing, uses archive.php if not availabe

The same rules apply to tags, taxonomy, authors and so on. The full list can be seen on the WordPress codex site .

Structure of WordPress Themes

If you are not familiar with the layout of an HTML document you may find the article on the anatomy of a web page helpful.

Each of the themes files contains the HTML content and structure, while the style.css contains the presentation. The theme files also use PHP for dynamically generating content as well as certain template tags. These template tags are PHP functions built into the WordPress core which output specific aspects of the site, from a post title to the comments form.

Common Template Tags in WordPress Themes

Here is a list of common template tags that can be used in your template.

• home_url()  - Gets the url of the website homepage.
• single_post_title()  - Gets the post or page title
• single_cat_title()  - Gets the category title
• category_description()  - Gets the category description
• get_permalink()  - Gets the current post hyperlink, you can specify a post id to get the URL for that post instead.
• the_content()  - Gets the post content
• the_excerpt()  - Gets the post excerpt / introduction
• is_single()  - Conditional tag which tests if the current URL is a post. You can specify a post ID to test if the current page is the specified page.
• is_page()  - Conditional tag which tests if the current URL is a page. You can specify a post ID to test if the current page is the specified page.
• is_search()  - Conditional tag which tests if the current URL is the search results listing.
• is_archive()  - Conditional tag which tests if the current URL is a page is the archive page
• is_category()  - Conditional tag which tests if the current URL is a category listing

The full list of template tags can be found on the WordPress codex  site.

What is "The Loop" in WordPress Themes?

One of the core sections of code you will encounter when developing themes is that of "The Loop". In its most basic form, the loop will loop through all posts matching the criteria of the page being viewed. It could be a date-based listing, a category listing or a single post or page. They all come from the loop. The loop generally goes in the index.php file.

The basic loop looks like this:

if (have_posts()) 
{
  while (have_posts()) 
  {
     the_post(); 
  } 
}

Based on this you can use template tags to test various conditions and output as required.

A more complex loop example looks like this:

<?php if ( have_posts() ) : ?>

    <?php twentyeleven_content_nav( 'nav-above' ); ?>

    <?php /* Start the Loop */ ?>
    <?php while ( have_posts() ) : the_post(); ?>

        <?php get_template_part( 'content', get_post_format() ); ?>

    <?php endwhile; ?>

    <?php twentyeleven_content_nav( 'nav-below' ); ?>

<?php else : ?>

    <article id="post-0" class="post no-results not-found">
        <header class="entry-header">
            <h1 class="entry-title"><?php _e( 'Nothing Found', 'twentyeleven' ); ?></h1>
        </header><!-- .entry-header -->

        <div class="entry-content">
            <?php _e( 'Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.', 'twentyeleven' ); ?>


            <?php get_search_form(); ?>
        </div><!-- .entry-content -->
    </article><!-- #post-0 -->

<?php endif; ?>

This is actually the lop from the default twenty-thirteen templates.

The first line tests to see if there are any posts to show. If there are no parts, then a message is shown stating that nothing was found. This is the basic 404 page.

If posts are found then we hit the loop itself which calls the_post(). This function sets up the post data and loads all the information about the post into a variable called $post. Within the loop, the function get_template_part is called, which in turn loads in the appropriate theme file (single.php, page.php, archive.php etc...)

By investigating the default templates you should now be able to start customising your theme and make your website look unique.

Remember: Do not alter any of the core files, or the files within the default themes as any changes will be overwritten when you update WordPress to a newer version.