CMS (Content Management System)

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:

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:

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;

sidebar.php

The sidebar.php template code goes something like this;

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;

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

WordPress is a Content Management System (CMS), which allows us to generate cool websites or blogs with thousands of themes and plug-ins available as well as permit to create our own theme by converting HTML. Here we contribute the article on How to Convert HTML to WordPress Theme, that helps you to modernize your website or blog approximately as you would have imagined.

How Does WordPress Theme Functions?
Word Press functions rely on PHP to call on different parts of your content such as header, sidebar, and footer from the database management system it stands on a simple method.
For example, look into your /wp-content/themes/your theme name/ directory and open the header.php file.
Format of style sheet linking URL:

This is how WordPress uses PHP to display content in our XHTML.

The above PHP code is used to look-up your style sheet’s location from the style sheet directory or theme directory. Let’s get started to develop your own WordPress Theme. Throughout this process we need to use PHP codes for different parts of our content.

Important Things to know in WordPress Theme Development

Create a new folder and name it with your theme name that you prefer. Next, we need to create two files called, index.php and style.css within our theme directory. Copy your entire html template’s CSS code to style.css.
Add the following code at the top of the style.css file:

1. /*****************************/
2. Theme Name: Your theme name.
3. Theme URI: URL of your theme located
4. Description: description about your theme.
5. Version: 1.0
6. uthor: Author name
7. Author URI: Author URL.
8. /****************************/

Now create another 3 new files namely;

• header.php
• sidebar.php
• footer.php and place them in your theme directory.
• Next take a look at the header.php file from any of the WordPress theme, and copy that code to your new header.php file.
• Now open up your original HTML file and copy the code up to </head> part from the beginning of your html file.
• Now open up your new index.php file and copy the remaining part of your original HTML code other than </head> part as the content section into your index.php file.
• Next open up your new sidebar.php file; copy the sidebar section of your original code into the sidebar.php file.
• And finally, copy the original footer section of your original code into your footer.php file.

Final Package
That’s it, you have done. Before going to package your theme add this line at the very top of the index.php file:

<?php get_header(); ?>

Now go to the end of your index.php file and add the following two lines:

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

These three lines of PHP codes are often used to fetch and display your header.php, sidebar.php, and footer.php files within your index.php file. Your index.php is almost finished now.

Loop Function
The final process is to add the actual content into the code. The Loop is the PHP function that WordPress uses to call and display your posts from the database they are stored in. Copy the following code and paste it into your new theme’s index.php file (inside the div where the actual content goes).

<?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><!–end 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><!–end entry–> <div class=”post-footer”> <div class=”comments”><?php comments_popup_link( ‘Leave a Comment’, ‘1 Comment’, ‘% Comments’ ); ?></div> </div><!–end post footer–> </div><!–end post–> <?php endwhile; /* rewind or continue if all posts have been fetched */ ?> <div class=”navigation index”> <div class=”alignleft”><?php next_posts_link( ‘Older Entries’ ); ?></div> <div class=”alignright”><?php previous_posts_link( ‘Newer Entries’ ); ?></div> </div><!–end navigation–> <?php else : ?> <?php endif; ?>

Final Stage
Now upload your theme folder to /wp-content/themes/. Then log into WordPress and activate your theme. For even better understanding of the basic template structure and its coding structure please read the Part-2 article which will be posted soon.