BASIC OF WORDPRESS CUSTOM THEME DEVELOPMENT

Read Time:2 Minute, 42 Second

STEP 01

First install WordPress in your computer local server (like XAMPP/WAMPP).

STEP 02

Now I guess already you are installed WordPress in your computer. WordPress Themes live in subdirectories of the WordPress theme directory. Therefore, you go to C:\xampp\htdocs and there have your wordpress project and go into and open theme folder C:\xampp\htdocs\wordpress\wp-content\themes following path. Here creates new folder as your theme name. I’m create a folder and its name mytheme. Look image below.

STEP 03

At the very minimum, a WordPress Theme consists of two files.

style.css
index.php

At least we must create these two files in your theme directory.

STEP 04

But, the index.php template file is very flexible. It can be used to include all references to the header, footer, content, categories, archives, search, error and any other page created in WordPress. Or it can be divided into modular template files, each one taking on part of the workload. Therefore, now we need to divided it’s like below files. So, create below files.

footer.php
header.php

STEP 05

Now I guess you have basic knowledge about HTML, CSS and PHP. So, below codes copy and paste in to relevant each file.

header.php

<!DOCTYPE html>

<html <?php language_attributes(); ?>>

    <head>

        <meta charset="<?php bloginfo( 'charset' ); ?>">
        <title><?php wp_title(); ?></title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" >
        <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/style.css">
        <?php wp_head(); ?>
    </head>

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

    <header>
    <nav>
        <p class="navbar-text">NAVBAR HERE</p>
        <hr />
    </nav>
    </header><!-- #site-header -->

index.php

<?php get_header(); ?>

<div id="main">
    <?php if(have_posts()) : while(have_posts()) : the_post(); ?>
    <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    <?php the_content(); ?>
    <p><?php the_time('F j,Y'); ?> at <?php the_time('g:i a'); ?> | <?php the_category(', '); ?></p>
    <?php endwhile; else: ?>
    <p>Sorry, no post we're found.</p>
    <?php endif; ?>
</div><!-- #site-content -->

<?php
get_footer();

footer.php

<footer>
<hr />
    <p class="developer">Developed by Sampath Tharanga</p>
</footer><!-- #site-footer -->

<?php wp_footer(); ?>

</body>
</html>

style.css

/*
Theme Name: My Theme
Text Domain: mytheme
Version: 1.0
Requires at least: 4.7
Requires PHP: 5.2.4
Description: This is my first custom theme.
Author URI: https://athaebula.com/
Theme URI: https://athaebula.com/
*/

body{
    background-color: lightblue;
}

.developer{
    text-align: center;
}
.navbar-text{
    text-align: center;
}

Ok. Now our theme is ready. However, you can find relevant wordpress functions details using official WordPress website. Also, change you want some codes and arrange your theme.

STEP 06

Go to WordPress dashboard -> Appearance -> Themes -> active “mytheme”.