Creating WordPress Theme – Getting Started

Creating WordPress Theme Getting Started
Share this to your friends

We might want to install WP(WordPress) locally as we don’t want to do all the coding online. If you have Apache, PHP, MySQL and phpMyAdmin ready (pretty long list needed huh), you can start now by downloading WP here.

You can also use Xampp or Wamp instead as both of this ease as the procedure completely.

Read How to Install XAMPP and WordPress Locally on PC/Windows if your having trouble setting up the server. Also you might want to try searching Google if your on a different OS.

Exporting Live WordPress Config to Localhost

You can also create a new database for your WP. Here I will be setting my local database the same as my live database :

  • Export your live WP database file and import it in your localhost using phpMyAdmin
  • Set user priviledge and settings exactly the same as your live configurations
  • Extract WP files in your local server’s htdocs directory
  • And visit http://localhost to view WP wizard
  • Configure WP settings (the wizard will just create a new wp-config.php file so you can just copy the details specified in your live wp-config file.)

If all works fine, you can now see WP login page locally.

Lets Start Creating WordPress Theme From Scratch

Oh another reminder, before creating WordPress theme, please be sure that you use the same PHP version when coding, both live and locally. I actually experience that problem, I think from using the empty function which only allows variables in older versions of PHP. Having updated version in localhost and finishing coding without encountering errors. You’ll be suprise when your site suddenly become inaccessible due to that simple error when it goes live.

Be sure to check your PHP version by putting phpinfo() in a PHP file or by using command prompt. You can set the default version of PHP in your live site using PHP Selector located in your CPanel under the Softwares tab. Always go with the latest stable version.

The Simple Layout for the Theme

Simple Custom WordPress Theme

Guess you’ll notice that this is the exact format I’m using in this blog. Designing the site as simple as possible (colors and other elements will be adjusted later) just to focus more on the coding.

Preparing Template Files

You might want to read Theme Development to learn all the things about creating theme.

But just to start things as simple as possible,

  • let’s prepare a new folder for our theme, (I’m naming it escimma.)
  • put it in the themes folder inside WP wp-content directory
  • create PHP files naming header, index, functions and footer, also add a blank style.css file in it (Read Theme Development article to know all about the files needed for your theme. Name it exactly what the article suggests and put it in your theme directory.)
  • and try login in to WP and try setting it as the default theme.

Obviously you’ll see blank. :D.

WordPress Customize Page

Now in your WP Dashboard, navigate to the Appearance tab and try to select Customize.

Default WordPress Customize Page

The default WP Customize page has a control for editing Site Title and Tagline.

  • Click the Site Identity tab
  • Fill up the form (Site Title = ESCIMMA.com and Tagline = A short description)
  • and click Save & Publish

Let’s try retrieving the data we inserted.

Go back to WP Dashboard, hover to Appearance tab, and click Editor. (You can also try using Notepad++ or any other source code editor you prefer.)

Putting Codes in Template Files

Let’s first open our PHP files and try putting codes.

In header.php put :


<!DOCTYPE html>
<head>
      <?php wp_head(); ?>
</head>
<body>
      <header>
            <h1><?php bloginfo( 'name' ); ?></h1>
            <h3><?php bloginfo( 'description' ); ?></h3>
      </header>

In footer.php put :


<footer>
      This is the site's footer.
      <?php wp_footer(); ?>
</footer>
</body>
</html>

This is not the complete header.php  and footer.php code. Just to make things simplier, we just added some HTML5 code and just a few PHP functions.

The bloginfo() function will retrieve the details we provided earlier, you can read more about this function here. As WP stated in that article, we can retrieve the information we provided in our blog settings, mostly the things we put in the General settings using this function. You can check WP documentation to understand more about each function and what values you can retrieve to avoid hardcoding.

Let’s try putting code in our index.php file.

In index.php put :


<?php get_header(); ?>
<?php get_footer(); ?>

Just two simple codes. And obviously you understand what the code inside index.php do. If you try to view your site after saving all the files. You can now see the data we retrieve in our header.php and footer.php.
If you can’t see the output, please re-check your work.

Putting More Codes

Header(header.php)


<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
      <meta charset="<?php bloginfo( 'charset' ); ?>"/>
      <title><?php bloginfo( 'name' ); ?> | <?php is_front_page() ? bloginfo( 'description' ) : wp_title(); ?></title>
      <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>" />
<?php wp_head(); ?>
</head>

<body>
      <header>
            <h1><a href=""><?php bloginfo( 'name' ); ?></a></h1>
      </header>

      <nav>
      </nav>

Read Creating WordPress Theme – Inside Header File for a short explanation about the code above.

Index(index.php)


<?php get_header(); ?>
<section>
<aside>
</aside>
<?php if( have_posts()) : while(have_posts()) : the_post(); ?>
<article>
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<p><?php the_content('Read more...'); ?></p>
<p>Posted in <?php the_category(', '); ?> on <?php the_time('F j, Y'); ?></p>
<p><?php comments_number('No comment', '1 comment', '% comments'); ?></p>
</article>
<?php endwhile; ?>
<?php next_posts_link( 'Older posts' ); ?>
<?php previous_posts_link( 'Newer posts' ); ?>
<?php else: ?>
<article>
<h2 class="error">No Article Found</h2>
<p><b>Sorry, there are currently no article available.</b></p>
</article>
<a href="<?php echo get_home_url(); ?>">Home</a>
<?php endif; ?>
</section>
<?php get_footer(); ?>

Read Creating WordPress Theme – The Index File Loop for a short explanation about the code above.

Footer(footer.php)


<footer>
(c) Project Escimma 2016 - 2017
<?php wp_footer(); ?>
</footer>
</body>
</html>

CSS(style.css)


body {
background:#333333;
width:70%;
margin: 0 auto;
}
header {
background: #FFFFFF;
padding:10px;
}
nav {
background: #660000;
padding:5px;
}
section {
background: #999999;
padding:10px;
}
aside {
float:right;
background : #FFFFFF;
width:22%;
padding:3px 0px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
margin-bottom:10px;
}
article {
background: #FFFFFF;
width:75%;
min-height:250px;
padding:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
margin-bottom:10px;
}
footer {
background: #011E3C;
color:#FFFFFF;
min-height:50px;
padding:10px;
}

The image below is what the site would look like if you put the codes correctly.

Simple Custom WordPress Theme Frontpage

Leave a Reply