Table of Contents
What is a WordPress Theme
94% of web users say poor design is why they mistrust a website. This means having a high-quality website design is imperative in retaining visitors. WordPress themes are fully customizable, making it an excellent platform for first-rate design and theme development.
There are several ways to develop a WordPress theme, two of which are discussed in this article. However, before designing a theme yourself, it’s crucial to understand WordPress’s core developmental languages: HTML, CSS, PHP, and Javascript. An excellent way to learn the basic functionality of these languages is to read the Idea Maker guide to WordPress.
At Idea Maker, we specialize in WordPress because of its versatility and numerous development capabilities. After reading this guide, you will better understand the functionalities of WordPress and theme development. Keep reading to discover how to build a WordPress theme that instills trust in users.
Importance of Responsive Website Themes
Besides generating mistrust between visitors, poor web design can cause several adverse effects. For example, slow speed, unresponsive mobile sites, and user apathy. 48% of users believe that businesses don’t care about customers if their mobile site functions incorrectly.
These effects can cause high bounce rates and are terrible for SEO. As such, developing a responsive website with a smooth UI is vital for providing an excellent user experience. WordPress allows you to create a website theme that’s right for you and your skill level with several development options available.
WordPress Theme Development: Step by Step
After understanding WordPress’s core developmental languages – HTML, CSS, PHP, and Javascript – you will need to install WordPress locally to begin theme development. A local installation of WordPress allows you to prototype themes without the risk of inadvertently modifying your live site.
Option 1: Starter Theme
If you’re looking to develop a WordPress theme in a relatively short amount of time, using a starter theme is an excellent option. Although requiring some programming for customization, installing and building upon a template means much of what you need is already present.
Download & Install Theme
The WordPress website gives users access to over 9,000 pre-made themes, all of which can be adjusted to fit your requirements. There are two ways you can take advantage of a starter theme, through your WordPress Admin Panel or manual FTP installation for locally hosted pages. Choosing a basic starter theme is best, so there’s less code to decipher when customizing.
Admin Panel Installation
- Navigate to your WordPress Admin Panel and select the ‘Appearance’ tab, then ‘Themes,’ on the sidebar.
- Click the ‘Add New’ button at the top of the page. This will take you to the WordPress themes directory, where you can browse pre-made themes. Use the ‘filter’ button or search bar to find specific themes.
- After finding the right one, move your cursor over the theme thumbnail to reveal the ‘install’ button.
- Click the ‘install’ button and wait for WordPress to download your new theme.
- After installation, the ‘Active,’ and ‘Live Preview’ buttons will appear. If you’d like to test the theme out before committing to it, select ‘Live Preview.’ Otherwise, click ‘Activate’ and your website’s appearance will change to your new theme.
Manual Installation
- Manual theme installation is completed through the FTP protocol. As a result, you will need an FTP client before beginning.
- Once you’ve found a reliable FTP, download your desired theme archive (.zip) from the WordPress themes directory or whichever third-party website you’re using.
- Once downloaded, extract the theme archive. This should leave you with a folder named ‘themes,’ containing theme data files.
- Now access your web host server and navigate to /wp-content/themes using your FTP client. Then upload the extracted theme folder to this directory.
- You can now activate your new theme by navigating to your WordPress Admin Panel, where you should now see the theme under the Appearance >> Themes tab.
- Follow ‘Admin Panel Installation’ instructions 4 & 5 to complete the manual installation of your theme.
Theme Configuration
Once your starter theme is installed, you can then configure the theme to your requirements. To do this in the WordPress classic editor, navigate to the ‘Appearance’ tab, then ‘Theme Editor.’ Alternatively, you can directly edit the config files in your extracted themes folder before uploading them to WordPress with your FTP.
If using Gutenberg, click the three dots in the top right-hand corner of your screen, then select ‘Code Editor.’
After entering the WordPress theme editor and selecting your theme file from the drop-down box, you can then start to edit the code. First, however, you must understand the structure of a WordPress theme to know how your edits will affect the design.
A WordPress theme is made up of several components, including:
- index.php – Provides an outline and initializes your theme when accessing the page.
- styles.css – This is the main stylesheet of the theme, where most fundamental design changes will occur.
- functions.php – Enables additional functionality to be programmed.
Before making changes, you should explore the components of the WordPress starter theme. As a result, you will understand what to modify and how your changes will interact with other components.
Although starter themes give you the benefit of a predetermined outline, they can be challenging to overhaul for substantial changes. You will need to develop a WordPress theme from scratch for full customization.
Option 2: From Scratch
Developing a WordPress theme from scratch allows you to utilize the platform’s versatility and boundless customization possibilities. To learn more about WordPress’s capabilities, check Idea Maker’s comparison of WordPress and Squarespace.
Building a theme from scratch can be more time-consuming and challenging than using a starter theme. However, this option allows for wider use of WordPress’s functionality and customization options.
Preparation
Developing a WordPress theme from scratch is best completed locally, meaning you do not need to access your Admin Panel until installation. The first step is to create a ‘theme’ folder on your computer. This is where you will place all of your theme’s configuration and data files.
To program your theme’s files, you will need a text editor. You can use a basic editor such as Microsoft’s Notepad or Apple’s TextEditor, or a dedicated programming software like VS Code or Atom. For theme installation, you will also need an FTP client.
Create an Index
Create a file titled ‘index.php’ within your ‘theme’ folder using the code below. This code acts as the core of your WordPress theme, initializing it when a web user accesses your site.
<!DOCTYPE html>
<html>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="stylesheet" href="<?php echo esc_url( get_stylesheet_uri() ); ?>" type="text/css" />
<?php wp_head(); ?>
</head>
<body>
<h1><?php bloginfo( 'name' ); ?></h1>
<h2><?php bloginfo( 'description' ); ?></h2>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h3><?php the_title(); ?></h3>
<?php the_content(); ?>
<?php wp_link_pages(); ?>
<?php edit_post_link(); ?>
<?php endwhile; ?>
<?php
if ( get_next_posts_link() ) {
next_posts_link();
}
?>
<?php
if ( get_previous_posts_link() ) {
previous_posts_link();
}
?>
<?php else: ?>
<p>No posts found. :(</p>
<?php endif; ?>
<?php wp_footer(); ?>
</body>
</html>
Basic Appearance
Create a file titled styles.css in your ‘theme’ folder using the code below. This file determines the visual presentation of your WordPress page, for example, layout, fonts, and colors.
/*
Theme Name: My First WordPress Theme
*/
body {
background: #21759b;
}
After creating the index.php and styles.css, you will have a basic but usable WordPress theme on which to build upon. Start by fleshing out your styles.css file, creating a simple layout, and selecting a color scheme.
Develop Functionality
WordPress functions are based on ‘hooks.’ Hooks are functions that themes and plugins can modify. It’s important to note that if a plugin calls the same hook as your theme, it can cause unexpected results and errors.
Create a file titled ‘functions.php’ within your ‘theme’ folder using the code below. This file is responsible for the functionality of your website; it is where you can include unique features to your page.
if ( ! function_exists( 'theme_setup' ) ) :
function theme_setup() {
}
As you can see in the code above, it refers to ‘theme_setup.’ This code must correspond with the title of your ‘theme’ folder.
After creating the functions.php file, you can populate it with more features under the initial code. For example, you can use the below code to add navigation menus.
if ( ! function_exists( 'mytheme_register_nav_menu' ) ) {
function mytheme_register_nav_menu(){
register_nav_menus( array(
'primary_menu' => __( 'Primary Menu', 'text_domain' ),
'footer_menu' => __( 'Footer Menu', 'text_domain' ),
) );
}
add_action( 'after_setup_theme', 'mytheme_register_nav_menu', 0 );
}
The functions.php file can also be used for additional visual design customization. The code below will add a custom header to your website that can be edited and cropped in the WordPress Admin Panel.
function theme_custom_header_setup() {
$args = array(
'default-image' => get_template_directory_uri() . 'img/default-image.jpg',
'default-text-color' => '000',
'width' => 1000,
'height' => 250,
'flex-width' => true,
'flex-height' => true,
)
add_theme_support( 'custom-header', $args );
}
add_action( 'after_setup_theme', 'theme_custom_header_setup' );
Many more features can be included in your theme, several of which are discussed on the WordPress website itself. However, if you’d like to learn more about the functionality of WordPress, check out Idea Makers’ comparison of WordPress and Wix.
Additional Files
For added functionality and design customization, you can create several other template files, as demonstrated in the table below.
| File | Function |
| rtl.css | Right-to-left style sheet. |
| home.php | If you don’t set a static front page, home.php becomes the default front page, displaying the latest posts. |
| header.php | Responsible for the header portion of your site. |
| single.php | Used when a visitor requests a single post. |
| page.php | Used to when visitors request individual pages. |
| category.php | Sorts posts by category. |
| tag.php | Sorts posts by tag. |
| author.php | Responsible for loading author pages. |
| date.php | Sorts posts by date. |
| search.php | Displays visitors’ search results. |
| attachment.php | Used to view a single piece of media. |
| 404.php | Used when WordPress cannot find an item. |
You must add a hook to your index.php files to initiate the above functions. Your WordPress theme accesses these files by using ‘Template Tags.’ For example, to use header.php, you would add:
get_header();
Installation
Now that you’ve created a basic theme outline with some functions, you can install it to WordPress for further editing or previewing. To do this, follow the same steps used for manual starter theme installation.
Child Theme
After creating your theme, you should then create a ‘child theme.’ This allows you to modify minor aspects of your theme’s appearance while preserving its presentation and functionality. The child theme appears just like the original (parent theme) but has a separate set of files, meaning parent themes can be updated without overwriting your customizations.
To create a child theme, you first need to create a new folder within your pre-existing theme folder. It’s good practice to give the new folder the same name as the parent theme, adding a ‘-child’ suffix. For example, ‘[theme name]-child.’
Create a Stylesheet
The next step in creating a child theme is to add a ‘style.css’ file. Filling in the required criteria, use the code below to create your child theme ‘styles.css’ file. Though only a comment, WordPress can read this code to understand basic information about your theme.
/* Theme Name: [ADD NAME] Theme URI: [ADD URI] Description: Theme Author: [ADD NAME] Author URI: [ADD URI] Template: [ADD NAME] Version: 1.0.0 License: GNU General Public License v2 or later License URI: [ADD LICENSE] Tags: [ADD TAGS] Text Domain: [ADD DOMAIN] */
Create a Functions File
A child theme only requires two files, the second of which is ‘functions.php.’ This enqueue the child stylesheet with the parent theme, helping WordPress communicate between the two. The code you need for the child themes functions file differs depending on how your parent theme loads its stylesheet within ‘i ndex.php.’
For example, if following this guide and developing from scratch, your theme should use the ‘get_stylesheet_uri’ function. As a result, you will need to add the following code to your ‘functions.php’ file.
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
$parenthandle = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
$theme = wp_get_theme();
wp_enqueue_style( $parenthandle, get_template_directory_uri() . '/style.css',
array(), // if the parent theme code has a dependency, copy it to here
$theme->parent()->get('Version')
);
wp_enqueue_style( 'child-style', get_stylesheet_uri(),
array( $parenthandle ),
$theme->get('Version') // this only works if you have Version in the style header
);
}
In some cases, like when using a starter theme, your theme may call the ‘get_template’ function.’ Resultantly, the following code should be used.
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'child-style', get_stylesheet_uri(),
array( $parenthandle ),
wp_get_theme()->get('Version') // this only works if you have Version in the style header
);
}
Now you have everything you need for a functional child theme. To install the child theme, follow the same process as manually installing a starter theme, selecting your child theme folder instead.
End Result
Whether using a starter theme or developing from scratch, after reading this guide, you should understand WordPress theme development. Once you’ve built a basic theme with functions specific to your website, you can begin to flesh it out. Following this guide will lead to a responsive theme, fully compatible and customizable with WordPress.
WordPress Development with Idea Maker
Developing your own WordPress theme is a rewarding process; it allows your website to be customized to your exact requirements. However, theme development can be time-consuming and challenging when programming advanced features. For the best results, you should consider hiring a WordPress specialist development company, such as Idea Maker.
At Idea Maker, we have a team of expert developers dedicated to creating the perfect WordPress site for you. We offer fully customized, business-specific themes as well as advanced functionality. Schedule a free consultation today to learn more about how Idea Maker can help.
