WordPress template creation steps
In this article, we have taught 8 steps to create a WordPress theme along with important tips for creating a custom WordPress theme
The WordPress theme consists of various components and to learn how to create a WordPress theme, stay with KeyUpSeo.
There are many free templates created for WordPress websites, but some are interested in development and want to create 0 to 100 custom jobs.
Also, you should be familiar with important points in website design to design a suitable look for your template.
In this KeyUpSeo WordPress article, we explain to you what each of the files do and how to create an optimal WordPress template.
Creating a WordPress template
If you want to know how a WordPress theme works, you need to start from scratch.
We guide you to know how to add all the codes you need and create your WordPress theme. In the end, you will get to know the relationship between different WordPress files, and you can add your desired features to the template.
Install a code editor before starting
To be able to manage and edit our codes easily, we need a code editor. Choose a code editor and install it based on the features you're looking for and the software you're most comfortable with.
-
Create a folder for WordPress files
When you upload the WordPress content file to your host, several folders and files are placed on your host, which are WordPress content. So first, download the latest version of WordPress and upload it to the public_html folder or any folder of your choice. If you have already installed WordPress, you do not need to do these steps. Your WordPress content should include the following folders and files:
The folder we deal with the most is the wp-content folder. Inside this folder, there is another folder called themes, where all the templates you want to install on your site are placed in this folder.
By default, WordPress has placed 3 templates in this folder, which we do not need. Now in the themes folder, create a new folder and give it a desired name; This name will be the name of your template.
We used the name Keyupseotheme for our WordPress theme.
-
Create style.css and index.php files
After you create your template folder, inside this folder, create two separate files called style.css and index.php.
Now open these files using your code editor. In the following, we introduce these two files.
Style.css
It is an essential file for any WordPress theme that contains the appearance guidelines of the site. Also, WordPress calls the template information from this file.
In this example, we have included the template name, developer name, developer address, and template version. You also put the following piece of code in the style.css file.
/*
Theme Name: Keyupseotheme
Author: KeyUpSeo
Author URI: https://keyupseo.com
Version: 1.0
*/
Index.php
In this file, we will now put the code to show that our custom WordPress theme works well. Place the following code snippet in this file and save the changes.
<h1>KeyUpSeo Theme!</h1>
You have now created your custom WordPress theme.
-
Activating the template from the WordPress counter
Enter the WordPress dashboard and enter the Themes section from the Appearance section. You will now see your new template in the list of templates.
You can click on the skin details button to make sure that the information we wrote about the theme in the style.css file is displayed correctly.
Now click the activate button to activate your skin. After activating the skin, take a look at your site. I know, it doesn't look very good, but it's a good place to start designing and building a custom WordPress theme.
-
Adding codes to display the title and text of the posts
As you know, we can publish a lot of posts and articles on our WordPress site. These articles are stored in databases, and we need to call them. Currently, only one phrase is displayed on the main page of the site. Next, we want to add the title and text of the site's articles to the main page.
For this, we need to use the WordPress ring. But you may have a question, what is a WordPress ring? WordPress Ring is the engine that runs WordPress. Using this loop, WordPress developers can display articles on any page they want. All this is done with the following PHP code snippet:
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php endwhile; else : echo ' There are no posts! '; endif; ?>
In the simplest case, this loop uses two functions; One has_posts() and the_post(). Another has_post() check if there is a post to display. The answer is true or false, if it is true, there are posts to display, and vice versa. The_post() function has no response and just prepares WordPress to display posts. With the above code, nothing will be displayed on your site and it was only the initial code. Now you need to put the following code snippet in your index.php file. Delete the code you wrote earlier in this file and replace the new code.
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h2><?php the_title() ?></h2>
<?php the_content() ?>
<?php endwhile; else : echo ' There are no posts! '; endif; ?>
Now you are familiar with two other functions of WordPress.
The_title () function displays the title of the article and the_content () function displays the content of the article. This will be done for as many articles as there are in your database, and all of them will be displayed. If you look at your site, you will notice that everything is going well to build the WordPress theme.
-
Add a link to each post
If we want to put a separate link for each one instead of seeing the posts only on the main page and allocate a page for each one, we have to use another function of WordPress.
For this, we can use the_permalink() function. Now, you can replace the following code snippet in the index.php file.
<?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 ' There are no posts! '; endif; ?>
Now the title of the articles will be linked and by clicking on each one, you can enter the page for that article.
SEO Tip: You can use Keyupseo site traffic packages to improve the SEO of your website content and articles. You can see the traffic package price on this page.
-
Adding header and footer to the template
Just as the display of articles is important in creating a WordPress theme, the display of Header and Footer is also very important. These parts will be displayed on all pages of your site and are an essential part of all sites.
To display the header and footer on WordPress, we use functions. There are two functions get_header() and get_footer() for this. Therefore, replace the previous codes in the index.php file with the following code and save the changes.
<?php get_header(); 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 ' There are no posts! '; endif; get_footer(); ?>
In the header, the name of the site and a brief description of the site will be displayed, and in the footer, we will also see the famous WordPress phrase. But if we want to use other content in these two areas and somehow personalize it, what should we do?
Creating 2 new folders for the dedicated WordPress theme
So far, we created two files style.css and index.php in the template folder. Now, itobe able to customize the content of the header and footer in creating a WordPress template and have more options, we need to create two more files named header.php and footer.php in the WordPress template folder.
The job of these two files is to display the content we want in the header and footer of the site. From now on, if you use the get_header() and get_footer() functions, the content of these two new folders will be called, and if you open your site once again, you will see that the header and footer sections of the site are not displayed; Because header.php and footer.php files are currently empty.
Working with header.php
This file is very important; Because the open HTML and body tags are placed in this file. Also, if you want to use site statistics services such as Google Analytics, you must put the relevant codes in this file when creating the WordPress template. Because all the pages of your site will be called this file.
Some new functions are used in the following code snippet, pay attention to them as well. Put the following code in the header.php file and save the changes.
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<title><?php bloginfo( 'name' ); ?></title>
</head>
<body <?php body_class(); ?>>
<header class="site-header">
<h1><?php bloginfo( 'name' ); ?></h1>
<h4><?php bloginfo( 'description' ); ?></h4>
</header>
Insert () wp_head
The wp_head () function is one of the important functions of WordPress. The job of this function is to put the output in the head tag. This becomes important when you want to use different WordPress plugins. Many plugins must use this function to put their data in this tag to do their job well. So you need to put this function in the header.php file. To do this, replace the following code with the previous codes:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<title><?php bloginfo( 'name' ); ?></title>
<?php wp_head() ?>
</head>
<body <?php body_class(); ?>>
<header class="site-header">
<h1><?php bloginfo( 'name' ); ?></h1>
<h4><?php bloginfo( 'description' ); ?></h4>
</header>
Complete the footer.php file
So far, we put the information we needed in the header.php file; Now we have to complete the foot part. You must remember that the header.php file had two open tags, HTML and body. Now we need to put their closed tag in the footer.php file and also add the wp_footer() function. Put the following code in the footer.php file:
<footer class="site-footer">
<?php bloginfo( 'name' ) ?>
</footer>
<?php wp_footer() ?>
</body>
</html>
The main use of functions on WordPress
Maybe you also have a question, why should we use functions? The answer is that we don't need to edit different codes to change site information all the time. Maybe you want to change the slogan of your site; For this, you will go to the WordPress counter and replace the previous text with the new text and the new text will be displayed automatically. The reason it is displayed automatically is because of the use of functions. This case becomes especially important when you want to present it to others after creating a WordPress template, each of which has its site name and their information is different from each other.
Linking the title of the site to the main page
On many sites, when you click on the site title, you will be taken to the home page of the site. To add this feature to your custom WordPress theme, replace the following code in the header.php file:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<title><?php bloginfo( 'name' ); ?></title>
<?php wp_head() ?>
</head>
<body <?php body_class(); ?>>
<header class="site-header">
<h1><a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<h4><?php bloginfo( 'description' ); ?></h4>
</header>
-
Create functions.php file
So far, we have created 4 files in our template folder to create a WordPress template. Now it's the turn of the functions.php file. This file does a lot of work for your site. It is a file that can be used to change the default behavior of WordPress. This file can be considered as a plugin that should remember:
- Does not require a specific header text.
- exist among the template files.
- Apply its effect only on the template that is installed.
- Runs only when the template is active.
- Can execute PHP, WordPress, and custom functions.
As far as work, the format does not look good! As you know, the order of appearance changes is placed in the style.css file. So, using the functions.php file, we call this file to display a more beautiful appearance. Place the following code snippet in the functions.php file:
<?php
function custom_theme_assets() {
wp_enqueue_style( 'style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'custom_theme_assets' );
Now the command to call the style.css file is sent to WordPress. But you may be wondering why we didn't call the style.css file through the header.php file from the beginning.
The answer to this question is a bit specialized, but in short, having a custom function to call style.css is better because it makes things work better and in the future, when your site gets bigger and bigger, you will be happy that this file does all the hard work. He carries the burden.
-
Beautify the appearance of the site
To get started, you need to add an open and closed div tag with the container class to the header.php and footer.php files. In the header.php file, replace the following code with the previous codes:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<title><?php bloginfo( 'name' ); ?></title>
<?php wp_head() ?>
</head>
<body <?php body_class(); ?>>
<div class="container">
<header class="site-header">
<h1><a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<h4><?php bloginfo( 'description' ); ?></h4>
</header>
Next, you need to add the closing div tag. For this purpose, replace the following codes in the footer.php file:
<footer class="site-footer">
<?php bloginfo( 'name' ) ?>
</footer>
</div>
<!-- closes
<div class=container"> -->
<?php wp_footer() ?>
</body>
</html>
In the next step, we need to add the formatting of the posts. For this purpose, replace the previous codes in the index.php file with the following codes that contain the new article tag:
<?php get_header(); if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article class="post">
<h2><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h2>
<?php the_content() ?>
</article>
<?php endwhile;
else :
echo 'There are no posts!';
endif;
get_footer();
?>
In the last step, we will add codes to the style.css file to make the site look a little better. For this purpose, replace the following codes in the style.css file:
/*
Theme Name: Keyupseotheme
Author: Hamyarwp
Author URI: https://hamyarwp.com
Version: 1.0
*/
body {
font-family: Arial, sans-serif;
font-size: 16px;
color: #545454;
}
a:link, a:visited {
color: #4285f4;
}
p {line-height: 1.7em;}
div.container {
max-width: 960px;
margin: 0 auto;
}
article.post {
border-bottom: 4px dashed #ecf0f1;
}
article.post:last-of-type {
border-bottom: none;
}
.site-header {
border-bottom: 3px solid #ecf0f1;
}
.site-footer {
border-top: 3px solid #ecf0f1;
}
Now let's take a look at our custom template. Yes, you have made this template yourself and everything is going well.
Summary of the process of creating a custom WordPress template
At the beginning of the work, we learned to create our WordPress theme folder in the WordPress themes folder.
In the template folder, we created different files that do different things for us and explained each one. In this article, we tried our best so that you can get to know the working process of WordPress templates without special prerequisites.
If you encounter an error during the process of using WordPress, you can fix it by searching for the error that appears. Also, in the article Fix Publish Failed Error on WordPress, we have explained how to Fix Publish Failed Error on WordPress.
This tutorial only touched on the basics of WordPress themes and if you are interested in this area, there are various other files with other tasks that you need to add to your theme. So, so far, you are familiar with how WordPress templates work.
Frequently Asked Questions
What is a WordPress theme?
To make your site attractive, you should use WordPress templates and make it more user-friendly. The appearance of the site is an important issue that should be given special attention.
How to create a custom WordPress theme?
You can create your custom template in 8 steps.
- Install a code editor.
- Create a folder for WordPress content.
- Create style.css and index.php files.
- Activate your theme from the WordPress dashboard.
- Add the codes to display the title and text of the posts.
- Add links to each post.
- Add header and footer to your template.
What folders are required for a custom template?
So far, we created two files, style.css, and index.php in the template folder. Now, to be able to customize the content of the header and footer in creating a WordPress template and have more options, we need to create two more files named header.php and footer.php in the WordPress template folder.
Release date : 13 August, 2024
