How to create a WordPress custom theme
WordPress occupies a huge percentage of the world’s websites, making up 37% of all sites currently online. While there are many reasons and factors for this success, one of the main reasons is the popularity of features available to all users. Plugins, themes, posts, pages, categories, taxonomies, user roles and media handling just to name a few. To get the most out of WordPress, it is recommended users study and learn how to use all of these features. In this blog, we will focus on and discuss WordPress Themes and will walk you through the basics required on how to create a WordPress custom theme.
What is a custom theme?
Everything on the frontend of your site is being run from and controlled using something called a ‘theme’. A website’s theme is responsible for the specific design and functionality of the website. You can check out the WordPress theme repository or Themeforest for theme examples; here you will find thousands of themes listed for you to explore and download.
While established WordPress themes are great, if you have the ability and need, you may also want to build your own custom theme for a client, for yourself, or to submit to the marketplaces with the intention of selling it. When creating a commercial theme, you will need to follow the marketplaces guidelines for coding standards, structure of files and folders, etc. You can find more details regarding these guidelines on the marketplaces websites.
In this blog, we will run through a tutorial to show you a basic overview on how to create your very own WordPress theme by covering all the basics and steps associated with the process.
Create a WordPress custom theme
WordPress themes are built with template files, scripts, styles, images, etc. To proceed, you should have working knowledge of PHP, HTML and CSS, which are required to build a custom theme. Understanding JavaScript can also be an additional advantage.
To get started, we will first name the theme ‘Updraft’. Create a folder called ‘Updraft’ inside wp-content/themes. Within this ‘Updraft’ folder, you will write your theme related code, store files, images, fonts, etc.
The main files of the custom WordPress theme are:
- style.css
- index.php
- functions.php
The style.css will be the main stylesheet file and you can add all of your CSS in this file. Remember that you must include an information header about the theme. The header should look similar to the below format and be on the top of style.css.
</em></strong> <strong><em>/*</em></strong> <strong><em>Theme Name: Updraft</em></strong> <strong><em>Theme URI: https://updraftplus.com</em></strong> <strong><em>Author: UpdraftPlus</em></strong> <strong><em>Author URI: https://updraftplus.com</em></strong> <strong><em>Description: The custom theme built for the website.</em></strong> <strong><em>Version: 1.0</em></strong> <strong><em>License: GNU General Public License v2 or later</em></strong> <strong><em>License URI: http://www.gnu.org/licenses/gpl-2.0.html</em></strong> <strong><em>Text Domain: updraft</em></strong> <strong><em>*/</em></strong> <strong><em>Next, go to the Appearance >>Themes, where you will see your theme listed. Activate it. When you check the frontend of your site, it will show a blank screen – as we have not added anything to the theme yet..
Remember to store your images, scripts and styles into your theme directory. The theme directory refers to the ‘wp-content/themes/Updraft’ folder. Be sure to keep them organized by using a good folder structure, creating specific folders for images, scripts and styles; Copy the files into the respective directory.
Functions File
The functions.php is the file where you can add code for different purposes. This file is automatically loaded during WordPress initialization, with the code written in it executed automatically.
The following operations in the functions.php file are usually carried out in this order:
- Enqueue theme stylesheets and scripts (add the JS and CSS files to the website).
- Enable Sidebars, Navigation Menus, Post Thumbnails, etc.
- Define functions used throughout the application.
- Etc.
The user can add their styles and scripts from functions.php file as follows. Please see the following link for more documentation.
function include_js_css() { wp_register_style( "bootstrap", get_stylesheet_directory_uri() . </em></strong> <strong><em>"/styles/bootstrap.min.css", array(), false, "all" ); wp_enqueue_style( "bootstrap" ); wp_register_script('bootstrap', get_stylesheet_directory_uri() . </em></strong> <strong><em>'/scripts/bootstrap.min.js', array(), false, true); wp_enqueue_script('bootstrap'); } add_action('wp_enqueue_scripts', 'include_js_css');The get_stylesheet_directory_uri() function gives a relative path of the active theme directory. The rest of the code can be seen to be the path of the assets.
Similarly, for adding Navigation Menus, Post Thumbnails:
function updraft_theme_setup() {</em></strong> <strong><em>add_theme_support( 'post-thumbnails' ); register_nav_menus( array( 'primary' => __( 'Primary Menu' ), 'footer1=' => __( 'Footer Menu' ), 'shop' => __( 'Shop Page Menu' ), ) ); } add_action( 'after_setup_theme', 'updraft_theme_setup' );Next, go to the WordPress dashboard and add a post or page. You should see the ‘Featured Image’ section. Additionally, under the Appearance >> Menus, you will find the Primary Menu and Footer Menu under Manage Locations.
These are just a few of the basic features you can cover while using the ‘Function’ file. There are a lot more you can add in this file if you so wished.
Template files
When building your theme, template files can be used to affect the layout and design of different parts of your website. For example, you would use the header.php template to create a header, or the comments.php template to include comments on your site. Template files have a .php extension. As they are PHP files, all pages output as HTML.
Using templates, developers can distribute code among multiple files. Listed below are some of the files in question.
- index.php : The main template. This file should be responsible for post listing. When you set the Posts page from Settings >> Readings, this template gets executed.
- page.php : This template is responsible for rendering your pages. This setting can be overridden by assigning a custom page template to individual pages.
- single.php : Used when a single post is queried.
- header.php : Add your header part in this template.
- footer.php : Add your footer part in this template.
- sidebar.php : Add widgets in this template.
Get a list of all template files available here.
Custom page templates
By default, all your pages are rendered through the page.php template. But in practice, you sometimes have to display separate flows on different pages. In this scenario, it is recommended that you use the power of custom page templates.
For example, if you have a ‘Career’ page and you want to add your code to this page; to achieve this you would need to create a career.php file into the theme directory and place the comment below at the top of the file.
<?php</em></strong> <strong><em>/*</em></strong> <strong><em>Template Name: Career</em></strong> <strong><em>*/Next, go to the page edit section and assign this ‘Career’ template from under the Page Attributes box.
Now when you visit the Career page – code from the career.php will be executed.
Header file
Your website will have a common header on all pages. You can place this common header into the header.php. The header code will be something like this:
<!DOCTYPE html></strong></em> <em><strong><html <?php language_attributes(); ?>></strong></em> <em><strong><head></strong></em> <em><strong><meta charset="<?php bloginfo('charset'); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <?php wp_body_open(); ?> <!-- your menu -->In the above code, you will notice that we used some functions available in WordPress.
- wp_head() : This method inserts crucial elements into your document – e.g., scripts, styles and meta tags.
- body_class() : This will add different classes to the body element.
- wp_body_open() : Used to insert code immediately after opening the body tag. An example of this would be the- Google Analytics script.
Menus can be added dynamically through the wp_nav_menu() function. Assuming you have first already created a menu under Appearance >> Menus and assigned ‘primary’ location to it. The code below generates the menu elements dynamically.
<?php</strong></em> <em><strong>wp_nav_menu( array( 'theme_location' => 'primary', 'container_class' => 'menus', ) ); ?>Once your header file is set, use the get_header() function to include this file into your other templates.
Footer file
Similar to the header file, your common code for the footer will go inside the footer.php template.
<!-- footer elements --> <?php wp_footer(); ?> </body> </html>Here, use the wp_footer() that inserts elements, specifically scripts, at this location. Using get_footer() will include the contents of this file in other places.
Sidebar file
The sidebar is a vertical column used to display information on your site that is not shown within the main content. It may include popular articles, advertisement banners, a newsletter submission form, etc. Sidebars contain widgets that an administrator can customize. The sidebar.php template will include your site widgets.
In this example, we will create a basic sidebar by adding the below code to the functions.php file.
function updraft_widgets_init() { register_sidebar( array( 'name' => esc_html__( Home Sidebar' ), 'id' => 'sidebar-1', 'description' => esc_html__( 'Add widgets here to appear in your sidebar.' ), 'before_widget' => '<section id="widget" class="widget">', 'after_widget' => '</section>', 'before_title' => '<h2 class="widget-title">', 'after_title' => '</h2>', ) ); } add_action( 'widgets_init', 'updraft_widgets_init' );Next, go to the Appearance >> Widgets. Here you will find the above sidebar. In this example, we are going to add some widgets to this sidebar. To add this sidebar to the frontend, add the following code in sidebar.php.
<div class="sidebar"> <?php if ( is_active_sidebar( 'sidebar-1' ) ) { dynamic_sidebar( 'sidebar-1' ); } ?> </div>Finally, remember to name the method ‘get_sidebar()’ so you can easily include the sidebar wherever on any other pages as and when needed.
Rendering pages and posts
As already mentioned, all WordPress pages are rendered and executed using the code you have written in the page.php file, except pages with custom page template. The below code is an example that will show a page featuring the page title, description and featured image.
<?php get_header(); ?> <div id="primary" class="content-area"> <main id="main" class="site-main"> <?php while ( have_posts() ) : the_post(); ?> <?php if ( has_post_thumbnail() ) : the_post_thumbnail(); endif; ?> <header class="entry-header"> <?php the_title(); ?> </header> <div class="entry-content"> <?php the_content(); ?> </div> <?php endwhile; ?> </main> </div> <?php get_footer();Similar code will go inside the single.php file to display the post information. To render the post listing properly (your index.php), in addition to the above methods – you may also want to use the following:
- the_catgeory() : Displays category list for a post.
- the_permalink() : Displays the permalink for the current post.
- the_excerpt() : Display the post excerpt.
I18n for WordPress custom themes
While building a custom theme, try to remember that it should be developed in a way to support internationalization. By doing this, it makes it possible for your theme to easily be translated into other languages.
To add I18n support, remember to use a text domain which you can parse source files and extract the translatable strings from. In this example, we are using the text domain ‘Updraft’, but you can choose any unique identifier. We can define the text domain as follows.
function i18n_setup() { load_theme_textdomain( 'updraft', get_stylesheet_directory() . '/languages' ); } add_action( 'after_setup_theme', 'i18n_setup' );Now whenever you use static strings in your theme files, wrap them inside __() or _e() functions.
<h2><?php _e('First Name', 'updraft); ?></h2> <?php echo __('User Email', 'updraft'); ?>There are special tools available like POEDIT that help to generate translated language files. Please refer to this blog for more information.
This blog has covered the basics on creating WordPress custom themes. However, it is a vast topic that requires a lot of time and patience. Below are some helpful resources you should get acquainted with that will help you start to create your WordPress themes..
- The WordPress Loop
- Template Tags
- Category Pages
- Function_Reference
- Conditional Tag
- WordPress Coding Standards
When create a new theme for your WordPress site, remember that you will need to back it up after every change or risk losing all your work. Use UpdraftPlus – The world’s leading and most trusted WordPress backup, restore and clone plugin.
The post How to create a WordPress custom theme appeared first on UpdraftPlus. UpdraftPlus – Backup, restore and migration plugin for WordPress.
