How to convert HTML to WordPress Theme? – Part 1
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:
| <link rel=”stylesheet” type=”text/css” media=”all” href=”<?php bloginfo( ‘stylesheet_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:
- /*****************************/
- Theme Name: Your theme name.
- Theme URI: URL of your theme located
- Description: description about your theme.
- Version: 1.0
- uthor: Author name
- Author URI: Author URL.
- /****************************/
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.