hostmonster-Host Unlimited Domains on 1 Account   coolhandle offering reliable webhosting since 2001
Unlimited Hosting Space - FREE Site Builder   Smart Website Solutions for Your Small Business=

Energize Your Static Website with this WordPress Conversion Tutorial (Part 1)

Posted in HTML CSS, Tutorials, Web Design • Posted on September 20, 2014Leave a comment

Web design and development are one of the most in-demand skills in last years. Agree?

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’ve 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. This is the very reason why it’s important that there should be WordPress conversion of your site from HTML and CSS.

At first blush, there are a number of reasons why you would choose to have a static (HTML and CSS) website.

Why do people have static websites in the first place?

  • You want to make it easier to customize your site even if you are not a developer.
  • A static website is supported on almost every browsers.

But when it comes to functionality, a dynamic site like a WordPress site is the best way to go.

Why?

  • Static websites cannot produce dynamic output alone since it is built on a static language.
  • Faster turnaround. You need not spend a lot of time on getting the colors and layout right. You can go straight to admin panel to customize it.
  • Templates look much better than sites developed in traditional static HTML sites.
  • You don’t need to code if you want to add a page or a post. Simply go to the admin panel.
  • Security features offered by HTML are much more limited than a dynamic site like WordPress.

If you started with a static (HTML and CSS only) site, you don’t need to throw it all away when you want to move to WordPress. However, converting your HTML-and-CSS-only site into WordPress might require some programming knowledge like PHP and jQuery to run the static site on the dynamic WordPress platform.

In the previous tutorial, you learned how you can create a WordPress child theme. This WordPress two-part tutorial series will introduce the basics of converting the markup into a fully functional WordPress theme using the built-in NeoBlog HTML and CSS theme.

At the end of this tutorial, you will learn how you can convert your static HTML and CSS site into a fully driven dynamic WordPress site.This tutorial aims to provide more flexibility to the site owners, thus, giving you more power to do more on your site.

Resources You Need to Complete This Tutorial

What We Are Going to Build

Final_theme

What Codes Should Readers Take Note Of?

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.

In creating a WordPress theme, it is worth to note the following:

  • 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 codes before using it on your template files. This will keep you on the right track on what you want to do in your codes.
  • 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. See WordPress Coding Standards.
  • Use clean, valid CSS. See CSS Coding Standards.
  • 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?

PHP is a programming and scripting language that creates dynamic interactive websites. It is a widely-used and open-sourced general purpose scripting language that is especially suited for web development. In addition to that, this programming language can be embedded into HTML.

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.

Some parts of the WordPress code structure for PHP markup are inconsistent in their style so it is important you have a basic knowledge about PHP.

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.

Just in case you need to know more:

How Does This Work?

First, you will identify first the files you need to create to build a complete WordPress theme. The next step you will do is to start putting codes on each template files.

Along the way there will be functions that might not be clear to you. In this case, the WordPress Codex will be your best friend.

After you created each template, you will add contents to your theme to test if the whole codes you are using are working on your site.

Getting Started

To start converting your NeoBlog WordPress theme, create the theme folder in the wp-content/themes directory in the WordPress installation folder.

Please take note that the name of the folder should correspond to the name of the theme you want to create. For this tutorial, it is named NeoBlog.

file-folder

The Template Files

Compared with static HTML and CSS sites, a WordPress theme consists with a bunch of template files.

These are files that contain the codes to make a working WordPress theme. To do this, create the following files into the NeoBlog theme directory:

  • 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. For more information see check this page.

Over the course of this tutorial, codes are going to be added to these files that will include menus, hooks, loops and widgets.

For this part of this tutorial series, you are going to work on the following:

  • Copying Files to NeoBlog WP directory
  • style.css
  • screenshot.png
  • Activating the theme

STEP 1 – Copying Necessary Files to the NeoBlog WP Theme

To get started, copy the css, fonts, images and js folders from the NeoBlog HTML and CSS theme to the NeoBlog WP theme folder.

file-folder

STEP 2 – Naming Your WordPress Theme with style.css

Before stating with the template files, first add the links of the stylesheets of the NeoBlog HTML and CSS theme to the NeoBlog WP theme. Go ahead and create the style.css file on NeoBlog WP theme and then copy the code below.


/*
Theme Name: NeoBlog
Theme URI: http://www.1stwebdesigner.com/
Author: Sam Norton
Author URI: http://www.1stwebdesigner.com/
Description:  A Simple Blog Theme for 1stwebdesigner.com
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

@import url("css/reset.css");
@import url("css/bootstrap.css");
@import url("css/style.css");

There is nothing special here but the information about the theme such as the name, author, author’s website and so on are enclosed within comment tags. This will make the theme easily identifiable upon installation.

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 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.

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.

screenshot

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

STEP 4 – Activating the Theme

After adding the screenshot of the theme, activate the NeoBlog WP 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 codes will be added on this later on).

Next, activate the theme, go to the WordPress admin panel and mouse over your mouse to AppearanceThemes. Click on the Activate button.

themes

activate

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.

Major Issues You Might Encounter While Trying This Tutorial

While trying out this tutorial, you might have issues with combining PHP codes with the HTML codes.

What you should do

Double check it. It is better that, by this time, double check your codes. Sometimes you might forget putting an end if or end while statement inside a WordPress loop.

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

For example:

?php
if ( have_posts() ) {
	while ( have_posts() ) {
		the_post();
		//
		// Post Content here
		//
	} end while;
} // end if supposed to be here
?

The code you see below will solve the issue.

?php
if ( have_posts() ) {
	while ( have_posts() ) {
		the_post();
		//
		// Post Content here
		//
	} end while;
} end if;
?

It would also help if you can check the the ending and closing tags of your PHP codes; otherwise, the codes might not work when mixed with HTML codes.

If you want to learn more how to add more functionalities on this blog, you might want to check and study the WordPress Codex.

What Limitations Does This Tutorial Have?

Although this tutorial will give you a head start on how you can create a theme, there will be limitations on this one.

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.

Some More Recommendations

If you want more features you can try to study the WordPress codex as well as online courses on tutplus.com or Lynda.com in creating an advanced theme.

But Wait!

You don’t want to read the whole thing? You might wanna try the video version! If you need to know the Part 1 of this tutorial series, you need to watch the whole playlist.

Do you want to know what the contents this playlist? Don’t worry, a list has been provided so you know what to expect:

  • Introduction: What Do You Need to Build a WordPress Theme
  • Copying Necessary Files to the Theme’s Folder
  • Naming Your WordPress Theme with style.css
  • Adding a Screenshot Image File
  • Activating the Theme

Round Up

Great! We are done with the first part of this two-part series tutorial. In this article, you learned how to set up template files, things to avoid and some notes to look out for as well as the steps in creating a WordPress theme.

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.

Clear Conclusion

If you’re using WordPress, you’ve probably spent a long reasonable period of time searching for a theme you like, only to find out that you’ve been looking at the same theme designs in a variety of colors with just different set-up of elements. Maybe, it’s time you learned to create your own WordPress theme.

This series of tutorial will help you learn to convert an HTML and CSS template at the same time build your first basic WordPress theme. We’ll get under the hood and see how a basic theme works by going over on the template files required to build a fully functional WordPress blog theme.

Our HTML file is now prepared and ready to be converted into a set of theme files. In the next tutorial, Let’s work on some template files and add functions to support some functionality of your WordPress theme.

It wasn’t as bad as you think it would be, right? Don’t forget that this is just the first part. If you can’t wait, do try this part and tell us what you think in the comments below.

Article source: http://www.1stwebdesigner.com/design/wordpress-conversion/

Tags:


Submit a Review




If you want a picture to show with your review, go get a Gravatar.

1&1 has shared hosting and dedicated hosting solutions for every budget and free domains with all hosting packages!  StartLogic - Affordable hosting: Free setup/domain, unlimited emails, PHP, mySQL, CGI, FrontPage. As low as $3.95/month
Cloud ecommerce platform delivers more traffic, higher conversion and unmatched performance

© Copyright 2008 Tyconia International, Inc. All Rights Reserved.