Thumbtack.com is a site where our customers can write a testimony about their experiences with Fast Website Design. We don’t always update our own portfolio, so by viewing our website design reviews here, you can see more examples of our custom logo design, web design, and programming services; with a non-biased review by our customers!
www.fastwebsitedesign.net is giving away a free website design template and a free domain name to everyone who gets any hosting plan. Hosting plans start at just $3.50 per month!
01 Install WordPress
The first step in this tutorial is to install wordpress, so if you haven’t already done so install a copy of WordPress onto your site. Look around for affordable web hosting then take a look at our recommended blog hosting providers. All our recommended hosts offer 1-click WordPress installation, if your host does not support this feature, head over to the WordPress site for the 10 minute manual installation guide.
02 Creating the new theme files.
Somewhere on your computer create a new folder and create 6 blank files inside;
index.php
footer.php
header.php
sidebar.php
page.php
404.php
03 Backbone components
Copy the images folder and your stylesheet (style.css) into your WordPress theme folder. Next open the style sheet in your preferred code editor and embed the following text before the first line of code.
/*
Theme Name:
Theme URI:
Description:
Version:
Author:
Author URl:
*/
You should adjust the text accordingly as this code will tell WordPress who the theme belongs to and what the theme is called.
04 Constructing the header
Open index.html, the index file belonging to the template that you will be embedding wordpress into. Then copy coding from the top of index.html all the way down to the end of the header and paste the code into header.php.
*Note that you do not need to close open tags such as <div> tags and the <html> tag, in fact doing so will break the WordPress theme.
Now, find the title tags within the header and insert the code below. This will generate the page title dynamically which will look something like this, “Your Blog – Your Page Title”.
<title><?php bloginfo(‘name’);?> <?php wp_title();?></title>
Next we need to insert the url of your style sheet into the header, this must be the full url path for it to work. You need to locate style.css in header.php and replace it with <?php bloginfo(’stylesheet_url’); ?> This code will tell WordPress where to find the style sheet for your design.
Now we will be adding the site title and URL to your wordpress theme, insert the code below where you would like the title of your blog to appear.
<h1 id=”logo”><a href=”<?php bloginfo(‘url’);?>”><?php bloginfo(‘name’);?></a></h1>
The majority of sites have a title or logo that appears on every webpage, clicking on this will take the user to the websites homepage. The above code inserts a text link so depending on your requirements, you may wish to replace <?php bloginfo(‘name’);?> with the full path to your logo.
05 Creating the sidebar
The coding behind every site design is different, within yours locate the HTML coding that makes up your sidebar and paste it into the sidebar.php file we created earlier.
You will most likely wish to list the blog categories within the sidebar of your site, to do this paste the code below exactly where you want this to appear.
<h2>Categories</h2>
<ul>
<?php wp_list_cats(’sort_column=menu_order&depth=1&title_li=&show_count=1?); ?>
</ul>
Most blogs also include a Blogroll, this is a collection of links to other sites which are handpicked by the website owner. You can embed a blogroll into your side bar using the coding below.
<h3>Blogroll</h3>
<ul>
<?php get_linksbyname(”, ‘<li>’, ‘</li>’, ”); ?>
</ul>
06 Constructing the homepage
Now that we have constructed the header and sidebar we can move onto the most important element, index.php. Open the template you are using to embed WordPress into and copy the code from the end of the sidebar all the way down to the beginning of the footer. Then paste this into index.php ensuring you do not include elements of the sidebar or footer – you should have began copying right after the code that makes up the sidebar and stopped right before the coding for your footer.
Now we need to add the header, sidebar and footer into the index file. This is really simple and required just 3 lines of coding. Insert the first piece of code into the first line of index.php, the remaining 2 should be placed on the last line of index.php
First line of index.php:
<?php get_header(); ?>
Last line:
<?php get_sidebar(); ?>
<?php get_footer(); ?>
07 Embedding post entries into your blog
This part is where we tell WordPress where and how to display the blog posts on each page. Copy the code below into the index.php file exactly where you want your posts to appear, you can alter this to the look and feel of your site.
<?php while(have_posts()) : the_post(); ?>
<div class=”post”>
<div class=”title”>
<h2><a href=”<?php the_permalink(); ?> “><?php the_title(); ?></a></h2>
</div>
<div class=”info”>
<ul>
<li><?php the_time(’F dS, Y’) ?></li>
<li><?php the_category(’, ‘); ?></li>
<li><em><?php the_author(); ?></em></li>
</ul>
</div>
<div class=”text”>
<?php the_content(”); ?>
<span class=”more”><em><a href=”<?php the_permalink(); ?>”>Continue reading</a></em></span>
</div>
</div>
<div class=”divider”></div>
<?php endwhile; ?>
This coding embeds each post available onto the page using post title, URL, category, author, date and content. When you feel a bit more confident you can alter this code to get your desired effect but for now we are going to keep things simple.
08 Regular pages
Next copy the entire contents of index.php into the page.php file and change <div class=”post”> to <div class=”post page”>
You will also want to remove <div class=”info”> and it’s contents as you do not want the post meta data showing on each individual page. The following code should be removed.
<div class=”info”>
<ul>
<li><?php the_time(’F dS, Y’) ?></li>
<li><?php the_category(’, ‘); ?></li>
<li><em><?php the_author(); ?></em></li>
</ul>
</div>
09 Error pages (404 Not Found)
To ensure the classy look and feel of your blog is not lost when a user hits a dead link, we need to construct a 404 page. Open 404.php and paste inside it the contents of page.php, now remove the coding we added in step 7 and you have a blank template which you can alter to create a basic 404 page telling your visitors that the url is broken/no longer exists.
10 Creating the footer.
Creating footer.php is really easy, just copy into it the remainder of code from index.html – this should only include the coding that makes up your footer. The last line of footer.php should of course be the HTML closing tag from your template; </html>
11 Final preparations.
In order for WordPress plugins to function properly it is necessary to embed 2 pieces of coding into your design files. The first should be inserted into header.php inside the <head></head> tags and the final just be added into footer.php just before the closing </body> tag.
The first line of code to be added inside the header tags should be like so:
<?php wp_head(); ?>
The final line of code should be added just before the closing body tag of footer.php:
<?php wp_footer(); ?>
12 Activate your theme!
Finally you can now test your theme, remember that every template is different so don’t be annoyed is something goes wrong – simply find the error and correct it. So, what are you waiting for? Upload the folder containing all your themes files into the /wp-content/themes directory. Head over to your WordPress admin panel (http://yoursite.com/wp-admin) and activate your theme by selecting the “Appearance” tab and locating your theme.
Written by: Luke Kendall
A website is a collection of 1 or more web pages linked together using hyperlinks. A hyperlink is what you click that takes you from one page to another. Typical pages of a website may include a “home” page, “about us” page, and a “contact” page.
Web pages are viewed by people using Internet browsers. Internet Explorer is only one version of an Internet browser, but it’s the most commonly used, because it comes pre-installed with every Microsoft Windows operating system, such as Windows 7. Other varieties of Internet browsers include Google Chrome, Apple Safari, and Mozilla Firefox.
All website page files, pictures, music, and any other content that the author wants to display to the Internet world must be uploaded and stored on a web hosting server. Web servers are designed to run 24/7, non-stop, so that your website is always available to would be visitors. Web hosting companies charge for this service, and the prices typically range from $4 – $20 per month depending on which plan you choose. One web host provider is www.fastwebsitehost.com
Registering a domain name (www.companyname.com, .net, .org, etc.) is also required for visitors to find your website easily. Most web host providers lease domain names for as little as $15 per year.
Here’s how everything works together:
When people type a www.domainname.com into the address bar of their Internet browser, their Internet service provider (Comcast, Cox, Road Runner, AOL, etc.) directs them to the web hosting server that is holding the stored website files. Once on the website’s landing page, a visitor can click on the web pages links to navigate back and forth throughout the websites different pages.
My next blog will be on how to create a basic web page.
