Build a Custom WordPress Home Page with Custom Widget Areas

Posted in HowTos, Themes, WordPress12 months ago • Written by 19 Comments

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

Visit us at 1WD.tv for more learning materials that can get you started as a freelance web designer, inside you will get: an eBook, tons of video guides, source codes, child theme, forum support, and most of all, the knowledge of how you can earn $300 in just 3 Days!

presentation-2

If you enjoyed this article, get email updates (it's free).

Join over 77,235 Subscribers Today.

5 Written ArticlesWebsiteGoogle+

“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.

19 Comments Best Comments First
  • Ahmad Raza

    Saturday, April 27th, 2013 02:07

    5

    Great tutorial spence, I would give it a try to create a better landing page for my blog.
    Thanks for sharing!

    +3
    • Spence

      Monday, April 29th, 2013 08:33

      8

      Thanks Ahmad!

      0
  • Tariq Ahmad

    Tuesday, April 30th, 2013 02:54

    11

    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.

    +1
  • Mike

    Thursday, April 25th, 2013 14:58

    2

    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??

    +1
    • Spence

      Friday, April 26th, 2013 12:56

      4

      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: http://1wd.tv/live-classes/ 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

      0
      • Shikha

        Saturday, June 29th, 2013 05:20

        17

        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.

        0
  • bhanu pratap

    Saturday, April 27th, 2013 06:46

    6

    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.

    0
    • Spence

      Monday, April 29th, 2013 08:34

      9

      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 :-)

      0
  • Jon S

    Monday, June 3rd, 2013 22:16

    15

    Hey Spencer,

    Can you provide the code from the tutorial?

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

    0
  • Ronald

    Monday, July 22nd, 2013 17:34

    18

    Very usefull, now I’m just exploring Canvas. Thanks very much!!

    0
  • Mathew Porter

    Friday, June 7th, 2013 12:34

    16

    Great tutorial, easy to follow for any novice ;)

    0
  • Tom Richards

    Wednesday, May 22nd, 2013 17:05

    14

    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.

    0
  • Amy

    Tuesday, July 23rd, 2013 12:12

    19

    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…

    -1
  • Dueep Jyot Singh

    Thursday, April 25th, 2013 12:06

    1

    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?

    -1
    • Spence

      Friday, April 26th, 2013 12:52

      3

      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

      +1
  • arfin

    Saturday, April 27th, 2013 09:12

    7

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

    -1
    • Spence

      Monday, April 29th, 2013 08:37

      10

      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

      0
  • adeelqamar

    Sunday, May 12th, 2013 02:29

    13

    nice post but i am on blogger , so tell me can i use this trick on blogger blog.

    -1
  • Amy

    Tuesday, July 23rd, 2013 12:12

    19

    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…

    -1
  • Ronald

    Monday, July 22nd, 2013 17:34

    18

    Very usefull, now I’m just exploring Canvas. Thanks very much!!

    0
  • Mathew Porter

    Friday, June 7th, 2013 12:34

    16

    Great tutorial, easy to follow for any novice ;)

    0
  • Jon S

    Monday, June 3rd, 2013 22:16

    15

    Hey Spencer,

    Can you provide the code from the tutorial?

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

    0
  • Tom Richards

    Wednesday, May 22nd, 2013 17:05

    14

    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.

    0
  • adeelqamar

    Sunday, May 12th, 2013 02:29

    13

    nice post but i am on blogger , so tell me can i use this trick on blogger blog.

    -1
  • Tariq Ahmad

    Tuesday, April 30th, 2013 02:54

    11

    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.

    +1
  • arfin

    Saturday, April 27th, 2013 09:12

    7

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

    -1
    • Spence

      Monday, April 29th, 2013 08:37

      10

      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

      0
  • bhanu pratap

    Saturday, April 27th, 2013 06:46

    6

    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.

    0
    • Spence

      Monday, April 29th, 2013 08:34

      9

      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 :-)

      0
  • Ahmad Raza

    Saturday, April 27th, 2013 02:07

    5

    Great tutorial spence, I would give it a try to create a better landing page for my blog.
    Thanks for sharing!

    +3
    • Spence

      Monday, April 29th, 2013 08:33

      8

      Thanks Ahmad!

      0
  • Mike

    Thursday, April 25th, 2013 14:58

    2

    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??

    +1
    • Spence

      Friday, April 26th, 2013 12:56

      4

      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: http://1wd.tv/live-classes/ 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

      0
      • Shikha

        Saturday, June 29th, 2013 05:20

        17

        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.

        0
  • Dueep Jyot Singh

    Thursday, April 25th, 2013 12:06

    1

    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?

    -1
    • Spence

      Friday, April 26th, 2013 12:52

      3

      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

      +1

Comments are closed.

67.202.56.112 - unknown - unknown - US