WordPress Widgets Tutorial

WordPress Widgets Tutorial

FavoriteLoadingAdd to favorites

Learn how to manage widgets in the WordPress admin area, and also how to add widget locations to any theme. Check out my “Get a Developer Job” course: https://www.udemy.com/git-a-web-developer-job-mastering-the-modern-workflow/?couponCode=YOUTUBE-HALF-OFF

Link to download .zip of theme files as shown in this video (note: this is not a “complete” WordPress theme yet and this download is only intended for educational purposes to dissect and review):

To view a complete list of the WordPress lessons in sequential order visit:

Want to share the WordPress website that you’ve been creating on your computer with the world? Learn about the web host I use and how you can get a domain + hosting for $4.95 a month: http://learnwebcode.com/web-hosting/

Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at http://learnwebcode.com/

Follow LearnWebCode on Twitter for resources and updates:
https://twitter.com/learnwebcode

50 Comments

  1. Sockermonstret April 26, 2017 at 9:14 pm - Reply

    Really helpful tutorials in this playlist! Thanks!

  2. Anthony Phillips April 26, 2017 at 9:15 pm - Reply

    03:23

  3. Arinze Anakor April 26, 2017 at 9:15 pm - Reply

    BEST WP Theme tutorials I have come across so far. Thanks man.

  4. Jack Weldon April 26, 2017 at 9:15 pm - Reply

    Great videos. Keep up the good work!

  5. Neel Gray April 26, 2017 at 9:17 pm - Reply

    Great tutorial. Thank you.

  6. MasterCharlz April 26, 2017 at 9:18 pm - Reply

    Any chance you’ll be making a video on how to create a custom widget?

    for example: add a widget to the sidebar that allows you to upload an image, add text, and a link

  7. TumbleGamer April 26, 2017 at 9:19 pm - Reply

    is it amateur of me to use invisible tables for columns

  8. Obed Marquez Parlapiano April 26, 2017 at 9:19 pm - Reply

    you just solved a 3 day problem with my widgets. I love you.

  9. Wasim Ahmed April 26, 2017 at 9:19 pm - Reply

    I think you don’t reply to the MALES .. you are just replying Females .. why so .. ????

  10. Scott Pokrant April 26, 2017 at 9:21 pm - Reply

    I’ve been following your tutorial the entire way, and somehow screwed something up big time. I’ve gotten up to modifying index.php as you recommended "site-content, main-column, and secondary-column" but when I refresh my page, my footer is all the way up above the sidebar content, along with my footer links. Somehow my sidebar content actually ended up in between the footer line border and the footer links… Can you help me fix this?

  11. Open Sahitya April 26, 2017 at 9:22 pm - Reply

    This one also but not show any response:
    //Add Our Widget Locations
    function ourWidgetsInit() {
    register_sidebar( array(
    ‘name’ => ‘Sidebar’,
    ‘id’ => ‘sidebar1’
    ));

    }

  12. Neetha Alex April 26, 2017 at 9:23 pm - Reply

    " clear cut tutorial"it make super simple to beginner,thankyou very much 🙂

  13. Klausete April 26, 2017 at 9:23 pm - Reply

    Hahahaha this tutorial guy seem to only reply to chicks

  14. Kristina April 26, 2017 at 9:24 pm - Reply

    I just wanted to say Thank you very very much! You are really good teacher! Clear and detailed.. I am a WP-beginner, and your videos are really helpfull!! Thanks!
    Subscriber from Serbia 🙂

  15. Mohamed Hak April 26, 2017 at 9:25 pm - Reply

    you are awesome.

  16. Michael Dryburgh April 26, 2017 at 9:29 pm - Reply

    If you want to put the code for the footer widgets in a separate file, like was done for the sidebar widget, you can place that code in a template file called *sidebar-footer.php* and for the code in the footer.php file use *get_sidebar(‘footer’);*

  17. Kristina Meraki April 26, 2017 at 9:31 pm - Reply

    in which program do u write the code? 🙂

  18. Sakhawat Hossain April 26, 2017 at 9:31 pm - Reply

    good tutorial (Y)

  19. Vivek Apollyon April 26, 2017 at 9:32 pm - Reply

    To enable widgets, if it isn’t already enabled, add the following code to your learningWordPress_setup() function.

    register_sidebar( array(
    ‘name’ => ‘Home right sidebar’,
    ‘id’ => ‘home_right_1’,
    ‘before_widget’ => ‘<div>’,
    ‘after_widget’ => ‘</div>’,
    ‘before_title’ => ‘<h2 class="rounded">’,
    ‘after_title’ => ‘</h2>’,
    ) );

  20. Kavi Arasu April 26, 2017 at 9:32 pm - Reply

    Hi ,How to align the widget to the center of the side bar? i tried in css using margin-left but no use.Thanks.

  21. Donna Brooks April 26, 2017 at 9:33 pm - Reply

    About 10 years ago someone set me up a Drupal site that I tried to learn to manage & develop. It was totally demoralizing! The learning curve was so high and there weren’t good resources online like there are now for WordPress! I had previously taught myself HTML (thru books, studying the source code of websites, and experimentation) well enough to build a single page website to promote a conference, and it included internal & external links, photos, a PDF registration form for people to download, blah, blah, blah. But after the Drupal debacle, when CSS came along, I decided that I wasn’t going to try to learn to write PHP and CSS. But your tutorials are SO clear that it’s piqued my interest (and I just jumped in on this one; I didn’t even start at the beginning!).

  22. David Reuven April 26, 2017 at 9:33 pm - Reply

    Great Teaching ! Do you have paid courses ? Where ?

  23. Sultana Ionut April 26, 2017 at 9:35 pm - Reply

    If anyone finds this helpful -> you try to add widget to your page but when you refresh dashboard page your widgets are gone, no trace of them.

    The solution is the following – when you name your id => "the_id_name_should_allways_be_in_lowercase".
    Hope this helps someone . Extra info here : https://codex.wordpress.org/Function_Reference/register_sidebar

  24. Ken Jones April 26, 2017 at 9:36 pm - Reply

    Dang!!! WordPress ROCKS!!!

    And so do your lessons. Jaw dropping good. Especially that final tip. WOW!!! Your training is so good, I went ahead and purchased your HTML/CSS/SASS course. I’m not a beginner, but you have so many valuable tips. Plus I have been 10yrs removed from all this. Can’t be too proud right now. Plus I like the idea of "best practices".

  25. Bart Heimenberg April 26, 2017 at 9:38 pm - Reply

    The great thing of these tuts is that I at least start to understand the power of wp. Never really understood the widgets fuss until just now. Thanks a lot!

  26. Kerim Grozny April 26, 2017 at 9:38 pm - Reply

    Hi. Is it possible to create or develop custom widgets, NOT areas i mean widgets from scratch without using any plugins?

  27. Lisa Friedrichsen April 26, 2017 at 9:39 pm - Reply

    I was able to find the code to add Widgets to the Appearance menu for my custom theme here:
    https://www.templatemonster.com/blog/add-widget-areas-to-wordpress-guide/

    But yes, it is also explained in the video, step 2!

  28. Brenda Skinner April 26, 2017 at 9:39 pm - Reply

    i thought on wordpress i would not have to use code?

  29. Michael Russell April 26, 2017 at 9:43 pm - Reply

    Great explanation of this, really enjoying going through the various tips in the video series. I know it’s a couple years old now but a lot seems to still be perfectly adequate

  30. Lori Pritchard April 26, 2017 at 9:43 pm - Reply

    You skipped a whole section. In part three you did not show us how to index-php section. Now I am totally loss. Thank you

  31. best punjabi stage Dramas April 26, 2017 at 9:43 pm - Reply

    outclass tuts … once u start i was bored but when you go on it is really becoming outclass

  32. OZtheTechnician April 26, 2017 at 9:48 pm - Reply

    Your series has been EXCELLENT so far! Thank you!! I’ve subscribed to keep up with your videos.

    However, I’ve finally run into a problem during this video. My issue is that, when I create the sidebar, the sidebar does not only contain "This is the sidebar." Instead, it also pushes most of the footer onto the side of the website. My footer nav links and even my border are now where the sidebar is supposed to be. The site name and copyright symbol are still where they are supposed to be, though. Do you have any idea of what I could have done wrong?

    Thank you again!

  33. brutushita1 April 26, 2017 at 9:50 pm - Reply

    How do you put text into a widget image, ie put text so that when one clicks on an image they can read some text.

  34. Wasim Ahmed April 26, 2017 at 9:51 pm - Reply

    If I dont wanna use <ul> and <li> I want to use . bootstrap list group .. with a background color and my own font color ..

  35. akhabar shrestha April 26, 2017 at 9:52 pm - Reply

    There is no widget plz can u tell me how to add

  36. jca77 April 26, 2017 at 9:53 pm - Reply

    How to create pagination in widget content?

  37. Rajni Nair April 26, 2017 at 9:54 pm - Reply

    Just too good 🙂

  38. David Green April 26, 2017 at 9:55 pm - Reply

    There’s a bit of catch at the beginning of this chapter, certainly with WordPress 4.4, Widgets are not available "out of the box" so the video appears to be a little misleading at first, but by 5:00 minutes in, it’s all back to normal, and the codes draws in the functionality, and then it is clear sailing from there.

  39. Hector Archundia April 26, 2017 at 9:57 pm - Reply

    Why is my footer on the sidebar? Where’s my mistake? 🙁

  40. Laura McNally April 26, 2017 at 9:58 pm - Reply

    Hi, even as I get up to 6:00 my ‘This is sidebar’ AND my footer border-top and footer-nav all appear in the sidebar, however, the <p> at the end of the footer still appears at the bottom where it should. I have tried copying and pasting the code from the zip file (index, functions, footer, sidebar) and it still happens. I have no idea where this has gone wrong! Can anyone help?

  41. Open Sahitya April 26, 2017 at 10:00 pm - Reply

    my widget is not seen how to make it enable… I have used below code but not working, since I have already >>>
    register_nav_menus(array(
    ‘primary’ => __(‘Primary Menu’),
    ‘footer’ => __(‘Footer Menu’),

    ));

  42. Ted April 26, 2017 at 10:00 pm - Reply

    What if I want the sidebar on the left of my website?

  43. Christine Standing April 26, 2017 at 10:02 pm - Reply

    I cannot access a Dashboard so I can’t even try this.

  44. Uzair Khan April 26, 2017 at 10:03 pm - Reply

    Hi Brad,
    Thanks for the wonderful tutorials, a very in depth explanation in fact.
    Got a question though:
    In Widget tutorial, to avoid repetitive writing of code, we created ‘sidebar.php’ and added code for ‘Sidebar’ and gave the call from ‘index.php’ using ‘get_sidebar();’. What if I want to add footer widgets also into sidebar.php.
    ‘Sidebar’, ‘Footer1’, ‘Footer2’, ‘Footer3’, ‘Footer3’ – all in ‘sidebar.php’. Is that possible?

  45. Mu Nas Dar April 26, 2017 at 10:05 pm - Reply

    THE BEST VIDEO! I have ever seen on explaining widgets.

  46. Katrine Gitz April 26, 2017 at 10:05 pm - Reply

    Hi! I have a question about the widgets.. When I go to my Apperance, I cannot see the widgets, and even when I click customize in the theme, they don’t appear. Do I need to add something or install something to have it supported? Hope that you can help. I have so enjoyed your tutorials, I am a WordPress beginner and you make it super understandable! Can’t wait to start doing my own themes! Big thanks from Denmark!

  47. ebox008 April 26, 2017 at 10:07 pm - Reply

    We need to know php? sorry dont speak stupid!

  48. Neo__papa April 26, 2017 at 10:07 pm - Reply

    Good! I don’t know English and understand you , you good explain all.

  49. tony hoss April 26, 2017 at 10:10 pm - Reply

    great

  50. MI Dax April 26, 2017 at 10:12 pm - Reply

    я не знаю English. но у тебя все так понятно спасибо большое!

Leave A Comment

*