WordPress Widgets Tutorial

[ad_1]
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:

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:

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

Follow LearnWebCode on Twitter for resources and updates:


Posted

in

by

Tags:

Comments

45 responses to “WordPress Widgets Tutorial”

  1. sniperalex117 Avatar

    Nice tutorials !
    How can I add class to a widget that already exists in a theme?

  2. Arfaoui Hamouda Avatar

    Man Thanks alot for you amazing Tutorial , You just opened the Path Right in Front of me to enter the WordPress World ! as Full Stack Web Developer Freelancer that is Helping me alot !

  3. Hacen Selahy Avatar

    If you have a problem like the footer menu jump to the top.
    instead of using float for .main-column and .side-column use:
    .site-content {
    display: flex;
    }
    and
    .main-column {
    margin-right: 4%;
    }

  4. Karlo Miguel Perez Avatar

    I guess its worth noting that before anybody panics and ask why their widget isn't present in their admin dashboard – relax and watch or just jump to 5:00 to start creating the widget in their customized theme.

    It's actually the author's style to immediately present to us the finished version although I guess he forgot to mention that he'll be creating it with us at the beginning of this tutorial.

  5. Michael Dryburgh Avatar

    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');

  6. Rajni Nair Avatar

    Just too good 🙂

  7. Neetha Alex Avatar

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

  8. Klausete Avatar

    Hahahaha this tutorial guy seem to only reply to chicks

  9. David Reuven Avatar

    Great Teaching ! Do you have paid courses ? Where ?

  10. Open Sahitya Avatar

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

    }

  11. Open Sahitya Avatar

    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'),

    ));

  12. OZtheTechnician Avatar

    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!

  13. Lisa Friedrichsen Avatar

    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!

  14. Scott Pokrant Avatar

    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?

  15. jca77 Avatar

    How to create pagination in widget content?

  16. Sultana Ionut Avatar

    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

  17. Uzair Khan Avatar

    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?

  18. Christine Standing Avatar

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

  19. Katrine Gitz Avatar

    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!

  20. Brenda Skinner Avatar

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

  21. Wasim Ahmed Avatar

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

  22. Wasim Ahmed Avatar

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

  23. Kristina Avatar

    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 🙂

  24. kselax Avatar

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

  25. Neel Gray Avatar

    Great tutorial. Thank you.

  26. Kerim Grozny Avatar

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

  27. Lori Pritchard Avatar

    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

  28. Michael Russell Avatar

    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

  29. Joe Verzino Avatar

    What and where are your previous videos on css and php? This video peaks my interest in these. I think there is a widget to add code to css?

  30. brutushita1 Avatar

    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.

  31. Jack Weldon Avatar

    Great videos. Keep up the good work!

  32. Ted Avatar

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

  33. Mu Nas Dar Avatar

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

  34. best punjabi stage Dramas Avatar

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

  35. Ken Jones Avatar

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

  36. ebox008 Avatar

    We need to know php? sorry dont speak stupid!

  37. The Meaning Behind Avatar

    in which program do u write the code? 🙂

  38. MasterCharlz Avatar

    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

  39. Laura McNally Avatar

    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?

  40. David Green Avatar

    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.

  41. Obed Marquez Parlapiano Avatar

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

  42. Hector Archundia Avatar

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

Leave a Reply

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