, , , , , 0 comments

How to convert HTML to WordPress Theme? – Part 2

Here is the continuation of the past article which may clearly explain to you about the basic template elements and its coding structure in depth with complete module package. Every structure of webpage will consist of the following basic elements such as header, content and footer which are generated by template file in your current WordPress Theme as given below.

  • index.php
  • header.php
  • footer.php
  • sidebar.php
  • functions.php

index.php

The index.php template is the default template for displaying the contents (blog posts, pages, etc.) on a site. There are other files that can overwrite it, but you’ll learn about those in a later tutorial. For now, you’ll learn about its most important function: holding everything together.

When any page on a WordPress site is loaded, it looks for a template. In our case, this is the index.php template. It will be the template that’s expected to display the page.

The index file code goes here:

<?php get_header(); ?> 

<div id=”content”>

<?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(‘, ‘); ?> | <?php comments_number(‘No comment’, ‘1 comment’, ‘% comments’); ?></p>

<?php endwhile; else: ?>

<h2>Woops…</h2>

<p>Sorry, no posts we’re found.</p>

<?php endif; ?>

<p align=”center”><?php posts_nav_link(); ?></p>

</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

This code does several things as explained in Part 1 of this Tutorial series:

  • Uses the WordPress function get_header() to load the header.php template.
  • Defines some basic HTML for the structure of our future content.
  • Uses the WordPress function get_sidebar() to load the sidebar.php template.
  • Uses the WordPress function get_footer() to load the footer.php template.

header.php

In the previous section, you used a PHP function called get_header() to load a template called header.php. Since this file doesn’t exist yet, you’ll need to create it. So, create a new file using your text editor called header.php and save it within your theme folder.

The file directory structure will be:

  • Your theme name
    • header.php
    • index.php
    • style.css

The source code formats for header.php something like the following:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> 

<html xmlns=”http://www.w3.org/1999/xhtml” <?php language_attributes() ?>>

<head profile=”http://gmpg.org/xfn/11″>

<title><?php bloginfo(‘name’); ?> <?php wp_title(); ?></title>

<meta http-equiv=”Content-Type” content=”<?php bloginfo(‘html_type’); ?>; charset=<?php bloginfo(‘charset’); ?>” />

<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen,projection” />

<?php wp_head(); ?>

</head>

<body>

<div id=”wrapper”>

<div id=”header”>

<p class=”description”><?php bloginfo(‘description’); ?></p>

<h1><a href=”<?php echo get_option(‘home’); ?>/”><?php bloginfo(‘name’); ?></a></h1>
<ul id=”nav”>

<?php wp_list_pages(‘sort_column=menu_order&title_li=’); ?>

</ul></div>

footer.php

The footer template should close out all open HTML tags that were opened in the header template and index template.

The footer template code will be looks like this;

<div id=”footer”> 

<!– Please leave this line intact –>

<p>Template design by <a href=”https://www.treeshore.com”>TreeShore</a>

<!– you can delete below here –>

© <?php the_time(‘Y’); ?> <?php bloginfo(‘name’); ?>.<br />

<?php /*?><a href=”<?php bloginfo(‘rss2_url’); ?>”>Grab the feed</a>.<?php */?></p>

</div></div><?php wp_footer(); ?>

</body>

</html>

sidebar.php

The sidebar.php template code goes something like this;

<?php 

/*****************

* The Sidebar containing the primary and secondary widget areas.

* @package WordPress

* @subpackage Theme Name

* @since Theme Version

*************** */ ?>

<div id=”primary-sidebar”>

<ul class=”news”>

<?php

if ( ! dynamic_sidebar( ‘primary-sidebar’ ) ) : ?>

<li><?php get_search_form(); ?>

</br></li><li><h3><?php _e( ‘Archives’, ‘TreeShore’ ); ?></h3>

<ul><?php wp_get_archives( ‘type=monthly’ ); ?>

</ul> </br> </li><li>

<h3><?php _e( ‘Meta’, ‘TreeShore’ ); ?></h3>

<ul>

<?php wp_register(); ?>

<?php wp_loginout(); ?>

<?php wp_meta(); ?>

</ul></li>

<?php endif; ?>

</ul> </div> <?php

if ( is_active_sidebar( ‘secondary-sidebar’ ) ) : ?>

<div id=”secondary-sidebar”>

<ul class=”news1″>

<?php dynamic_sidebar( ‘secondary-sidebar’ ); ?>

</ul></div>

<?php endif; ?>

And finally what does the functions.php file do with WordPress?

This actually invokes calling of WordPress Widgets to your website. And also enables you to add more sidebar widgets to your site.

The code format for this function.php;

<?php 

function TreeShore_widgets_init() {

// Area 1, located at the top of the sidebar.

register_sidebar( array(

‘name’ => __( ‘Primary Sidebar’, ‘TreeShore’ ),

‘id’ => ‘primary-sidebar’,

‘description’ => __( ‘Primary Sidebar’, ‘TreeShore’ ),

‘before_widget’ => ‘<li id=”%1$s” class=”widget-container %2$s”>’,

‘after_widget’ => ‘</li>’,

‘before_title’ => ‘<h3 class=”widget-title”>’,

‘after_title’ => ‘</h3>’,

) );

// Area 2, located below the Primary Widget Area in the sidebar. Empty by default.

register_sidebar( array(

‘name’ => __( ‘Secondary Sidebar’, ‘TreeShore’ ),

‘id’ => ‘secondary-sidebar’,

‘description’ => __( ‘Secondary Sidebar’, ‘TreeShore’ ),

‘before_widget’ => ‘<li id=”%1$s” class=”widget-container %2$s”>’,

‘after_widget’ => ‘</li>’,

‘before_title’ => ‘<h3 class=”widget-title”>’,

‘after_title’ => ‘</h3>’,

) );

}

/** Register sidebars by running TreeShore_widgets_init() on the widgets_init hook. */

add_action( ‘widgets_init’, ‘TreeShore_widgets_init’ );

?>

Now you may understand the process of converting your HTML code to WordPress theme.