Build a Custom WordPress Home Page with Custom Widget Areas

In this video tutorial I will teach you how to build a WordPress website with custom widget areas the easy way. Even if you haven’t touched a single line of code before, this tutorial is simple enough to walk you through every code.

This tutorial goes hand in hand with Christian’s video tutorial on how to create a website from scratch using HTML5 and CSS3. The goal is to help you understand how easy it is to create the same layout (from Christian’s tutorial) in WordPress using custom widget areas. Although you will need to put the pieces together a little, it’s a fun learning experience nonetheless!

Resources for this tutorial:

  • Canvas – (important) it’s a paid WordPress theme from WooThemes, but the video tutorial below can still be applied using other themes.
  • Responsive Theme – a free alternative, really great theme with millions of downloads monthly.

Video Tutorial: Custom WordPress HomePage with Custom Widget Areas

Spencer Forman

“Hello… it’s Spence, the Evil Genius". My passion lies with providing incredible software, practical advice, and hands-on solutions for other entrepreneurs who may be struggling with the mechanics of how to turn their online business dreams into reality.

15 Smart Tools To Help You Build Your Freelance Business

Discover the awesome tools we use in making our clients comfortable and happy in learning new things every day.

Download Now

Comments

  1. says

    Hey Spencer,

    Can you pretty please provide the code from the tutorial? I was attempting to use your video and apply it to the basic 2012 theme just for learning purposes and think I missed something. None of my widgets are showing up. Also I still seem to be getting a sidebar somehow… any thoughts

    THANK YOU ahead of time…

  2. Jon S says

    Hey Spencer,

    Can you provide the code from the tutorial?

    I tried following along but got lost quite a few times. (An understatement!)

  3. Tom Richards says

    Great video! However, I have followed your instructions to the letter but cant get any widget to show up on the static page.

    Do I need to edit the siderbar-home-one.php etc? You dont show the innards of those files during the video.

  4. says

    Nice. You explain this tutorial with a core of your heart.From this tutorial i would decide to build the same custom home page for my site.thanks alot for sharing.

  5. says

    As far as I think wordpress themes may not be integrated with DreamWeaver. Can anyone please clear up this matter?

    • says

      Hi Arfin,
      When using WP as your CMS, there is no need to use dream weaver anymore…that’s the point :-)

      Follow our other video tuts on creating new layouts for our core WP Responsive theme and you will see how powerful this can be :-)

      Spence

  6. says

    thanks for this useful post .
    WordPress shows your most recent posts on the front page of your site. But many WordPress users want to have a static front page or splash page as the front page instead. This “static front page” look is common for those who wish to not have a “blog” look to their site, giving it a more CMS (content management system) feel.

    • says

      Hi Bhanu,
      Yes this is true and one of the best features of WP…but the techniques for creating a widgetized template apply to inside pages as well :-)

  7. says

    Spence!
    Thank you so much for providing this tutorial! I ahve been meaning to email into 1WD if there was going to be any WordPress tutorials as it is something I have no experience with at all and I really want to learn how to design websites with it (and hopefully go on to create themes).
    I have bookmarked Christian’s tutorial, I haven’t got round to doing it yet, unfortunately but I hope to do so soon and then I will watch your video.

    I just wanted to thank you for answering my question that I never asked!!! LOL. I’m looking forward to watching this.

    Will you be doing any more WP tutorials/videos??

    • says

      Hi Mike,
      thanks for the great feedback!

      The answer is YES… in fact, we have an ENTIRE SYSTEM created just for building your Freelance Web Design business using WordPress. It’s at http://1wd.tv. We launched in beta last week with a webinar that went really well and our first students are already making $600 with their first clients. You can see a bunch of free videos over there at: in addition to the paid content from the basic membership.

      We also have a ton of videos at the 1stwebdesigner.com youtube channel or the labsecrets channel. Soon we are going to consolidate all of this into the 1wd.tv library for easier consumption.
      http://www.youtube.com/1stwebdesigner
      http://www.youtube.com/labsecrets

      Cheers!
      spence

      • Shikha says

        I am really confused with my freelance business. I am from an Windows 8 apps development background(Pretty ok in HTML5, CSS3, javascript) came across WordPress while developing my Website for promoting my apps. But then got interested in WordPress development and completed 3 books(Missing Manuals, Creating WordPress Theme, Awesome WordPress themes) and 2 WordPress personal site and created 1 WordPress Theme.
        Also purchased elegantthemes package($39) as advice by a WordPress guru and got listed in freelancer site. Also got listed in fiverr site, but there people want moon for $5. My problem is that i am from India and here people are still not into Websites(they are only in facebook) that much as in the West, so the only option is sites like freelancer and fiverr.
        But there is too much competition in freelancer and fiverr and new people don’t get any project.
        Because WordPress is too big so a lots of confusion for new comers, where to start. Should i go into services or Theme/plugin development.
        For services i am not finding any people to provide and Theme/plugin development seems to be crowed with top WordPress developer/designer.
        I am thinking to learn the basics again(HTML5, CSS3, javascript) and go back to Apps development as this WordPress is not for me.
        I believe in the evil genius(liked your youtube videos a lot) but don’t know whether your course will help me to get clients(as i am not based in US). Will definitely buy your course, if it will help me to be a better WordPress Developer and get some clients.

  8. Dueep Jyot Singh says

    As far as I know WP themes cannot be integrated with DreamWeaver. Also if one wants a website and not a blog, with a url which does not have the words WP there, I don’t know whether this will come in useful. Can anyone please clear up this matter?

    • says

      Hi Dueep,
      Why would you want to integrate with Dreamweaver?
      Likewise, in 2013… why would you want to build a static website when you can build a dynamic website based on WordPress? I think the core thing for you to consider is that WP is no longer a “blog” platform… it is a content management system (CMS). As such, 100% of all our solutions and my training is based on using WP as the foundation for all new client design projects, instead of starting out with a .psd and slicing it in Dreamweaver.

      It’s like building a new racecar on an existing chassis and engine instead of starting from scratch… you are more than half way home before you start!

      Cheers!
      spence