How to Convert a Static HTML Template into a Responsive WordPress Theme

(Note: Since this is a php file, all of the functions and code relating to php must be enclosed with < ?php ?> tag.)
add_action(‘init’, ‘register_my_menus’); function register_my_menus() { register_nav_menus(array( ‘main-menu’ => ‘Main Menu’ )); }

However, you don’t need to be a PHP web developer to create a WordPress theme. You just need to have a solid foundation about HTML, CSS, JavaScript as well as a basic background on PHP.

  • NeoBlog HTML and CSS theme
  • Basic Knowledge of the WordPress Codex
  • Intermediate Knowledge of PHP and jQuery

<!– BLOG AREA –> <section> <hr class=&”no-margin&” /> <div class=&”blog-container section-content&”> <div class=&”container&”> <div class=&”row&”> <div class=&”col-md-8&”> <ul class=&”negative-margin&”> <li> <h1><a href=&”single-blog.html&” class=&”gray&”>Should I use a Pencil or a Ballpen?</a></h1> By <a href=&”#&”>Sam Norton</a> / On July 20, 2014 / <a href=&”#&”>Life Hacks</a> <figure> <img class=&”opacity-hover box-layer img-responsive&” src=&”images/thumb1.jpg&” alt=&”Pencil or Ballpen&” /> </figure> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.. <div class=&”btn-margin&”> <a href=&”single-blog.html&” class=&”btn btn-primary&”>CONTINUE READING >>> </a> </div> </li> <li> <h1><a href=&”single-blog.html&” class=&”gray&”>How to test your patience!</a></h1> By <a href=&”#&”>Sam Norton</a> / On July 20, 2014 / <a href=&”#&”>Life Tips</a> <figure> <img class=&”box-layer img-responsive&” src=&”images/thumb2.jpg&” alt=&”Pencil or Ballpen&” /> </figure> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.. <div class=&”btn-margin&”> <a href=&”single-blog.html&” class=&”btn btn-primary&”>CONTINUE READING >>> </a> </div> </li> </ul> <div class=&”box-layer align-center page-nav&”> <ul class=&”btn&”> <li><a href=&”#&”>Next Page >>> </a></li> </ul> </div> </div>

While trying out this tutorial, you might have issues with combining PHP code with the HTML code.
On the code above, a simple message error message “Oh Snap! Page not found!” is displayed along with a home link URL. This is making sure that the visitor will stay on the site.
The NeoBlog WordPress theme is now complete! Congratulations!

  • Be careful of the name of the templates file you created. By default, WordPress recognizes the default template name such as single.php and page.php file. I recommend checking the name of the default WordPress template before naming or creating a new custom file.
  • Check out WordPress Codex for some functions, tags or some other PHP code before using it on your template files. This will keep you on the right track on what you want to do in your code.
  • Sometimes you need some external jQuery files to improve the look of your WordPress theme or add some functionality. WordPress will not provide everything in a box.
  • Make sure to use well-structured, error-free PHP and valid HTML.
  • Use clean, valid CSS.
  • Follow design guidelines in site design and layout.
  • Backup your files. You never have anything to lose by creating a backup. As a precautionary measure, you should backup all of your theme files, plugins you are using as well as some other files related to your theme development.

Why You Need to Take Note of PHP

Copy the code below and paste it to the page-about.php file.
It can only provide the basic features of a blog theme such as the sidebar, footer, search box, post list, featured images and so on.
As online business are grows, more and more clients are willing to pay large amounts of dollars for their sites to those with the right skill sets. You probably have learned how to create an HTML and CSS website but, chances are, these sites won’t make any more sense for a big business or even blog site nowadays.
<?php global $wp_query; if ($wp_query->max_num_pages > 1) : ?> <div class=&”box-layer align-center page-nav&”> <ul class=&”btn&”> <li><?php previous_posts_link(‘<<< Previous Page’, $wp_query->max_num_pages); ?></li> <li><?php next_posts_link(‘Next Page >>>’, $wp_query->max_num_pages); ?></li> </ul> </div> <!– end box –> <?php endif; ?> <?php endif; ?>

<?php if (has_post_thumbnail()) : ?> <figure> <a href=&”<?php the_permalink(); ?>&”><?php the_post_thumbnail(”, array(‘class’ => ‘opacity-hover box-layer img-responsive’)); ?></a> </figure> <?php endif; ?>

The screenshot will only be shown as 387x 290 px on the WordPress admin panel, but the over double-sized image allows for high-resolution viewing on HiDPI displays.
<div id=&”post-<?php the_ID(); ?>&” <?php post_class(); ?>> <header class=&”entry-header&”> <?php the_title( sprintf( ‘ <h1 class=&”entry-title&”><a href=&”%s&” rel=&”bookmark&”>’, esc_url( get_permalink() ) ), ‘</a></h1> ‘ ); ?> <?php if ( ‘post’ == get_post_type() ) : ?> <div class=&”entry-meta&”> <?php endif; ?> </header> By <a href=&”<?php the_author_posts() ?>&”><?php the_author(); ?> </a> / On <?php echo get_the_date(‘F j, Y’); ?> / <?php the_category(); ?> <?php the_excerpt(); ?> </div>

Step 2.14 – Working with comments.php

If you are going to check the NeoBlog WP theme on the front end, you will notice a blank page because you have not put anything on our index.php file yet.
A WordPress theme is a way of ‘skinning’ the external design of your website. The theme can make a big difference to the overall look of your site. It offers a graphical interface via the WordPress template files.
Compared with static HTML and CSS sites, a WordPress theme consists with a bunch of template files.

Part 1. The Template Files

<div class=&”controller&”> <form role=&”search&” method=&”get&” class=&”search-form&” action=&”<?php echo home_url(); ?>&”> <input type=’textbox’ name=&”s&” class=&”form-control&” id=&”search-box&” value=&”<?php the_search_query(); ?>&” placeholder=&”Search..&”/> <input class=&”btn btn-primary no-border&” type=&”submit&” class=&”search-submit&” value=&”Search&” /> </form> </div>

Afterwards, save it as a screenshot.png file on the root directory of the NeoBlog WP theme.

  • css folder – This folder contains all the stylesheets. Copy this folder from the NeoBlog HTML and CSS theme.
  • fonts folder – This folder contains all the external fonts used in the markup. Copy this folder from our NeoBlog HTML and CSS theme.
  • images folder – This folder contains all the images such as the logo and so on. This folder will be copied from NeoBlog HTML and CSS theme.
  • js folder – This folder contains all of the javascripts. Also, copy this from the NeoBlog HTML and CSS theme.
  • header.php – This file will contain the code for the header section of the theme.
  • footer.php – This file will contain the code for the footer section of the theme.
  • index.php – This is the main file for the theme. It will contain the code for the Main Area and specify where the other files will be included.
  • functions.php – This file behaves like a WordPress Plugin, adding features and functionality to a WordPress site.
  • single.php – This file will contain the basic layout of a blog page.
  • page.php – This file will contain the basic layout of a page.
  • page-about.php – This is a WordPress’s built-in Post Types template. If a specific page, or a group of pages should behave or display differently, this is easily accomplished with this page template. For this template, it will display an About page layout
  • page-contact.php – Another type of WordPress’s built-in Post Types template. This template will display a contact form on the pages it was set.
  • content-search.php – This file will run the loop for the search to output the results.
  • search.php – This file is responsible for displaying search results pages.
  • searchform.php – This file contains the layout of the search form.
  • comments.php – This file will contain the code for displaying comments.
  • sidebar.php – This file will contain the sidebar widget area.
  • 404.php – This file will return a “Not Found” notification if a particular search query is not found or doesn’t exist in the database.
  • style.css – This file will include all of the styles and information of the NeoBlog theme.
  • screenshot – a png image file, that should accurately show the theme design or the title of theme.

 

Step 1.1 – Copying Necessary Files to the NeoBlog WP Theme

The theme_location parameter will display the menu assignment to the location it was set. Otherwise, if it was not set, the parameter fallback_cb will determine what is displayed.
It also has a series of @import tags. This will link the stylesheets from the CSS folder to the main stylesheet of the NeoBlog WP theme, which is this file.

Step 1.2 – Naming Your WordPress Theme with style.css

WordPress is written using PHP as its scripting language. This has an open source license, certified by the Open Source Initiative. Just like WordPress, PHP is also open-sourced.
<section> <div class=&”comment-section&”> <?php if ( comments_open() || ‘0’ != get_comments_number() ) : comments_template(); endif; ?> </div> </section>

However turning on the Debugging mode or checking your error log might help.

Step 1.3 – Adding a Screenshot Image File

Now that the theme has been successfully named thru style.css file, add a screenshot of the theme. Create an 880 x 660 px file in Photoshop and put a title text, the short description and the author of the theme on it.
You must have the same HTML code below.
For this part of the tutorial, first create a php file and call it page-about.php. Since this page is focused on the details about the website owner, it just contains plain HTML code along with the header, sidebar and footer.
To add the contents inside the home page, open the index.html file and copy the blog area section up to the closing div tag of box-layer align-center page-nav class and then paste it just under the get_header function. You’ll get similar code below.

Step 1.4 – Activating the Theme

Now to assign a page template to the page, go to the right side panel and look for Page Attributes panel on the right side. Under template, select the preferred template and hit Publish.
pages
<?php get_header(); ?> <!– BLOG AREA –> <section> <hr class=&”no-margin&” /> <div class=&”blog-container section-content&”> <div class=&”container&”> <div class=&”row&”> <div class=&”col-md-8&”> <div class=&”box-layer custom-padding&”> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <h3> <?php the_title(); ?> </h3> <?php if (has_post_thumbnail()) : ?> <figure> <a href=&”<?php the_permalink(); ?>&”><?php the_post_thumbnail(”, array(‘class’ => ‘opacity-hover box-layer img-responsive’)); ?></a> </figure> <?php endif; ?> <?php the_content(); ?> <?php endwhile; endif; //ends the loop ?> </div> </div> <!– SIDEBAR AREA –> <aside> <div class=&”col-md-3 col-md-offset-1 margin-sidebar&”> <?php get_sidebar(); ?> </div> </aside> </section> <?php get_footer(); ?>

For the navigation menu, use the wp_nav_menu function to display a navigation menu created in the admin panel of WordPress.
/***********************************************************************************************/ /* Add Theme Support for Post Thumbnails */ /***********************************************************************************************/ if (function_exists(‘add_theme_support’)) { add_theme_support(‘post-thumbnails’); set_post_thumbnail_size(742, 428); }

The code below will have an error since it does not have an end if statement:

Major Issues You Might Encounter With This Tutorial

Now to make it easier for you to follow these steps, we created these video tutorials to make it easier for you to follow the steps on this tutorial by just watching how to do it.
Our HTML file is now prepared and ready to be converted into a set of theme files. In the second part of this tutorial, we’ll work on some template files and add functions to support some functionality of your WordPress theme.
<?php get_header(); ?> <section> <hr class=&”no-margin&” /> <div class=&”blog-container section-content&”> <div class=&”container&”> <div class=&”row&”> <div class=&”col-md-8&”> <div class=&”box-layer custom-padding&”> <div id=&”container&”> <div id=&”content&”> <div class=&”align-center&”> <h3>We want to hear from you!</h3> If you are seeking to contact us, please fill up the form below. If you want to advertise or be partner with us just inform us on the message box below. Thank you so much for your support! We really appreciate! <div class=&”entry-content&”> <?php if(isset($emailSent) $emailSent == true) { ?> <div class=&”thanks&”> Thanks, your email was sent successfully. </div> <?php } else { ?> <?php the_content(); ?> <?php if(isset($hasError) || isset($captchaError)) { ?> Sorry, an error occured. <?php } ?> <form action=&”<?php the_permalink(); ?>&” id=&”contactForm&” method=&”post&” class=&”general-form&”> <div class=&”contactform&”> <input type=&”text&” name=&”contactName&” class=&”form-control&” id=&”contactName&” placeholder=&”Your Name..&” value=&”<?php if(isset($_POST[‘contactName’])) echo $_POST[‘contactName’];?>&” class=&”required requiredField&” /> <?php if($nameError != ”) { ?> <span class=&”error&”><?=$nameError;?></span> <?php } ?> <input type=&”text&” name=&”email&” id=&”email&” class=&”form-control&” placeholder=&”Your Email..&” value=&”<?php if(isset($_POST[’email’])) echo $_POST[’email’];?>&” class=&”required requiredField email&” /> <?php if($emailError != ”) { ?> <span class=&”error&”><?=$emailError;?></span> <?php } ?> <input type=&”text&” name=&”subject&” id=&”subject&” class=&”form-control&” placeholder=&”Your Subject..&” value=&”<?php if(isset($_POST[‘subject’])) echo $_POST[‘subject’];?>&” class=&”required requiredField subject&” /> <?php if($subjectError != ”) { ?> <span class=&”error&”><?=$subjectError;?></span> <?php } ?> <textarea name=&”comments&” id=&”commentsText&” class=&”form-control&” placeholder=&”Your Message&” rows=&”4&” cols=&”100&” class=&”required requiredField&”><?php if(isset($_POST[‘comments’])) { if(function_exists(‘stripslashes’)) { echo stripslashes($_POST[‘comments’]); } else { echo $_POST[‘comments’]; } } ?></textarea> <?php if($commentError != ”) { ?> <span class=&”error&”><?=$commentError;?></span> <?php } ?> <input type=&”submit&” class=&”btn btn-primary no-border&” value=&”Send Message&”></input> </div> <input type=&”hidden&” name=&”submitted&” id=&”submitted&” value=&”true&” /> </form> <?php } ?> </div> <!– .entry-content –> </div> <!– .post –> </div> </div> </div> <!– RELATED ARTICLE AREA –> </div> <aside> <!– SIDEBAR AREA –> <div class=&”col-md-3 col-md-offset-1 margin-sidebar&”> <?php get_sidebar(); ?> </div> </aside> </section> <?php get_footer(); ?>

To start converting your NeoBlog WordPress theme, create the theme folder in the wp-content/themes directory in the WordPress installation folder.
register_sidebar( array( ‘id’ => ‘main-sidebar’, ‘name’ => __( ‘Main Sidebar’, $text_domain ), ‘description’ => __( ‘This the main sidebar.’, $text_domain ), ) );

With regards to the featured image, use the code the following code.
Copy the code below and replace the static html header information just copied.

What Limitations Does This Tutorial Have?

<?php get_header(); ?> <!– BLOG AREA –> <section> <hr class=&”no-margin&” /> <div class=&”blog-container section-content&”> <div class=&”container&”> <div class=&”row&”> <div class=&”col-md-8&”> <div class=&”box-layer custom-padding&”> <section> <h3> Oh Snap! Page not found!</h3> <h3> It seems you’re looking for something that isn’t here!</h3> <a href=&”<?php echo home_url(); ?>&”>Click here</a> to go back to homepage! </section> </div> </div> <aside> <!– SIDEBAR AREA –> <div class=&”col-md-3 col-md-offset-1 margin-sidebar&”> <?php get_sidebar(); ?> </div> </aside> </section> <?php get_footer(); ?>

Open the functions.php and add again the following code.

Rounding Up Part 1

But, doing this won’t display the featured image. You need to add functions first to register the featured image. Copy the code below and paste it into the functions.php.
In this part of the series, you will learn what code each remaining WordPress template must have to build a working WordPress theme.
In this part of the series, you will learn what code each remaining WordPress template must have to build a working WordPress theme.
But before doing that, to check on if the theme is working or not, create first a blank index.php on the root directory of the NeoBlog WP theme (don’t worry code will be added on this later on).

Posted by WordPress Guru