Loading..

WordPress Theme Development | For Beginners

4 Mins Read
Welcome to my world, Read on #xpertzmate!

Develop a WordPress theme from scratch by following easy steps as described below. And I’m sure it really a good journey!!

This article is about developing WordPress Themes from scratch. WordPress Themes are files that work together to create the design and functionality of a WordPress site. Each Theme may be different, offering many choices for site owners to instantly change their website look.

WordPress Theme Structure

Define Theme

We need to write below comment text in the top of style.css file for defining the theme.

/**
 *Theme Name: XpertzMate | WordPress Theme
 *Theme URI: https://wordpress.org/
 *Author: Sunil Kumar Sharma
 *Author URI: https://www.xpertzmate.com/
 *Description: XpertzMate theme brings idea of basic theme development 
 *Version: 1.0
 *License: GNU General Public License v2 or later
 *License URI: http://www.gnu.org/licenses/gpl-2.0.html
 *Text Domain: xpertzmate
 *Tags: Dummy Theme, scratch theme 
**/

WordPress Theme File Summary

index.php

The main template. If no specific page templates are assigned or found, WordPress defaults back to using the theme’s index file to render pages.

style.css

The main style sheet. This must be included with your Theme. It must contain the information header for your Theme.

rtl.css

The RTL style sheet. This will be included automatically if the website’s text direction is right-to-left.

functions.php

This file contains all function, hook, etc.

single.php

The single post template. Used when a single post is queried.

page.php

The page template. Used when an individual Page is queried.

tag.php

The tag template. Used when a tag is queried.

archive.php

The archive template. Used when a category, author, or date is queried. Note that this template will be overridden by category.php, author.php, and date.php for their respective query types.

search.php

The search results template. Used when a search is performed.

404.php

The 404 NOT FOUND template. Used when WordPress cannot find a post or page that matches the query.

comments.php

comments.php template contains all the logic needed to pull comments out of the database and display them in your theme.

searchform.php

Template for displaying search forms.

Theme Templates Brief

Header – header.php

Everything from <! DOCTYPE html> to the main blog header will be in the header file. The header usually contains all the necessary head styles and the top navigation to the website. The only addition I will make to the code is adding <?php wp_head(); ?> right before the closing </head>

For language attribute in html tag <?php language_attributes(); ?>

For Charset in meta tag <?php bloginfo( ‘charset’ ); ?>

For body classes <?php body_class(); ?>

Get Navigation using <?php wp_nav_menu($args); ?>  here $args is a array of arguments

Include header in all other templates just add <?php get_header(); ?>

Footer – footer.php

Same deal for the footer as the header. It will include whatever visible footer you have and <?php wp_footer(); ?> right before </body>. Since I included the .container div in the header, I’m going to close it in the footer.

Use <?php get_sidebar(); ?> OR <?php dynamic_sidebar(‘sidebarID’); ?> for get  widgets .

Include footer in all other templates just add <?php get_footer(); ?>

Sidebar – sidebar.php

Most websites, especially blogs, will have a side area for including content such as archives, tags, categories, ads etc…

Use <?php get_sidebar(); ?> for get data from sidebar.php

Example:

<?php if ( is_active_sidebar( 'sidebar-1' )  ) : ?>
<div  id="secondary" class="sidebar" role="complementary">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</div><!-- .sidebar .widget-area -->
<?php endif; ?>

Content – content.php

If the sidebar is where all the secondary information goes, the content is where all the articles and main content of the website go.

Example:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  <header class="entry-header">
  	<h2 class="entry-title">
	<a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a>
	</h2>    
  </header><!-- .entry-header -->
  <div class="entry-content">
    <?php the_content(); ?>
  </div><!-- .entry-content --> 
  <footer class="entry-footer">
    <?php edit_post_link(); ?>
  </footer><!-- .entry-footer --> 
</article>

Search Form – searchform.php

searchform.php  file have code for search form .

Use <?php get_search_form(); ?> for get search form

Example:

<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
    <label>
        <span class="screen-reader-text"><?php echo _x( 'Search for:', 'label' ) ?></span>
        <input type="search" class="search-field"
            placeholder="<?php echo esc_attr_x( 'Search …', 'placeholder' ) ?>"
            value="<?php echo get_search_query() ?>" name="s"
            title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>" />
    </label>
    <input type="submit" class="search-submit" value="<?php echo esc_attr_x( 'Search', 'submit button' ) ?>" />
</form>

The Loop

The most exciting part is being able to dynamically insert content, and in WordPress we do that with The Loop. It’s the most important function of WordPress. All of your content is generated through a loop.

Example:

<?php get_header(); ?>
<div class="row">
    <div class="col-sm-8 blog-main">
    <?php 
    if ( have_posts() ) : while ( have_posts() ) : the_post();    
    	get_template_part( 'content', get_post_format() );    
    endwhile; endif; 
    ?>
    </div><!-- /.blog-main -->
<?php get_sidebar(); ?>
</div><!-- /.row -->
<?php get_footer(); ?>

Define Template:

<?php
/**
 * Template Name: Full Width Page
**/
?>

Things Not To Do:

  • Do not include js/css directly, enqueue css, js files.
  • Do not put any static content in templates. Create Meta boxes for that content
  • Create new template if any specific page layout do not use conditional tag.
  • Define image tag alt, title, width and height if possible
  • Use same classes and same html structure for tag.php, archive.php, category.php, search.php etc…. if possible.
  • Avoid import css file
  • If we are using paid theme then all changes need to done in child theme not in parent.
  • Do not use blank (without content) p and span tag in copy

Reference :

https://developer.wordpress.org/themes/
https://codex.wordpress.org/Theme_Development

Leave a Reply

Your email address will not be published. Required fields are marked *

You Can Check Also:

LET’S GET IN TOUCH!!

Need Help? or want to publish your article here
Send us an email and we will get back to you as soon as possible!

[email protected]