Custom WordPress theme setup

Are you unhappy with the premade theme you’re currently using on your site? Do you want to be more unique and stand out from the crowd with a fancy new design nobody else has on their site? You need some special site features that your current theme doesn’t provide?

Why not develop a custom WordPress theme of your own and satisfy all of those needs? If you’ve got some coding knowledge (of HTML, CSS and PHP) and are willing to give it a shot, you’re on the right article.

What is a WordPress theme?

A WordPress theme is a collection of templates and stylesheets used to define the appearance, display, and often the layout of a website. Themes can control everything from the look of your website to the core functionalities. It’s common to think of a theme as a “skin” for your website, but they’re much more than that.

WordPress has its own selection of themes, the platform includes a number of pre-installed themes. However, there are a few reasons why you might want to choose and install a new theme on your website:

• To improve the visual appeal of your website. If you have a specific vision for your site, you can choose a suitable theme and modify it to meet your needs.
• To provide for greater design flexibility. Many themes have lots of customization options to help you create the perfect design even if you have no design or coding experience. Depending on your requirements, a theme may include elements unique to your niche that you won’t find anywhere else.
• While a theme’s basic or modified form can be used for a variety of websites, there are hundreds of themes to choose from, each addressing a specific niche or purpose.

Why create a fully custom theme then?

Most users browse hundreds of themes, both free and paid, before settling on one that speaks to them and closely resembles what they want. Most of them include modification options that allow you to tweak them to a certain level right out of the box, but the overall appearance and feel stay the same.

The main reason to create a fully custom theme is to set it up just the way you want. From the design perspective to the website features. You decide on what you need and how you’ll do it so that in the end, there will be no unused theme bloatware. Because of that, the website will run smoother and the maintenance of that website will be better in the long run. True, it will take more time to develop it and you will need some coding knowledge to do it, but it’s worth it in the end.

Some of the advantages in using custom themes:

• You have designed a theme that is exclusive to your website. It shows that your brand is unique and your clients will remember that, and that means a lot when comparing it with a thousand of websites which use the same premium theme with changed colors and images
• Because you’re using just the things you need (your needed features), the custom theme is less likely to have severe security issues or bugs. Sure, these things can always happen, even to the custom theme, but you’re not waiting for a third-party plugin/theme development team to deliver a security or bug patch. You can look for these bugs yourself and solve them quick
• Similar thing to the point before, because you’re using the things you need, the website will be faster. All of the features could be done by you so you won’t need to install a ton of plugins and there won’t be any unnecessary features left unused. The site will load up only the code it needs to be loading
• Because of the lean and clean code, the website SEO will benefit greatly from it

The custom theme setup process

#1 Environment with a clean WordPress installation

The first thing you’ll need to do is set up a clean WordPress installation, be that locally or on a web server. Once the basic WordPress installation is done, navigate to the themes folder inside the wp-content folder. You can see that the WordPress theme already comes with some preinstalled themes, try to look up these folders to see how the theme files are set up. It could help you when setting up your own theme. Back to the main theme folder, here you’ll create a folder for your own custom theme.

#2 Decide on the necessary custom theme files

Your main theme folder should hold all of the files that you want to use with that theme, from the stylesheet files, template files, and optional functions file (functions.php), JavaScript files, and images.

In short, a theme holds these three main file types:

• Presentation files (style.css) that control the visual aspects of the site
• Template files that are used to segment and display the final content to the end user in a particular way
• Functions.php file that is similar to a plugin – it is the first thing the theme loads up and it’s used to queue all of the necessary styling and scripts, define the necessary theme features and functions (menus, sidebars, data functions) and change up the admin area settings

WordPress template files

The main thing to say about the WordPress template files is that they are loaded by the WordPress template hyperarchy principle. Every time a page on your site is loaded, WordPress will search for the most specific template file available. If a template doesn’t exist, it will move down the hierarchy tree until it finds the one that does.

For example, let’s say you have a About page. The WordPress will try to load the template files in this order:

1. Find a page-author.php (page-$slug.php) and load it
2. If page-author.php doesn’t exist, find and load a page-5.php (page-$id.php)
3. In case the page-5.php doesn’t exist, load the page.php template file
4. page.php doesn’t exist, try to load the singular.php file
5. And if singular.php doesn’t exist, default back and load the main index.php file

Here is the explanation of some of the main template files:

• header.php – file used to hold the header code
• footer.php – file used to hold the footercode
• sidebar.php – website sidebar
• style.css – the main theme styling file
• index.php – the main and default page layout
• single.php – post single layout
• page.php – single page layout
• archive.php – displays a list of items in the archive, as well as the categories that the user has defined
• functions.php – used to load all of the theme assets
• 404.php – error page layout

The only two files that are absolutely necessary for a custom theme to work are the index.php and style.css files, the rest are optional.

#3 Create the main style.css file

Since style.css file is strictly necessary for a theme to function properly, create it first and place some code into it:

/*
Theme Name: My Custom Theme
Theme URI: https://yourwebsite.com/theme
Author: Your Name
Author URI: https://yourwebsite.com
Description: This is my first custom theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: <https://www.gnu.org/licenses/gpl-2.0.html>
Text Domain: my-custom-theme
Tags: custom-background
*/ 

These lines of code describe the theme to the WordPress system so it can detect it and use it through the admin area. Not all of these tags are necessary, but here is the description of them:

• Theme name – a theme name that has to be provided
• Theme URI – if it exists, it will route the users to a page that descripts the theme in more detail
• Author – theme author name
• Author URI – theme author personal website
• Description – theme description that’s visible in the wp-admin theme selection screen and in the WordPress theme repository
• Version – theme version control number that lets the users know if they’re using the latest theme versions
• License – theme licensing. If you choose a non-GPL compatible license, you won’t be able to sell it on the WordPress repository
• License URI – license link
• Text domain – used when translating the theme to different languages
• Tags – descriptive tags used on the WordPress theme repository

#4 Create the main index.php file

This file is the default page layout. For example, it could look like this: 

<?php get_header(); ?> 
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> 
        <h2><a href=”<?php the_permalink() ?>”><?php the_title() ?></a></h2>
        <?php the_content() ?>
    <?php endwhile; 
          else : echo ‘<p>There are no posts!</p>’;
          endif; ?>
<?php get_footer(); ?> 

Index.php has three main parts. The get_header, get_footer hooks and the main page loop. The page loop loops through all of the pages if the pages exist, prints out the page title (linked to its URL) along with the page content. If there are no pages, a “There are no posts” message will be displayed. The header and footer hooks load the header.php and footer.php files respectively. These files contain the header and footer layouts which will be used for all of the pages. An example header.php file:

<!doctype html> 

<html <?php language_attributes(); ?>> 

    <head> 

        <meta charset="<?php bloginfo('charset'); ?>"> 

        <title><?php wp_title();?></title> 

        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 

        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

        <meta name="description" content="<?php bloginfo('description'); ?>"> 

        <?php wp_head(); ?> 

    </head> 

    <body <?php body_class(); ?>> 

    <header> 

        <nav> 

            <?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?> 

        </nav> 

    </header> 

An example footer.php file:

    <footer class=”page-footer”> 
        <?php wp_nav_menu( array( 'theme_location' => 'footer-menu' ) ); ?> 
    </footer> 
    <?php wp_footer(); ?>  
</body> 
</html> 

#5 Create a functions.php file

Start by creating a file and queueing the main.css file so the theme can detect your website styling. Aditionally, turn on the page tumbnails feature inside the wp-admin area.

<?php 
function my_custom_theme_enqueue() { 
    wp_enqueue_style( 'my-wordpress-theme', get_stylesheet_uri() ); 
} 
add_action( 'wp_enqueue_scripts', 'my_custom_theme_enqueue' ); 
add_theme_support( 'post-thumbnails'); 

#6 Activate the theme

With the previous steps done, go to the wp-admin theme selection screen and activate the theme like any other theme (be that a free or a premium one).

That’s it, you’ve just set up a basic custom theme. This article is just scratching the surface of it, continue learning and developing from this, the end result is worth it!