1stwebdesigner |
| Energize Your Static Website with this WordPress Conversion Tutorial (Part 1) Posted: 20 Sep 2014 06:00 AM PDT 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?
But when it comes to functionality, a dynamic site like a WordPress site is the best way to go. Why?
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 BuildWhat 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:
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 StartedTo 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. The Template FilesCompared 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:
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:
STEP 1 – Copying Necessary Files to the NeoBlog WP ThemeTo get started, copy the css, fonts, images and js folders from the NeoBlog HTML and CSS theme to the NeoBlog WP theme folder. STEP 2 – Naming Your WordPress Theme with style.cssBefore 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 FileNow 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. Afterwards, save it as a screenshot.png file on the root directory of the NeoBlog WP theme. STEP 4 – Activating the ThemeAfter 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 Appearance -> Themes. Click on the Activate button. 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 TutorialWhile trying out this tutorial, you might have issues with combining PHP codes with the HTML codes. What you should doDouble 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 RecommendationsIf 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:
Round UpGreat! 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 ConclusionIf 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.     |
| You are subscribed to email updates from 1stwebdesigner To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
No comments:
Post a Comment