Let’s get started\u2026<\/h2>\n
The first thing you need to know is where WordPress store themes. You can find them on the directory In order to create new themes you need to do some fairly easy things:<\/p>\n The components of a WordPress theme are composed of 3 files at the very least.<\/p>\n Basically, we need to create 6 files for our sample practice theme. index.php<\/b> header.php<\/b> footer.php<\/b> comments.php<\/b> functions.php<\/b> Let’s make the design simple so that we can understand it properly. A blog with a single sidebar on the right will be idle for that. Also, it is very easy to design and even easier to add responsive properties later.<\/p>\n Header.php<\/b> – Let’s first describe the content of the Always make sure to add After the <head<\/span>> codes, the next part is the header where you will display site name and site description.<\/p>\n Note that the terms <head<\/span>> and Header are different things. The <head<\/span>> is a part of the HTML document that is not visible on the browser and handles the site’s Title, Favicon, Meta, Stylesheets, Scripts and a lot more. The header is the part of a theme that is displayed at the very top where the Name and Description of the website are usually shown. It may also show a custom header image but that’s for another tutorial. For now, we’ll focus on the very basics of creating a WordPress theme.<\/p>\n Now, we add container tag and opening body. Then we add the header title and description.<\/p>\n Now add The Menu on the The WordPress loop is responsible for showing the website’s content Posts and Pages.<\/p>\n This displays the “Older Posts” and “Newer Posts” links.<\/p>\n So, now we have the header, menu, and content. Let’s move on to the sidebar that contains the widgets.<\/p>\n Register the Dynamic Sidebar<\/b> Display the Widgets on the Sidebar<\/b>wp-content\/themes<\/code> in your install. You can also change the location of your themes by giving some commands in the wp-config.php<\/code> but it is done very rarely.<\/p>\n\n
my-first-themes<\/code>.<\/li>\nstyle.css<\/code> & index.php<\/code>\n\/*\r\nTheme Name: My Awesome Theme\r\nTheme URI: http:\/\/www.codexworld.com\r\nAuthor: CodexWorld\r\nAuthor URI: http:\/\/www.codexworld.com\r\nDescription: The theme for my awesome site\r\nVersion: 1.0\r\nLicense: GNU General Public License v2 or later\r\nLicense URI: http:\/\/www.gnu.org\/licenses\/gpl-2.0.html\r\nText Domain: my-first-theme\r\n\r\nThis theme, like WordPress, is licensed under the GPL.\r\nUse it to make something cool, have fun, and share what you've learned with others.\r\n*\/<\/span>\r\n<\/pre>\n<\/li>\nComponents of a WordPress Theme<\/h2>\n
\n
\nstyle.css<\/b>
\nThis file contains the codes that will add style to our HTML structure. It also holds the basic information about the theme which includes theme’s name, Author, Description, Version, Filter Tags, and license declared.<\/p>\n
\nThis file contains the codes that make up the structure of the WordPress theme. This is the main template file. It acts as the reserve template when other templates are unavailable. This is the file where the WordPress loop is added.<\/p>\n
\nThis file contains the elements of a website like a document type, language attribute, website title, charset, metas and various links and more. It also contains the theme’s “header” and “main menu”. This file must have the wp_head()<\/code> action hook because it is used for WordPress functions and plugins. This file is called by the index.php file and other templates by using the get_header()<\/code> function.<\/p>\n
\nAs by name, this file contains the footer part of your theme which includes links, theme info, and footer widgets if any. This file is called by the index.php file and other templates by using the get_footer()<\/code> function.<\/p>\n
\nit usually outputs the comment form and individual comments. This file can be called by adding comments_template()<\/code> on templates that display single post or page.<\/p>\n
\nThis file is very important as it contains custom functionality. Here, you can add various functions such as registering menus, registering dynamic sidebars and queuing styles and scripts.<\/p>\nTheme Design<\/h2>\n
![\"wordpress-theme-development-tutorial-design-codexworld\"](\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/03\/wordpress-theme-development-tutorial-design-codexworld.png\")
<\/div>\nheader.php<\/code>. The first code to enter is:<\/p>\n<!DOCTYPE<\/span> html>\r\n<html<\/span> <?php language_attributes<\/span>( ); <\/span>?><\/span>>\r\n<head<\/span>>\r\n<meta<\/span> charset<\/span>=\"<?php bloginfo<\/span>( <\/span>'charset' <\/span>); <\/span>?><\/span>\"<\/span> \/>\r\n<title<\/span>><?php wp_title<\/span>( <\/span>'|'<\/span>, <\/span>true<\/span>, <\/span>'right' <\/span>); <\/span>?><\/span><\/title<\/span>>\r\n<link<\/span> rel<\/span>=\"pingback\"<\/span> href<\/span>=\"<?php bloginfo<\/span>( <\/span>'pingback_url' <\/span>); <\/span>?><\/span>\"<\/span> \/>\r\n<?php wp_head<\/span>(); <\/span>?><\/span>\r\n<\/head<\/span>>\r\n<\/pre>\nwp_head();<\/code> just before the closing <\/head<\/span>>. That action hook is needed to add and modify the contents of the header.php<\/code>.<\/p>\n<body<\/span> <?php body_class<\/span>(); <\/span>?><\/span>>\r\n<div<\/span> id<\/span>=<\/span>\"container\"<\/span>>\r\n <div<\/span> id<\/span>=<\/span>\"header\"<\/span>>\r\n <div<\/span> id<\/span>=<\/span>\"header-info-wrap\"<\/span>>\r\n <h1<\/span> id<\/span>=<\/span>\"site-title\"<\/span>><?php bloginfo<\/span>( <\/span>'name' <\/span>); <\/span>?><\/span><\/h1<\/span>>\r\n <h4<\/span> id<\/span>=<\/span>\"site-description\"<\/span>><?php bloginfo<\/span>( <\/span>'description' <\/span>); <\/span>?><\/span><\/h4<\/span>>\r\n <\/div<\/span>>\r\n <\/div<\/span>>\r\n<\/pre>\nheader.php<\/code><\/b><\/p>\n<nav<\/span> id<\/span> =<\/span>\"nav\"<\/span>>\r\n <?php
wp_nav_menu<\/span>( array(
<\/span>'theme_location' <\/span>=> <\/span>'menu-primary'<\/span>,
<\/span>'container' <\/span>=> <\/span>false<\/span>,
<\/span>'fallback_cb' <\/span>=> <\/span>'wp_page_menu'
<\/span>) );\r\n
<\/span>?><\/span>\r\n<\/nav<\/span>>\r\n<\/pre>\nThe WordPress Loop<\/h2>\n
<?php get_header<\/span>(); <\/span>?>\r\n
<?php <\/span>if ( <\/span>have_posts<\/span>() ) : while ( <\/span>have_posts<\/span>() ) : <\/span>the_post<\/span>(); <\/span>?>\r\n
<\/span>\u00a0\u00a0\u00a0\u00a0<div<\/span>\u00a0id<\/span>=<\/span>\"post-<?php the_ID<\/span>(); <\/span>?><\/span>\"<\/span> <?php post_class<\/span>(); <\/span>?><\/span>>
<h1<\/span>>\r\n <a<\/span> href<\/span>=\"<?php the permalink<\/span>(); <\/span>?><\/span>\"<\/span>><?php the_title<\/span>(); <\/span>?><\/span><\/a<\/span>>\r\n <\/h1<\/span>>
<?php the_content<\/span>(); <\/span>?>
<\/span>\u00a0\u00a0\u00a0\u00a0<\/div<\/span>>\r\n
<?php <\/span>endwhile; else: <\/span>?>\r\n
<\/span>\u00a0\u00a0\u00a0\u00a0<h2<\/span>>\u00a0Post\u00a0or\u00a0Page\u00a0not\u00a0Found!\u00a0<\/h2<\/span>>\r\n
<?php <\/span>endif; <\/span>?><\/span><\/pre>\nThe Post Navigation<\/h2>\n
<div<\/span> id<\/span>=<\/span>\"bottom-navi\"<\/span>>\r\n <div<\/span>><?php next_posts_link<\/span>( <\/span>'« Older posts' <\/span>); <\/span>?><\/span><\/div<\/span>>\r\n <div<\/span>><?php previous_posts_link<\/span>( <\/span>'Newer posts »' <\/span>); <\/span>?><\/span><\/div<\/span>>\r\n<\/div<\/span>>\r\n<\/pre>\nConfiguring the Sidebar Widget<\/h2>\n
\nPlace the following code in the functions.php<\/code> file:<\/p>\n<?php
register_sidebar<\/span>(array(
<\/span>'name' <\/span>=> <\/span>'sidebar' <\/span>,
<\/span>'id' <\/span>=> <\/span>'sidebar_widgets' <\/span>,
<\/span>'before_widget' <\/span>=> <\/span>'<div id=\"%1$s\">'<\/span>,
<\/span>'after_widget' <\/span>=> <\/span>'<\/div>' <\/span>,
<\/span>'before_title' <\/span>=> <\/span>'<h4>' <\/span>,
<\/span>'after_title' <\/span>=> <\/span>'<\/h4>' <\/span>, )
);
<\/span>?><\/span><\/pre>\n
\nAdd this code in the index.php<\/code> file:<\/p>\n<div<\/span> id<\/span>=<\/span>\"sidebar\"<\/span> >\r\n <?php <\/span>if ( <\/span>is_active_sidebar<\/span>( <\/span>'sidebar_widgets' <\/span>) ) : <\/span>