Are you a WordPress developer ready to make your first theme?
I’ve created a simple tutorial for you so that you can learn WordPress theme development in just 13 steps.
I provide a simple but powerful WordPress theme development tutorial in this article. Follow these simple steps to create your first WordPress theme.
TL;DR:
- Install WordPress
- Create a theme folder
- Create style.css
- Create the header template
- Create the footer template
- Create the sidebar template
- Create the Single template
- Create the page template
- Normalize the margins
- Register the widget areas
- Register the menu area
- Output the posts
- Activate your theme
For this tutorial, we will make a custom theme folder in the file system of an existing website.
- Deploy a WordPress installation.
- Access its files via Explorer, FTP, or cpanel.
- Create a few posts so we have something to display in your new theme.
Create a dedicated folder for your theme.
This folder will contain all the necessary files for your theme to work properly.
In the WordPress installation directory, create a custom-theme folder under wp-content/themes.
It is important to choose a relevant and descriptive name for your theme folder, as it will be used to identify your theme in the WordPress dashboard.
Create the file style.css in wp-content/themes/customtheme.
This file will contain the CSS to define the site’s styles.
Add the following content, changing your values where appropriate.
/*Theme Name: My Custom Theme
Theme URI: https://thecarolreport.com/wordpress-theme-tutorials/
Author: Carol Bogart
Author URI: https://thecarolreport.com
Description: Carol’s Theme
Version 1.0.0
License: GNU General Public License v2 or later
License URI:
Text Domain: custom-theme
*/
Create header.php.
Add this code.
<!DOCTYPE html><html <?php language_attributes(); ?>
<head>
<title><?php bloginfo(‘name’); ?> » <?php is_front_page() ? bloginfo(‘description’) : wp_title(”); ?></title>
<meta charset=”<?php bloginfo( ‘charset’ ); ?>”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>”>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header class=”my-logo”>
<h1><a href=”<?php echo esc_url( home_url( ‘/’ ) ); ?>”><?php bloginfo(‘name’); ?></a></h1>
</header>
<?php wp_nav_menu( array( ‘header-menu’ => ‘header-menu’ ) ); ?>
Create footer.php.
Add this code.
<footer><p>© <?php echo date(‘Y’); ?> <?php bloginfo(‘name’); ?>. All rights reserved.</p>
</footer>
</body>
</html>
Create sidebar.php.
Add this code.
<?php if ( is_active_sidebar( ‘sidebar’ ) ) : ?><aside id=”primary-sidebar” class=”primary-sidebar widget-area” role=”complementary”>
<?php dynamic_sidebar( ‘sidebar’ ); ?>
</aside>
<?php endif; ?>
Create single.php.
Add this code.
<?php get_header(); ?><main class=”wrap”>
<section class=”content-area content-full-width”>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article class=”article-full”>
<header>
<h2><?php the_title(); ?></h2>
By: <?php the_author(); ?>
</header>
<?php the_content(); ?>
</article>
<?php endwhile; else : ?>
<article>
<p>Sorry, no post was found!</p>
</article>
<?php endif; ?>
</section>
</main>
<?php get_footer(); ?>
Create page.php.
Add this code.
<?php get_header(); ?><main class=”wrap”>
<section class=”content-area content-thin”>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article class=”article-full”>
<header>
<h2><?php the_title(); ?></h2>
By: <?php the_author(); ?>
</header>
<?php the_content(); ?>
</article>
<?php endwhile; else : ?>
<article>
<p>Sorry, no page was found!</p>
</article>
<?php endif; ?>
</section><?php get_sidebar(); ?>
</main>
<?php get_footer(); ?>
Create functions.php.
Add this code.
<?phpfunction add_normalize_CSS() {
wp_enqueue_style( ‘normalize-styles’, “https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css”);
}
add_action(‘wp_enqueue_scripts’, ‘add_normalize_CSS’);
Append functions.php with this code:
register_sidebar( array(‘name’ => ‘Sidebar’,
‘id’ => ‘sidebar’,
‘before_widget’ => ‘<div>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h2>’,
‘after_title’ => ‘</h2>’,
) );
}
add_action( ‘widgets_init’, ‘add_widget_support’ );
Append functions.php with this code:
function add_Main_Nav() {register_nav_menu(‘header-menu’,__( ‘Header Menu’ ));
}
add_action( ‘init’, ‘add_Main_Nav’ );
Append index.php
Add this code:
<?php get_header(); ?><main class=”wrap”>
<section class=”content-area content-thin”>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article class=”article-loop”>
<header>
<h2><a href=”<?php the_permalink(); ?>” title=”<?php the_title_attribute(); ?>”><?php the_title(); ?></a></h2>
By: <?php the_author(); ?>
</header>
<?php the_excerpt(); ?>
</article>
<?php endwhile; else : ?>
<article>
<p>Sorry, no posts were found!</p>
</article>
<?php endif; ?>
</section><?php get_sidebar(); ?>
</main>
<?php get_footer(); ?>
After you have created and coded your custom theme, it’s time to activate it in the WordPress dashboard.
Log in to your WordPress site and navigate to the “Appearance” section.
Here, you will find the “Themes” option.
Click on it to access the themes page.
Hover over your theme’s square and click the Activate button.
Conclusion
Creating the basic components of a WordPress theme is pretty easy, as you can see.
Themes can get so much more interesting than this, though.
If you’re serious about theme development, check out my articles 9+ WordPress Theme Tutorials Rated (Free and Paid) and The Best WordPress Training for Web Developers.
