WPservice DEVELOPMENT STUDIO PRESENTS
LONG-TERM GROWTH
We always design our websites with your future success in mind, carefully planning and optimizing all content to ensure maximum visibility and long-term profitability

The Easiest Guide On How To Build A Custom WordPress Theme

build custom wordpress theme

Image credit: colorlib.com

Before you begin to build a custom WordPress theme, you need to head on over to your wp-content/themes directory and create as sub-folder. We will call ours our_theme for the purpose of this tutorial. Whatever you name your folder, it must match the name of your theme.

Tips to Customize a WordPress Theme

Before you start to create and customise a WordPress theme, you need to first do a bit of planning; ask yourself what you want your website to look like; what do you want the layout to look like? Do you want a sidebar, a header, a content area, and a footer? These are all key questions in the WordPress custom theme development process.

Then, you need to create some files:

  • php
  • php
  • php
  • php
  • css

You can create these files on your own computer using text editor or notepad. To upload them, you can use either FTP or the File Manager tool.

header.php File

To properly build a custom WordPress theme, you need to input some code into your files. Copy and past the following code into your header.php file:

<html>
<head>
<title>Tutorial theme</title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>HEADER</h1>
</div>

This is very simple HTML.

After the title line, add:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">

 index.php File

For this file, add the following code:

<?php get_header(); ?>
<div id="main">
<div id="content">
<h1>Main Area</h1>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<h4>Posted on <?php the_time('F jS, Y') ?></h4>
<p><?php the_content(__('(more...)')); ?></p>
<hr> <?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p><?php endif; ?>
</div>
<?php get_sidebar(); ?>
</div>
<div id="delimiter">
</div>
<?php get_footer(); ?>

You will also need to include your sidebar, the code of which is as follows:

<?php get_sidebar(); ?>

Here, you will be able to show your archives, post categories, and so on.

Then you need to add one last line for the footer:

<?php get_footer(); ?>

sidebar.php File

Next step in your WordPress custom theme development is to add the following code to your sidebar.php file:

<div id="sidebar">
<h2 ><?php _e('Categories'); ?></h2>
<ul >
<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
</ul>
<h2 ><?php _e('Archives'); ?></h2>
<ul >
<?php wp_get_archives('type=monthly'); ?>
</ul>
</div>

 footer.php File

Add these lines to get your footer file up and running:

<div id="footer">
<h1>FOOTER</h1>
</div>
</div>
</body>
</html>

This code will throw up a simple Footer table. You add links and additional text instead of code if you prefer.

style.css File

Finally, you can’t customise a WordPress theme without your style.css file. Copy and paste the following code:

body { text-align: center; }
#wrapper { display: block; border: 1px #a2a2a2 solid; width:90%; margin:0px auto; }
#header { border: 2px #a2a2a2 solid; }
#content { width: 75%; border: 2px #a2a2a2 solid; float: left; }
#sidebar { width: 23%; border: 2px #a2a2a2 solid; float: right; }
#delimiter { clear: both; }
#footer { border: 2px #a2a2a2 solid; }
.title { font-size: 11pt; font-family: verdana; font-weight: bold; }

From here, you can go and customize your WordPress theme or edit theme WordPress in any way you want so that your website stands out from all the rest. Enjoy!

Comments are closed.