From HTML Website to CMS (WordPress) with the same design

converting site to WordPressLast week i had a task that i was really waiting to get one of these days. We had a client who has a basic informative website about a service they offer. The website was created a couple of years ago and they were very happy with design, but they wanted it to be a CMS. So that if they want to add another page they don’t have to manually create the page and add a link to it from the navigation menu on all other pages.

An obvious choice was WordPress since all they need is a 10 page website plus Blog, Drupal would be to big of an overkill for this scenario. Now, even though i already made more then 30 WordPress installs, i usually used either a free them and just made some small changes or even sometimes the client liked the theme so i didn’t even had to touch it.

I was looking for a blank WordPress theme that while having all the necessary elements would let me do the design. And while i am sure there are dozens of those here is one i used and was pretty happy with, its called WP Framework their own description says it in the best way possible:

A blank WordPress Theme Framework that’s everything you need, and nothing you don’t

And thats exactly what it was. All i had to do is break the existing HTML into parts as following:

  • header.php will hold parts of the HTML that never change from page to page on the top of the page
  • footer.php holds parts of the HTML that never change from page to page on the bottom of the page
  • sidebar.php has to have the HTML that will container that will be able to stretch based on the widgets activated in the back-end menu
  • and of course index.php thats where you include the header, footer and sidebar plus the container for the main part of the page your posts and pages.

Then i imported the CSS and 99% of the site was done. Feels great -I just created my first WordPress theme. Having done it i see first hand why there are so many nice and free WordPress themes, since you don’t have to be a coder to make one.

, , , , ,

Related Posts

12 Comments. Leave new

  • Cool, I had seen that theme, and was wondering what kind of application it had. Now I know! Can I see the site you refactored like this? I'm curious to know what it looks like.

  • Sure, i have sent it to you.

  • use wordpress ita a magic cms . you can do anything what you need in wordpress . just use the static option in the settings in admin panel and also change you permalink settings , it will give you a html pages web site . I have allready made many sites in wordpress for my clients.

  • the static settings only affect the front page the rest stays the same…

  • Wow, very cool list.
    Some great sites there

  • Some times it is not that easy to convert the info.
    I also had customers with old sites that wanted ability to edit their site.
    I usualy use drupal or content editor like toko or cmseasy to create specific tags in the site

  • And one of the main reasons behind the failures of the newbie bloggers is that they take SEO [damn] seriously. And that’s where they start making errors by using forced keywords and other stupid stuff!

  • Very well written article, thx for sharing.

  • Have been looking at doing SEO and bettering the web design on my website for a while, so this website has been very useful. Clear read also, so thanks!

  • Have you ever considered adding additional videos to your blog posts to keep the readers additional entertained? I suggest I just study via the whole write-up of yours and it was rather excellent but since I am more of a visual learner,I discovered that to be far more useful. Just my my concept, Excellent luck

  • I often wondered how to make wordpress sites. I didn't know that you could start with a template and then customize it.
    Off I go then in search of wordpress templates. Thanks for the info, very informative.


Leave a Reply

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.