\n\n\n\n
How to Create a WordPress Theme<\/h2>\n
Step 1. Create and Store the Template Files
\nStep 2. Set Up the Initial CSS Stylesheet
\nStep 3. Make the WordPress Theme Functional
\nStep 4. Build a Layout for Your Custom Theme
\nStep 5. Improve Your Design on the CSS Stylesheet<\/p>\n <\/div>\n\n\n\n<\/p>
Creating a WordPress Theme Development Area<\/h2>
When developing your own theme, avoid using it on the live site immediately since it might cause errors.<\/p>
Instead, set up a WordPress staging area using the built-in tool that came with Hostinger’s Business WordPress hosting plan<\/a>. It is quicker than setting up a local environment since you don’t need to install multiple tools.<\/p> To do so, navigate to hPanel<\/strong> → Websites <\/strong>→ Dashboard<\/strong>. From the sidebar, click WordPress<\/strong> → Staging<\/strong>.<\/p> Finally, create the WordPress staging area<\/a> by switching to the Staging<\/strong> tab and clicking Create staging<\/strong>. Enter your preferred subdomain and click Create<\/strong>.<\/p> After setting up the staging area, follow these steps to create a WordPress theme from scratch using PHP, HTML5<\/a>, and CSS3.<\/p> Creating your own custom theme requires at least two templates. The index.php<\/strong> file displays content, while style.css<\/strong> manages the visual theme elements, like fonts.<\/p> However, most WordPress themes have additional template files defining the layout of specific website areas, like posts and pages. Here are some of the most common ones:<\/p> In this tutorial, we will use all these template files. Follow these steps to create them in the staging site:<\/p> These theme files should be in the same folder within the WordPress installation directory to allow the CMS to load these theme files based on the template hierarchy<\/a>.<\/p> You won’t need all these custom templates if your entire website uses the same layout. However, we recommend using them to separate the main code from the additional content to simplify theme customization.<\/p> You also need to create JavaScript files in the theme directory if you want dynamic design elements. We won’t use them in this tutorial; instead, we will make a folder called Images<\/strong> to store visual assets like logos.<\/p> Currently, these theme files are empty. We’ll add the visual presentation first and set up the layout afterward.<\/p> After creating all the theme template files, we can start writing the code. Begin by adding details to the style.css<\/strong> stylesheet we made earlier to allow WordPress to recognize its content.<\/p> These details are information that will show up in the WordPress admin area, like the theme name, author, and description. They are written based on the WordPress file header<\/a> formatting. Here is an example:<\/p> Important!<\/strong> If you wish to make your themes public, the last two lines about license information are mandatory. Otherwise, you can omit them.<\/p><\/div>\n\n\n\n<\/p> Click the disk <\/strong>icon on the top right to save the file. Now, return to hPanel’s website management menu → WordPress<\/strong> → Staging<\/strong>. Click Manage Staging <\/strong>on your test environment and select Staging Admin Panel<\/strong>.<\/p> Navigate to the sidebar → Appearance<\/strong> → Themes<\/strong>, and you will see the base of your theme.<\/p> Let’s add the visual design to make the theme more interesting. Open the stylesheet file and write your CSS code under the header. For example, we’ll add the following to change the background color:<\/p> Let’s break down the code to understand it. The snippet starts with an asterisk (*<\/strong>) to select all HTML elements and apply the styling within the first curly bracket pair. In this case, we add a CSS box model<\/a> that houses the content, padding, and border.<\/p> Meanwhile, the second styling sets the background color and default font for all HTML content within the <body><\/body><\/strong> tags.<\/p> Currently, you won’t see any changes since the HTML content is missing. We will include more CSS code after adding elements and building the theme’s structure.<\/p> Now that your WordPress theme shows up in the admin dashboard, it’s time to create the structure and functions. We will do so by adding code to the functions.php<\/strong> and sidebar.php<\/strong> files.<\/p> functions.php<\/strong><\/p> Due to inconsistent margins and padding<\/a> settings, several web browsers might display your WordPress theme differently. To ensure it shows properly, link the <\/strong>normalize.css<\/a> file to functions.php<\/strong>.<\/p> The normalize.css<\/strong> template is a premade stylesheet that provides a basis for your CSS code, allowing it to load consistently across different browsers. To add it, insert the normalization function into functions.php<\/strong>:<\/p> This code will prompt WordPress to pick the normalize.css<\/strong> file from the attached source<\/a> URL.<\/p> Next, add a function to enable the widget area<\/strong> or sidebar<\/strong>. A widget is a modular extension that lets you add specific features to different sections of your WordPress website. To enable it, add the following after the previous snippet:<\/p> Now, let’s activate the theme by going to the Appearance<\/strong> → Themes<\/strong> and clicking Activate<\/strong>. You should see the Widgets<\/strong> menu under the Appearance<\/strong> tab, where you can add or remove widgets from your website.<\/p> The code contains an action hook<\/a> – a PHP function that loads code from another file to modify WordPress settings and features without altering the core. We’ll discuss this terminology further in the later section.<\/p> Lastly, add the following code to enable the function for inserting a custom navigation menu:<\/p> It will show the Menus <\/strong>button under the Appearance<\/strong> menu. Remember to save the changes by clicking the disk<\/strong> button in the File Manager<\/strong> code editor after adding new code.<\/p> There are various other functions to insert. For example, WordPress site owners commonly add a featured image and post thumbnails.<\/p> sidebar.php<\/strong><\/p> Next, we’ll create the WordPress theme’s sidebar to display the widgets using the get_sidebar() function<\/strong><\/a>. Insert the code below into the sidebar.php<\/strong> file and save the changes.<\/p> In the code, the if<\/strong> statement checks whether WordPress already displays a sidebar. If not, it will show the widgets you have added from the Widgets<\/strong> menu under the Appearance <\/strong>tab.<\/p> After adding the sidebar and CSS normalization functions, let’s create the layout of your WordPress theme. By the end of this step, the website structure will start to take shape.<\/p> In addition to index.php<\/strong>, we will modify the header.php<\/strong>, footer.php<\/strong>, single.php<\/strong>, page.php<\/strong>, and style.php<\/strong> files to give each web page a dedicated layout.<\/p> header.php<\/strong><\/p> The header template file defines the top area of your web page. Start your code with the following:<\/p> The snippet allows the header of your WordPress custom theme to adjust its size automatically based on the screen size using responsive design<\/strong>. We’ll explain this concept in-depth later.<\/p> Next, add the following:<\/p> The DOCTYPE <\/strong>declaration tells the web browser the file type of your header template. Meanwhile, the language_attributes() <\/strong>function specifies HTML as the document’s primary coding language.<\/p> Then, add the <head><\/head><\/strong> HTML tags, which contain the document metadata, like the web page title, default character set, responsive design viewport, and the linked stylesheet. All these details are enclosed with different tags.<\/p> Next, we create the HTML document’s body section and use the body_class<\/strong> function to automatically assign a class to the <body><\/strong> tag for styling.<\/p> Add the header, which we will classify as the my-logo <\/strong>class. Then, we use <h1><\/h1><\/strong> tags to show the logo in the Image<\/strong> folder as the main heading and anchor for the website’s URL.<\/p> Lastly, add the following to insert a navigation menu in the theme’s header:<\/p> index.php<\/strong><\/p> The index.php<\/strong> file defines the homepage structure and serves as the default layout if other page templates are unavailable.<\/p> If you have different layouts for the header, sidebar, and footer, add the template tags<\/a> to call their code into index.php<\/strong>. For example, use get_header<\/strong> to link the header, and so on.<\/p> To section your web page, use HTML5 semantic elements like <head><\/strong> and <section><\/strong>. If you want to apply the CSS stylesheet to them, add the class like the following:<\/p> Important!<\/strong> Header tags can appear multiple times and don’t necessarily refer to the page header. Semantic elements should have a header if there’s text inside h1, h2, etc.<\/p><\/div>\n\n\n\n<\/p> Here’s an example of code in the index.php<\/strong> file containing template tags and semantic elements:<\/p> In the code above, we also added a WordPress loop<\/a> – PHP code that retrieves posts from the database and passes them to other functions. It starts at <?php if ( have_posts() )<\/strong> : while ( have_posts() ) : the_post(); ?><\/strong> and ends with <?php endif; ?><\/strong>.<\/p> The loop contains the following functions to retrieve specific details from the post:<\/p> footer.php<\/strong><\/p> The footer.php <\/strong>file defines content at the bottom of your theme, like copyright information or a sitemap. You can also add the <body> <\/strong>and <html><\/strong> closing tags here if you haven’t specified them in header.php<\/strong>.<\/p> Define your footer content with the <footer><\/footer><\/strong> HTML semantic element. For example, we will add copyright information at the bottom.<\/p>![\"Staging](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/03\/staging-tool-location-in-hpanel-website-management-page.png\")
<\/a><\/figure><\/div>![\"\"](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/06\/New-WP_in-text-banner-1024x300.png\")
<\/a><\/figure>How to Create a WordPress Theme<\/h2>
1. Create and Store the Template Files<\/h3>
\n
\n
![\"The](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/03\/The-File-Manager-button-in-hPanel-website-managment-dashboard-1024x293.png\")
<\/a><\/figure><\/div>\n
![\"Content](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/03\/Content-of-a-new-theme-folder-1024x438.png\")
<\/a><\/figure><\/div>2. Set Up the Initial CSS Stylesheet<\/h3>
\/*\nTheme Name: My Theme\nAuthor: Hostinger\nAuthor URI: http:\/\/www.hostinger.com\/tutorials\nDescription: My first responsive HTML5 theme\nVersion: 1.0\nLicense: GNU General Public License v3 or later\nLicense URI: http:\/\/www.gnu.org\/licenses\/gpl-3.0.html\n*\/\n<\/pre>
![\"An](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/03\/An-empty-theme-appears-on-the-WordPress-Themes-menu-1024x323.png\"){kind=spacer}
<\/a><\/figure><\/div>* {\n box-sizing: border-box;\n}\nbody {\n background-color: #f9f9f9;\n font-family: Helvetica;\n}\n<\/pre>3. Make the WordPress Theme Functional<\/h3>
<?php\n\/\/ This function enqueues the Normalize.css for use. The first parameter is a name for the stylesheet, the second is the URL. Here we\n\/\/ use an online version of the css file.\nfunction add_normalize_CSS() {\n wp_enqueue_style( 'normalize-styles', \"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/normalize\/7.0.0\/normalize.min.css\");\n}\n\nadd_action('wp_enqueue_scripts', 'add_normalize_CSS');\n<\/pre>\/\/ Register a new sidebar simply named 'sidebar'\nfunction add_widget_support() {\n register_sidebar( array(\n 'name' => 'Sidebar',\n 'id' => 'sidebar',\n 'before_widget' => '<div>',\n 'after_widget' => '<\/div>',\n 'before_title' => '<h2>',\n 'after_title' => '<\/h2>',\n ) );\n}\n\/\/ Hook the widget initiation and run our function\nadd_action( 'widgets_init', 'add_widget_support' );\n<\/pre>![\"The](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/03\/The-Widgets-menu-of-a-newly-created-theme-1024x405.png\")
<\/a><\/figure><\/div>\/\/ Register a new navigation menu\nfunction add_Main_Nav() {\n register_nav_menu('header-menu',__( 'Header Menu' ));\n}\n\/\/ Hook to the init action hook, run our navigation menu function\nadd_action( 'init', 'add_Main_Nav' );\n<\/pre>![\"The](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/03\/The-save-button-in-File-Manager-code-editor-1024x226.png\")
<\/a><\/figure><\/div><?php if ( is_active_sidebar( 'sidebar' ) ) : ?>\n <aside id=\"primary-sidebar\" class=\"primary-sidebar widget-area\" role=\"complementary\">\n <?php dynamic_sidebar( 'sidebar' ); ?>\n <\/aside>\n<?php endif; ?>\n<\/pre>
4. Build a Layout for Your Custom Theme<\/h3>
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<\/pre>
<!DOCTYPE html>\n<html <?php language_attributes(); ?>\n<\/pre>
<head>\n <title><?php bloginfo('name'); ?> » <?php is_front_page() ? bloginfo('description') : wp_title(''); ?><\/title>\n <meta charset=\"<?php bloginfo( 'charset' ); ?>\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <link rel=\"stylesheet\" href=\"<?php bloginfo('stylesheet_url'); ?>\">\n <?php wp_head(); ?>\n <\/head>\n<\/pre> <body <?php body_class(); ?>><\/pre>
<header class=\"my-logo\">\n <h1><a href=\"<?php echo esc_url( home_url( '\/' ) ); ?>\"><img src=\"<?php echo get_template_directory_uri(); ?>\/Images\/logo.png\" alt=\"Site Logo\" width=\"50px\" height=\"50px\"><\/a><\/h1>\n<\/header>\n<\/pre>
<?php wp_nav_menu( array( 'header-menu' => 'header-menu' ) ); ?>\n<\/pre>
<head class=\"class-name\">\n<\/pre>
<?php get_header(); ?>\n<main class=\"wrap\">\n <section class=\"content-area content-thin\">\n<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>\n <article class=\"article-loop\">\n <header>\n <h2><a href=\"<?php the_permalink(); ?>\" title=\"<?php the_title_attribute(); ?>\"><?php the_title(); ?><\/a><\/h2>\n By: <?php the_author(); ?>\n <\/header>\n <?php the_excerpt(); ?>\n <\/article>\n<?php endwhile; else : ?>\n <article>\n <p>Sorry, no posts were found!<\/p>\n <\/article>\n<?php endif; ?>\n <\/section><?php get_sidebar(); ?>\n<\/main>\n<?php get_footer(); ?>\n<\/pre>
\n