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: http://wordpress.org/
*Author: Sunil Kumar Sharma
*Author URI: https://www.rjcodex.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 :
http://developer.wordpress.org/themes/
http://codex.wordpress.org/Theme_Development
