How to create a WordPress theme? 5 step guide using code

As a theme developer, you are free to customize each template file. WordPress will choose and generate templates based on the template hierarchy. It will browse it until it finds a matching file and display the page accordingly. With this in mind, create a new folder for the components inside your folder. topics of wordpress, before creating a WordPress theme from scratch.

pro tip

The folder name must not be the same as another theme. Also, if you plan to share your work, check that there is no theme with the same name on the WordPress.org theme.

Once you have a folder to store your theme, create the essential WordPress template files. Each PHP template file must use the correct name as defined in the WordPress documentation.

Consider that to make different layouts for your posts, pages, and other parts of your website, you have to create separate templates containing HTML5 and PHP, which are applied to each section.

pro tip

If you want to use custom post types, you can create templates that only apply to posts of that type. However, if you want posts in a specific category to have different styles, use “if-then” statements within the loop.

Now, let’s go to the steps:

1. Go to the section of File Manager in you . Then go to public_html -> wp-content -> themes folder.
2. Create a new folder. Please note that the folder must have a unique, descriptive and short name. Do not use numbers or spaces.
3. We will use “my theme” in this example.
4. Let’s create the custom templates first, and we’ll focus on the content later. files include header.php, index.php, footer.php, functions.php, sidebar.php, single.php Y page.php

Now that you have all the PHP template files ready, let’s move on to configuring the CSS style sheet.

2. Configure the initial CSS style sheet

They control the visual design and layout of the website pages. Every WordPress theme needs a style sheet to display things like fonts and colors. Without a CSS file, WordPress will not recognize your custom theme as valid.

With this in mind, create a style sheet file in the same folder as the theme. Add the necessary information, including the theme name, version, description, and author to the top of the file style.css. WordPress will display this data in the admin control panel.

The information must be written as a multi-line CSS comment. Each header on its own line, starting with a keyword. Find the full list of header keywords for topics on the page.

Here’s an example:

/* Theme Name: My Theme Author: Author URI: https:///tutoriales/ Description: My first responsive HTML5 theme Version: 1.0 License: GNU General Public License v3 or later License URI: http: //www.gnu.org/licenses/gpl-3.0.html */

pro tip

The last two lines are necessary if you want to share your theme on WordPress.org. If you are going to use the theme for your own WordPress website, you do not need to include them.

At this point, your theme will already be visible in your WordPress dashboard. go to Appearance -> Themes and you will see My theme with a white and gray check box image.

However, you will get a blank home page if you activate the theme. This is because your file index.php is empty and no templates are available. Add a single rule to the CSS file that changes the background color of the page. Insert a blank line after the comment close */ on the tenth line. Then paste the following code below it:

* { box-sizing: border-box; } body { background-color: #f9f9f9; font-family: Helvetica; }

Let’s understand this code by breaking it down.

The first entry is an important part of the responsive style. <*> or the asterisk symbol, matches each element of the HTML document. Sets that the final width and height of each element on the page should include the content, padding, and border. Therefore, this rule effectively adds the padding inside the box instead of outside it.

Meanwhile, the second element changes the background color to white and sets the default font to be used in the theme.

Please note that the above code only adds basic elements to your custom theme. We will return to the file style.css once we have configured the other files and the general structure of the website is ready.

3. Make the WordPress theme functional

Before the WordPress theme development process, we recommend adding some code snippets to the files. functions.php Y sidebar.php, to improve the flexibility of the theme. For example, adding areas with widgets or creating on specific pages.

functions.php

Each browser has different default settings for things like margins and page padding. Therefore, you should perform CSS normalization to ensure that your theme has the same style and behavior in all browsers.

To achieve this, include a CSS file called normalize.css in your file functions.php. This file will allow browsers to display your site consistently, regardless of those elements. To create one, insert the following code into functions.php:

This code will make WordPress choose the file normalize.css of the .

Next, activate the sidebar widgets by adding the following code after the above function:

// Register a new sidebar simply named ‘sidebar’ function add_widget_support() { register_sidebar( array( ‘name’ => ‘Sidebar’, ‘id’ => ‘sidebar’, ‘before_widget’ => ‘

‘, ‘before_title’ => ‘

‘, ‘after_title’ => ‘

‘, ) ); } // Hook the widget initiation and run…