Blog

10 Steps to Turning WordPress into a Static HTML Site

This is a YALBA (Yet Another Long Boring Article) ;)

One of the major problems of WordPress sites is that they very much look like mom and pop blogs; well, it may not be seen as a "problem" by many people since WordPress was initially a blogging software. It still is, but things have changed now and with the help of powerful theme widgets and plugins we can get more out of this WordPress!

So, why would you like to turn WordPress blog into a static HTML site? Well, technically you cannot change anything of course, but you can at least change the look and feel of the blog to make it look like a real site, and there are a couple of reasons why you might want to do that:

1) In the early days, blogs, or weblogs, were primarily used by people as "journals" – that is, to publish their personal thoughts and opinions online. Even though things have changed a lot now (now blogs are used to promote anything from a make money ebook to a penis enlargement pill :P ) a lot of people don’t take blogs as seriously as they would a professional website. In fact, it is no different with me either; if a person has not taken the time to customize his WordPress blog, I doubt I would even want to visit the blog that much, much less buy anything from him! :D

2) The default WordPress blog contains a lot of links you don’t need; these links can distract your visitors and you may not be able to get the kind of conversions you want. So, besides changing the look and feel of your blog, another aim is to clean it up from those garbage links. ;)

3) By default, WordPress shows the latest blog posts on the front page. Also, by default, WordPress permalinks are hardly anything like the links of a static HTML site. You can, if you want, change all these and more! :D

4) Maybe you are tired of having all of your post categories having the same old boring category base called "category". Maybe you are tired of that boring WordPress logo on your login page. All that is going to change! :D

5) Or maybe you have nothing better to do today. So you can read this boring article and then go to bed! :D

One more thing I am gonna tell you beforehand is that I mainly use the free semiologic theme, so, in case what I say here makes no sense to you, just download and activate that theme, go through the whole article, and then, if you don’t like the theme, you can just deactivate it. :D

I also discuss some of the optional customization stuff; if you want, you can ignore them, but note that some of these "optional" stuff are very important if you want to save your blog from spammers who primarily target WordPress blogs through automated bots (this would at least minimize the attack)!

As a rule of thumb, I backup my blog database using the WP DB Manager OR BackWPUp before making any modifications to my blog. You can of course use your favorite backup plugin, but please understand that this step is crucial! :D

1. First, click on "Appearance=>Layout" from your admin menu. Once there, select an appropriate layout for your site. ANY layout would do, provided it contains at least one sidebar! 

2. Next, click on "Appearance=>Widgets" from your admin menu. Once there-

a) Drag the "Search" widget to the Sidebar, and make sure it is at the top of all the sidebar widgets! I prefer to have a search form at the top, so it is easily visible to everybody! ;)

b) (Optionally) Give the "Categories" widget a custom title. Anything goes here – you can say, "Reviews", "Topics", "Articles", "Subjects" – anything, depending on what you want to post on your blog!   

c) Remove the "Archives" widget. You don’t need it! Don’t worry about SEO; Google would be able to index ALL of your blog content even without this cr*ppy widget. If you truly worry about SEO, you would need to put a "noindex" tag to the entire archives section, so why not just remove it instead! Makes your blog look cleaner and…less boring. :D

Also remove the "Meta" widget from the Sidebar. This widget contains just another bunch of useless links that would take your visitors elsewhere other than where you want them to be! If you feel you cannot remember the blog login URL, either use Roboform or bookmark the link concerned! There is no point keeping a whole useless widget just for one useful link! :)

d) (Optionally) Drag and drop the "Recent Posts" widget to the Sidebar! If you also want to show your most popular posts on your sidebar, just download and install the WP-Post Views plugin, and then drag and drop the "Views" widget on to your Sidebar.

e) Go to the "Header Area" section. There, click on the "Header:Site:Header" widget and check the "Output the site’s name before the tagline." option. This puts the tagline to the place where it truly belongs: under the site’s name. Note that if you are using a custom header image then this setting would have no effect on your blog header!

Next, click on "Header:Nav Menu" widget, and UNCHECK "Show a search form in the navigation menu." (you already have a search form at the top, remember? ;) ), and CHECK the "Split navigation menu items with a |." option.

Later on, when you have a full-fledged content site, you would want to customize the navigation menu by adding your own links there (the default menu generated by the theme may contain links to pages you won’t want to link to from the header). Note that semiologic also offers you an option to create your own custom menus under "Appearance=>Menus"-but frankly I don’t use that option. ;)

f) (Optionally) Customize your 404 page by going to "Before the Entries=>Blog Header".

g) (Optionally) Decide if you want to post very frequently on this blog or just load a bunch of articles one-time and then forget about it (much like a static site), then go to the "Each Entry" section, click on the "Entry:Header" widget, and CHECK/UNCHECK the "Show post dates." option. Checking it would show up a message like "Posted on So and So date" at the top of each of your article, and unchecking it would remove that message. On some of my blogs (which I don’t plan to update frequently) I have that option unchecked. ;)

h) Click on the "Entry:Content" widget and UNCHECK the "Display the box with the number of comments." option (UNLESS of course you want to have a nice-looking box beside each post showing the number of comments it has received – just tell me what value it offers to visitors who are only looking to solve their OWN problems – the reason why they are on your blog; they are NOT there to see which of your articles have received how many comments).

This is just another way to make your blog look like a professional site, not some 12-year old’s blog :D (no offense meant to 12-year olds)!

And while you are here, don’t forget to check the "Use the post’s excerpt on blog and archive pages" (this is optional but highly recommended). This way, only a portion of your article text (as defined by you in the post’s "Excerpt") would show up on the "Blog" page (rather than the whole article) – this helps make your blog page look more tidy and interesting! :D 

Are you still with me, or already bored? :D

i) Remove the "Entry:Categories:Categories" widget. Just ask yourself: do you really need the "Filed under yada yada yada by so and so author" sh*t? What value does it offer to your readers? None that I can think of, unless it is a multi-authored blog!

j) Remove the "Entry:tags:tags" widget. It is just another piece of sh*t you know! It neither offers you any SEO benefit nor any value to your visitors; however, the pointless tag links are surely distracting and they make your site look more like a boring WordPress blog than a professional site. So get rid of that. ;)

k) (Optionally) click on "Entry:Comments" widget to modify the look and feel of your comment box, change the comment text, define your comment policy, etc.

l) Go to "Footer Area", then click on "Footer: Nav Menu" widget to add your custom copyright notice, menu links, affiliate disclosures, etc.

Again, let me tell you that if you don’t add your own custom links in the footer, the theme would populate it with links to all of your pages; some of them maybe useful, but there would be others that you would not like to link to from your footer! So when you have a full-fledged site, you would want to add your own custom menu links here (as well as in the site header, as already mentioned above). Don’t also forget to check the "Split navigation menu items with a |." option!  ;)

m) (optionally) Go to "Not Found Error (404)" section and drag and drop a "Search" widget there, so that if any visitor lands on the error page he can search for what he has been looking for in your blog. ;)

Just so you know, I am NOT done boring you yet. There is a lot of stuff I am going to bore you with before I leave you alone! :D

3. (optionally) Click on "Appearance=>Header" to change your site header. This would replace the default CSS header with your custom header image. You would need to make wp-content folder writable (CHMOD 777) for this to work, and as soon as you are done adding the header, be sure to make it un-writable (CHMOD 755), or you would get hacked! :P If you don’t know what CHMOD means you can read my boring ftp tutorial (and get bored further)

4. (optionally) Go to "Appearance=>Skin=>Designer Credits" to remove the credits from your blog footer (just remove the whole thing you see if that box).

5. Click on "Settings=>General" to change your blog’s name and tagline to something more descriptive. Especially the tagline has to be attractive, because a lot of SEO plugins use it as the meta description for the blog homepage. :)

6. (Optionally) Go to "Posts=>Categories", and rename the "Uncategorized" category to something else, such as "Others", "Miscellaneous", etc.

NOTE: DO NOT rename the category slug; only rename the category name!

Then click on "Settings=>Writing" and make sure the proper category is selected there as the "Default Post Category".

7. Create two empty pages. You can name them anything you like. For the purpose of this article, I would name one "Home" and the other "Blog", just like it is on my blog. Then click on "Settings=>Reading", select the "A static page (select below)" option, then select the "Home" page as your blog’s "Front page" and the "Blog" page as your blog’s "Posts page". This gives your site a more "professional" look and feel. :D You can already see it working on my blog! :)

Further down, under "For each article in a feed, show" option, select "Summary".

8. Next, CHMOD your .htaccess file to 666 (if you don’t already have a .htaccess file, create an empty file using PSPAD, name it .htaccess, and upload it to the root of your blog install).

Then click on "Settings=>Permalinks". Select the "Custom Structure" option. What you would put in the next box depends on your preferences. If you want your permalinks to be like my blog then just enter the "/%postname%" (without quotes) text there!

On the other hand, if you want to add a .php or .html extension at the end of your permalinks, then enter either "/%postname%.php" (without quotes) for .php extension, OR "/%postname%.html" (without quotes) for .html extension!

Next, if you want to rename the category base to something else, enter that custom name under "Category base". It can be anything such as "topics", "reviews", "subjects", etc., depending on your blog. To give you an idea of how this will work:

Say, I enter "topics" as my new category base. So, instead of:

http://flexiblewriter.com/category/blogging

I would have:

http://flexiblewriter.com/topics/blogging

NOTE: As this change impacts your blog links in a big way (and therefore, Google’s indexation of your blog content as well), you need to change your category base at the very start-the point of blog creation, that is! :) If you already have a ton of content with the old category base name, then leave the "category base" box empty!

Leave the "Tag base" empty. Once you are done saving the permalink changes, CHMOD your .htaccess file back to 644.

9. What remains now is customizing your WordPress login page. I know this is optional, but if you got bored for so long, why not bear with me a little more! ;) If you merely want to replace the WordPress logo with your own, use the Backend Login Logo plugin (btw, I could not get it to work with my WP 3.0.1 blog).

On the other hand, if you want to completely overhaul the look and feel of the login page, use My Brand Login plugin! :D Setting up this plugin is more complicated than the former, but I would tell you about how I set it up. Look, I have very little CSS knowledge, so my settings may or may not suit everyone! ;)

"WP Logo" tab=> In the first box, enter your logo image URL (must be a full URL:, beginning with http://), or upload your image in your "uploads" folder (personally I don’t use the "uploads" folder at all).  In the "Position the Login Form" box, enter "20px 20px 20px 20px". By default, the plugin hides the scrollbars on your login page, but here is a way to fix that!

10. For SEO, I would recommend the SEO Ultimate plugin (unless you are already using something else). Not only it is one of the most versatile SEO plugins out there, it is also fully compatible with WordPress 3.0.1. Plus it offers a ton of extra tools not available in most other SEO plugins! :)

In SEO Ultimate, I enable the noindex module (You can find it under SEO=>Meta Robots Tags=>Noindex) for the following:

Administration back-end pages
Author archives
Blog search pages
Category archives
Comment feeds
Date-based archives
Tag archives
User login/registration pages

What I offered you in this article is all that I know about customizing WordPress. I am sure it is just a fraction of what is possible with WP. There is actually no limit to how much you can customize your blog; just keep experimenting and make backups before trying to mess with your blog! Don’t forget to check out my WordPress Optimization Tips too! :D

Okay, I understand I have bored you enough and you are now desperate to go to bed, but could you please leave a nice comment here before leaving my blog? Just click here to post a nice comment, thanks! :D

 

Disclosure: ArindamChakraborty.com is affiliated to Roboform!

18 Comments

  1. Renee Benzaim

    Good Morning Arindam,

    As usual, another very informative article. I printed out a copy to keep next to my pc so I can implement some of these strategies as I go through my blogs. I was noticing the other day that I was getting tired of the way my blogs looked “too bloggy.” LOL

  2. Rob Barclay

    great post, damn you must spend some time writing! thats one long long post :) add 40 comments and you have the longest page in the world :)

    I have developed many sites in Joomla but the i recently built an ecommerce site which has shop front end and a blog and the transition is seemless, if you spend the time getting to know wordpress and how to develop sites in it you can do anything you want, here is the blog here: http://www.slimmingsolutions.co.uk/slimmingblog/

    Cheers Rob

  3. Lane Lester

    What a great post, Arindam! I’ve been doing a fair amount of the same kind of tweaks, but with the themes I’ve been using, I’ve had to edit the theme files.

    The problem with these ultra-flexible themes is it’s so hard to know where to start with them. Your outline really gives us a head start with Semiologic.

    And thanks for throwing in the bit about the custom login. With the cheap websites I build, I make my clients dig into admin, and it will be nice to put my brand there.

  4. Al Gates

    Hi Arindam,

    Another useful article about how to set up your blog not to look like and act like a blog.
    You are so good at explaining technical stuff to people like me that are not technical by nature. Thanks for your help.This old man really appreciates it.

    Al

  5. Ray

    Hi Arindam,

    Very nice article as always.

    You right to the point about blogs looking like mom and pop blogs.

    Users need to get more updated to the new look and feel of the web!

    Enjoy
    Ray
    Pro Covers FX

  6. Arindam

    Good to see you here Ray. Thanks for your comment :)

  7. Hamant Keval

    Hi Arindam

    Your YALBA posts may be long and boring to some but I can say you sure do provide step by step info – even a newbie can perform and achieve what they want.

    Great post as usual.
    Although I do build a lot of blogs – I very rarely mess around the coding – but I sure know where to come !:)
    and yet I still found your post informative.

    Take care

  8. Linda | arch window treatments

    Hi Arindam
    I have been a subscriber to your blog for a while but have never commented before. But this post is so helpful that I wanted to say thanks for taking the time to write such an informative post. I am not good with customizing free themes so have bought certain themes in the past. With this step by step tutorial, I feel confident of tackling this with the free semiologic theme you suggest

  9. Ade Martin

    Hi Arindam.

    Another informative post as always.

    At the risk of appearing totally dumb I am not understanding the: “e) Go to the “Header Area” section. There, click on the “Header:Site:Header” widget and check the “Output the site’s name before the tagline.””

    Definitely can’t see the Header:Site:Header” widget

    Kinda lost me there ;-)

    Ade

    1. Arindam

      Hi Ade,

      Are you using the free semiologic theme? I am not sure if some of the widgets I mentioned here are supported in other themes :)

      If u r already using that theme let me know I can send you a screenshot :)

  10. Ade Martin

    Ah… no, I’m not using the semiologic theme!

    Thanks for the reply,

    Ade

  11. Bryan McHeyzer

    Hi Arindam,
    This is the first time here for me….have been on your list for a short while.

    So much great information…I am going to download the semiologic theme and follow your directions t customise it.

    Thanks again for a great post.

    Cheers
    Bryan

  12. Lane Lester

    Using your instructions I created a new site yesterday. It went very smoothly, considering it was my first time with Semiologic.

    One disappointment with the theme which has nothing to do with your excellent directions is that the width of the theme can not be tweaked easily. A custom.css has to be created, and the variables are not that obvious… at least not to me.

  13. Arindam

    Hi Lane,

    >>width of the theme can not be tweaked easily.

    Just click on Appearance=>Layout to select any theme width you want. Just click on any layout and it would be activated for your blog. :)

  14. Lane Lester

    Thanks, Arindam. That works only if you want the width of that layout. I’m talking about widths for which there are no layouts available. For this site I had only a jpg of a custom header that wouldn’t scale.

    I found on Semi’s forum a howto, but it didn’t quite do the job. Although the width changed the way I wanted, the header graphic is not centered correctly.

    These are the variables used in the custom.css, and I don’t know the difference between those that begin with “ext_” and those that don’t:

    .custom #ext_wrapper
    .custom #wrapper
    .custom #main
    .custom #sidebar
    .custom #ext_sidebar

    1. Arindam

      Hi Lane,

      If your blog layout is affected by the width of the header image then you need to keep resizing and keep re-uploading the header until u get it right. I remember having some similar troubles when uploading header image on this blog, but I don’t remember how I fixed it lol. I had a very cooperative graphics designer though :)

      The width of my header is 770×159, in case that helps :)

      As for CSS, I am a noob as well; cannot help you much on that. :|

  15. Rob Barclay

    ok had a quick look at the template but not downloaded it, in firefox using firebug, i have shown what needs editing to make this 800px watch short video here:

    http://teesweb.com/semiologic/

    (sorry for audio i had music on in background and its not clear at all what i am saying)

    1. Arindam

      Thanks Rob. I hope it helps some folks over here :)