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

Coding For Dummies – How To Make WordPress Theme

how to make wordpress theme

Image credit: lava360.com

If you have a website create with HTML and CSS, you don’t have to start all over again now that you’ve made the switch to WordPress. You can easily convert your HTML pages into WP. All that happens is that your website will become more powerful. Which is awesome!

But whether you are looking to convert your HTML website into a WP theme, or whether you’re starting from scratch, let’s take a look at how to build a WordPress theme the easy way.

How To Make A WordPress Theme: Give It A Name

  1. Before you begin, you need to download your index.html and CSS stylesheet.
  2. You also need a working WP installation and a theme.
  3. And you need to create a theme folder to store your new WP theme.
  4. Then, it’s time to give your theme a 100% original name. This is so that your theme is easy to identify when you install it.
  5. To do this, open your code editor before copying and pasting the contents of your CSS stylesheet into a brand new file. Save this as style.css.

Then add:

  • /*Theme Name: Your theme’s name
  • Theme URI: Your theme’s URL
  • Description: A brief description of your theme
  • Version: 1.0 or any other version you want
  • Author: Your name or WordPress.org’s username
  • Author URI: Your web address
  • Tags: Tags to locate your theme in the WordPress theme repository

Save your changes.

How To Make a WordPress Theme: Break Up Your HTML Template Into PHP Files

If you haven’t done so already, arrange your HTML template from left to right. If your design is different, play around with your code to get it right. This is easy and kinda fun too.

Then you need to create four PHP files: index.php, header.php, sidebar.php and footer.php. Save these in your theme folder.

Here is your index.html code that you can copy and paste:

<!DOCTYPE html>
<head
<meta charset="UTF-8">
<title>How To Convert HTML Template to WordPress Theme - WPExplorer</title>
<link rel="stylesheet" type="text/css" media="all" href="style.css"/>
</head>
<body>
<div id="wrap">
<header class="header">
<p>This is header section. Put your logo and other details here.</p>
</header><!-- .header -->
<div class="content">
<p>This is the main content area.</p>
</div><!-- .content -->
<div class="sidebar">
<p>This is the side bar</p>
</div><!-- .sidebar -->
<footer class="footer">
<p>And this is the footer.</p>
</footer><!-- .footer -->
</div><!-- #wrap -->
</body>
</html>

And here is the css.stylesheet code:

.header{width:99.8%; border:1px solid #999;height:135px;}
.content{width:70%; border:1px solid #999;margin-top:5px;}
.sidebar{float:right; margin-top:-54px;width:29%; border:1px solid #999;}
.footer{width:99.8%;border:1px solid #999;margin-top:10px;}
  1. Just copy and paste these into your code editor before saving. Then create the four PHP files mentioned above.
  2. Open your header.php (which should be empty), before logging into your WP installation.
  3. Go to appearance > Editor > header.php and copy and paste the code that lies between the <head> tags into the header.php.

This is the code that we are using for the tutorial purposes:

<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width">
    <title><?php wp_title( '|', true, 'right' ); ?></title>
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
    <!--[if lt IE 9]>
    <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
    <![endif]-->
    <?php wp_head(); ?>
</head>

Next, copy the following code into your index.html file:

<html>
    <head>
        <meta charset="<?php bloginfo( 'charset' ); ?>">
        <meta name="viewport" content="width=device-width">
        <title><?php wp_title( '|', true, 'right' ); ?></title>
        <link rel="profile" href="http://gmpg.org/xfn/11">
        <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
        <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
        <!--[if lt IE 9]>
        <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
        <![endif]-->
        <?php wp_head(); ?>
    </head>
    <body>
        <header class="header">
        <p>This is header section. Put your logo and other details here.</p>
    </header>

Between the <head> tags in your stylesheet, add:

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

Then add the following to the top of your index.php:

<?php get_header(); ?>

Before adding the following to the bottom:

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

These three lines are essentially your header.php, sidebar.php and footer.php. Save your changes. As it stands, your index.php file will display the following code:

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

How To Build A WordPress Theme: How To Add Posts

All that is really left is to add some posts. To add posts, you need to use a type of PHP function that we refer to as The Loop. This is a simple piece of code that will show your posts and comments wherever you place it.

We’re going to display our posts in the content section in the index.php template.

To do this, we have to copy the following code and place it between the <div class=“ content”> tags.

<div class="content">
    <?php if ( have_posts() ) : ?>
        <?php while ( have_posts() ) : the_post(); ?>
            <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                <div class="post-header">
                    <div class="date"><?php the_time( 'M j y' ); ?></div>
                    <h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
                    <div class="author"><?php the_author(); ?></div>
                </div><!--.post-header-->
                <div class="entry clear">
                    <?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?>
                    <?php the_content(); ?>
                    <?php edit_post_link(); ?>
                    <?php wp_link_pages(); ?>
                </div><!--. entry-->
                <footer class="post-footer">
                    <div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div>
                </footer><!--.post-footer-->
            </div><!-- .post-->
        <?php endwhile; /* rewind or continue if all posts have been fetched */ ?>
            <nav class="navigation index">
                <div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div>
                <div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div>
            </nav><!--.navigation-->
        <?php else : ?>
    <?php endif; ?>
</div><!--.content-->

That’s your posts sorted!

At this point, your header.php will look like the following:

<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width">
    <title><?php wp_title( '|', true, 'right' ); ?></title>
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
    <!--[if lt IE 9]>
    <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
    <![endif]-->
    <?php wp_head(); ?>
</head>

Get in touch with our theme developer if you have any questions!

If you don’t know how to make WordPress theme, you can easily get help from our experts!

Comments are closed.