How to Develop a Custom WordPress Theme


Published at wordpress theme management by saelvizhi on 20th Apr 2023

WordPress is used by about 34.7% of all websites, making it one of the most popular open-source content management systems globally. It has tools for building sites and lets you add different features through plugins and other tools that change the layout, improve performance, and ensure your audience has a good time.

Table of Contents

1. Requirements for creating a Custom WordPress theme
2. Primary steps in developing a Custom WordPress theme
    Create a folder that will accommodate the documents that you’ll add
    Create the style.css and index.php files
    Change the settings for the index.php file
    Add header and footer
    Create a folder named functions.php
3. Conclusion

1. What are the requirements for creating a Custom WordPress theme?

To make a Custom WordPress theme, you need a setup for development that includes Apache, PHP, MySQL, and WordPress. WordPress can be downloaded from the official website, but the database credentials must be updated.

You also need to understand how the Custom WordPress theme is put together. In essence, a WordPress theme is just a normal page made in HTML. It is made up of the same files as any other page:

header.php holds the code for the header;

footer.php has the code for the footer;

sidebar.php is the place where the buttons that are added to the side of the page are set up.

style.css is the file that controls how the theme looks;

index.php has the settings that are shown on the home page;

single.php has codes that indicate the article on its page;

page.php is a file that has codes that offer the content of one page;

archive.php shows a list of the articles in the archive and the categories that the user has made;

functions.php is where some functions that give themes more features, like the logo, menus, colours, thumbnails, scripts, and stylesheets, are stored.

404.php is an error code that means the file you requested could not be found.

To customize your template, you will also need to add some Bootstrap settings.

2. What are the primary steps involved in developing a Custom WordPress theme?

These are the steps to be taken to make a Custom WordPress theme that can then be changed.

2.1 Create a folder that will accommodate the documents that you'll add

If we make a new Custom WordPress theme, we must understand where the files will be in your local installation. This is relatively simple.

We know that a WordPress installation typically includes a root directory or WordPress. The files and folders we will show you below are in this directory.

Files:

composer.json

index.php

license.txt

readme.html

wp-activate.php

wp-blog-header.php

wp-comments-post.php

wp-config.php

wp-config-sample.php

wp-cron.php

wp-links-opml.php

wp-load.php

wp-login.php

wp-mail.php

wp-settings.php

wp-signup.php

wp-trackback.php

xmlrpc.php

Folders:

wp-admin

wp-content

wp-includes

We are looking for the wp-content folder, where themes and plugins are kept. Inside is a folder called "themes," which must have all your WordPress site's themes, including the one you'll make so that the CMS can see the new settings.

 

wp-content Folder

There are already three other folders with three standard themes from WordPress in the themes folder. You must also make another folder, which you can call anything.

In the example shown below, the name of the folder is a custom theme. The new WordPress theme will then be made from there.

Custom Theme

Your new theme must be in the "themes" folder. Therefore, it can be activated and used online.

2.2 Create the style.css and index.php files

For the Custom WordPress theme to work, it needs a particular set of files. Make two files in your new folder under Themes

  • style.css is a WP demo file containing information about the author, repository, and theme version.
  • index.php is the main file WP uses to load the posts shown on the screen. It is also used by wp when there is no WP base file.
Index.php

style.css

Style.css is a required and declarative CSS file for all Custom WordPress themes. It is in charge of the presentation of the website pages, including the visual design and layout. You will put information about the theme in this file, such as the theme's name, author, author page, and version number. For example, since we are not updating a Custom WordPress theme but making one from scratch, we can give it version 1.

/ *

Theme Name: name of the theme (this name will show up on the list);

Theme URI: the website that can be created to demonstrate the functionalities of the theme; it can also contain a form for people to be able to buy it;

Author: write your name, so people can contact you if they are interested in your theme;

Author URI: if you have your website, you can add it to this line of code;

GitHub Theme URI: it's interesting to add the theme on Github so that users can add new features, suggest improvements, and answer questions in that collaborative environment, for example;

Description: add information about the theme, if it's suitable for a specific type of business, blog, e-commerce, etc.;

Version: 1.0.0;

Text domain: it's essential to translate the theme into other languages.

* /

index.php

This file is in charge of making a list of all the blog posts. To show them on the screen, you need to use WP functions. Developers are used to connecting to databases and making queries to get the content and reveal it, but in this case, there are already built-in functions in WordPress.

Make the index.php file and type anything on the command line to see if it shows up when you activate your theme.

Hello world!

or

Custom Theme!

like in our example below:

Custom Theme

Activate the Custom WordPress theme in the WordPress dashboard:

Open the WordPress dashboard and activate the theme.

Go to the WordPress Dashboard, click "Appearance," then "Themes," and see if the theme you just made is one of the options shown.

Activate Custom WordPress Theme

Click "Theme Details" to see if the information you put into the style is correct. The CSS file works fine.

custom theme

Click "Activate" to have WP activate the new theme, and then check the website to see if the settings have been applied.

2.3 Change the settings for the index.php file

To see if your Custom WordPress theme works, return to the index.php command line and delete the text, you wrote. Now, you need to write a command line that tells WP to get the posts from the database and send them to the page.

The goal is to return the post's title and content so all files can be seen on the home page.

The "have_posts" command tells WP to look for blog posts in the database. The page will show the posts if there are any. If not, the message we put in the code for the negative response condition will be shown. (False).

Have Posts

A function called "the_post" must be added to the while do loop "have_posts" so that WP displays that file whenever the "have_posts" condition is met. WordPress checks for new posts through this loop and puts them on the page as needed.

In practice, it works like this: if there are posts in the database, all commands inside the loop will be run for all post files found as long as they are found. If there are no posts, the WP will tell the user there are none. Check out the code:

if ( have_posts() ) :

while ( have_posts() ) : the_post(); ?>

”>

 

 else :

echo ‘

There are no posts!

’;

 endif;

?>

In this loop, the functions "have_posts" and "the_post" are used in their most basic form. The "have_posts" function lets you know if any postings are to repeat in the database. This function will return either true or false. If it returns true, it means there are posts to show. If it comes back wrong, there aren't any.

The "the_post" function gets the most recent post and sets it up so that it shows up on the theme page in the correct order. Since this is done in a loop, if the function returns true, a new post will be added automatically whenever there is one.

The "the_content" function adds the file's content to the page's title. The "the_permalink" function matches a link to each post so the user can access the content independently, and the full text doesn't appear on the home page.

Put the "the_excerpt" function in place of "the_content" if you want to put the first 200 characters of the file's content in a summary under the file's name. So, the user can only see the whole text when they click on the link.

In this case, you will need to make a new file in your theme's folder that is similar to "index.php" (even with the same line of code, just copy and paste the index.php loop and change the "the_excerpt" function to "the_content").

2.4 Add header and footer

The next step is to add new files to the same folder as your theme, where you placed the files style.css and index.php. They are known as header.php and footer.php.

Add Header and Footer

The wp_head function, which is a special one that completes the output in the head> section of your header.php file, should always be present in your Custom WordPress themes. It should go before the closing /head> tag, mainly to make adding plugins to the site more accessible. Plugins can use this hook to add styles, scripts, or Meta elements to the head> area.

Footer.php:

The footer.php file can close the tags used by the functions, as follows:

Footer

2.5 Create a folder named functions.php

The custom WordPress theme now has four file folders: index.php, style.css, header.php, and footer.php. The following file you should make is called functions.php. It gives WordPress a personality because its command line can change how the CMS usually works. It is made up of the following things:

  • It does not need a unique header text; 
  • It only works when the theme directory is turned on;
  • Only applies to the theme at hand;

This code will add the style sheet for your custom theme or turn it on:

custom theme assets

3. Conclusion

A creative thinker will always welcome a new challenge. If this is the case, creating Custom WordPress themes is a more exciting and challenging endeavour. You can accomplish this with the help of several platforms. Among them, WordPress stands out. WordPress makes it simple to create a custom theme. 

This tutorial is straightforward to follow because it was written with newcomers in mind. You'll find this to be very useful to create a custom Wordpress theme.