WordPress Widgets Tutorial

hello everyone in this WordPress tutorial we will learn about widgets so let's answer three questions one what is a widget two how do I manage widgets from the WordPress admin area and three if I'm creating a theme how do I make sure that that theme supports widgets or is ready to accept widgets so we'll start with number one what is a widget a widget is simply a self-contained chunk of content that usually has a very specific purpose that gets displayed on a website so for example a lot of websites have a sidebar and in that sidebar we may see an area named recent posts and then a list of links that is a recent posts widget or we might see an area labeled categories and then a list of links that is a categories widget so now that we have a general idea of what a widget is let's head over to the WordPress admin area and add our first widget to a website in the admin sidebar look for the appearance link then look for the sub link named widgets in this left column we see the available widgets that ship with WordPress out-of-the-box so this is the archives widget it will output a monthly archive of our posts this is the categories widget that we saw in the example earlier now in this right-hand column we see the widget locations of the current theme that is enabled so we see the first widget location is named sidebar and we can see that in our current demo theme this is the sidebar and it's completely empty because we have not added any widgets yet so let's add a widget I will add the categories widget so I click on it it asks me which widget location do I want to add the categories widget to I will select the sidebar I will click Save so if we refresh our website they see that the categories widget is now displaying in the sidebar let's head back to the WordPress admin area and let's imagine that in addition to categories I also want to output recent posts in the sidebar so I can click the recent posts widget add it to the sidebar and if we refresh here it is now let's imagine that I decide I want this widget to display before the categories widget it's as simple as dragging and dropping the recent post widget to sit above the categories now I must point out that widgets are not limited to the sidebar area of our website so for example back in the admin area we can see that there are additional widget locations named footer area one through four so at the bottom of our website we currently do not see any widgets but let's add the search widget to the footer area one location here it is so you can take advantage of any widget locations that your theme offers so perhaps we want to add a bit of custom text to footer area too so I will click on the text widget I will add it to footer area too I can now input any text that I want custom text here this is a custom text for what area to save there you have it we could also add monthly archives to footer area 3 and we could add meta links to footer area 4 even though I'm not sure how truly useful that is but you get the idea with just a bit of clicking and dragging and dropping we just customized the sidebar of our website and the four columns in our footer and it's very easy to drag-and-drop and modify so perhaps we want to move these meta links to sit in the 3rd column I can just drag and drop and switch things up however I like alright now let's change gears a bit we are all familiar with what a widget is and how to manage widgets from the WordPress admin area so we are now ready to dig into the real meat and potatoes of this lesson if we are creating our own themes or modifying an existing theme how do we add widget' support and how do we add widget locations anywhere that we please all right so behind the scenes I just removed all of the code in my theme that was adding widget support and was adding all of the widget locations so you can see that this theme no longer has a sidebar this is the exact code that we were working with in our previous lesson so we should all be on the same page we are going to write all of the code together let's get started our first step is to hollow out or carve out a bit of space for a sidebar so the recipe to achieve this is just HTML and CSS so we want two divs and we will float one to the left and one to the right so all of this existing content we will wrap inside a div named main column so in index.php after the header I'll drop out of PHP we can drop back into PHP here but we're going to create a new div with a class of main column now right before the footer begins we can close and open PHP accordingly and I'm just going to cut and paste all of this code that is outputting the meat-and-potato guts of this page I'm going to cut that into the main column div and let's create a new div named secondary column this will be our sidebar so within this column let's include a sample paragraph that reads this is the sidebar next let's hop over to our stylesheet and add a bit of CSS that corresponds with these new class names of secondary column and main column so I will create a new comment to stay organized in our style dot CSS file main column select the main column class we'll give it a width of 66% and we'll float it to the left let's create a comment for the side column will select the secondary column class give it a width of 30% and float it to the right now if you've watched my lessons on CSS you know that when we float columns we need to clear our floats now there are many different ways to clear a float but my personal preference is to use the clear fix on a parent element so that our modules stay self-contained and can be easily moved around so all I'm going to do is create a parent div I will give it a name of site content and I'm just going to cut and paste both the main column and the secondary column into this div and then this newly created div will receive a second class of clear fix so if we save index.php and if we save our stylesheet we see that from a layout perspective our sidebar is in place so now let's work towards making this a dynamic widget location whenever we are enabling a feature or making something dynamic there's a good chance that we need to hop over to our functions PHP file at the bottom of our functions file I'm going to create a comment to stay organized add our widget locations so we need to write a function that adds a widget location for our sidebar so we'll create a function we can name it anything we would like but I will name this our widgets initialize now we will write the guts of this function in just a moment but first let's make sure that this function runs at just the right moment so WordPress offers a function named add action the first argument tells WordPress when to run this function so we want to wait until the widgets initialize action and then we just want to run this function so the second argument is the name of the function that we're creating so I'll just paste that in add a semicolon so now we are free to write the guts of our function so what do we want to do we want to register a widget location register only the name of the function we need to use is not register widget location it's register sidebar now don't get too caught up on the name this is a very flexible function that is not only used for sidebars this function accepts many arguments we're actually going to create an array so within this array the first option is name this is the name that end users in the WordPress admin area will see so this is the widget location name or in other words this name should be human friendly so we can name this sidebar now the second option is named ID now end-users will not see this so this name doesn't need to be human friendly it needs to be computer friendly so that means no spaces or extra weird characters so I will name this sidebar one now this is all the code we need for the time being but before I save this new code let's head over to the WordPress dashboard and you'll notice that when I hover over appearance widgets is not an option but as soon as we save this new code that we wrote so command s if we come back to our dashboard and hover over appearance widgets is an option you can see there is the one widget location sidebar now currently if we add a widget to our widget location nothing will happen because we haven't updated our template or theme code so for example back in index.php in our secondary column div we still have static text which reads this is the sidebar so we can simply replace this with a bit of PHP that will call in the appropriate widgets from the specific widget location that we choose so we'll use the dynamic sidebar function and this is where we use the ID that we just set up so sidebar one sidebar one save and now this code in index dot PHP will automatically pull in whatever we set up in the admin area so if we want to add recent posts add it to the sidebar and we are in business so this is excellent except it's not the year 2004 and we don't only want widgets in our sidebar some websites don't even have a sidebar but the great thing about WordPress is that it's very easy to add widget locations wherever we want so we could add a widget location in our header we could add a widget location at the top of our content area we can add widget locations in our footer so to show you how easy it is to add additional widget locations I'm going to add four widget locations in the footer so four columns in functions.php we can simply duplicate this register sidebar code so the name of our new location will be footer area one we'll give it an ID of footer one you could use any name and ID values that you choose so with this code in place if we revisit the widget screen in the WordPress admin area we see a new widget location named footer area one now if I attempt to add the search widget to footer area one if we refresh our website nothing will happen because we have not yet output the code in footer dot PHP so I will create a new div with a class of footer widgets and let's use PHP to output the widget area that has an ID of footer one so if we save and refresh there is our widget location so that's one footer widget area down let's create an additional three so over in functions.php we simply need to register additional widget locations we can duplicate this again change the name to area two and the ID to footer to duplicate it again for the area three an ID of three and once again for the area four with an ID of four so if we revisit the widget screen we now have all four widget locations now before we add any fun widgets to any of these new locations let's first output these locations in footer dot PHP so here is the footer one location I actually want to wrap each of these footer locations in a div that uses a class of footer widget area so that we can use CSS to target this class name later to create the four columns effect or four columns layout now before i duplicate this an additional three times for the two three and four areas i want to show you a neat trick so if an end-user in the admin area doesn't add any widgets to a particular location we shouldn't output this code in the browser it's a waste of markup so we can use a bit of conditional logic and say only if a widget area is active so we can use the is active sidebar function the argument will be the name of this widget area so footer one so we're saying only if there are actually widgets assigned to this widget location do we want to output any of this so then we will close our if statement and if let's indent this to stay organized so now we can simply duplicate this an additional three times for all four of our locations all right so behind the scenes I just finished copying and pasting this code and then plugging in the appropriate numbers so two two three three and four four so now we are free to add different widgets to these locations so we can add archives to footer area too and we can add meta links to footer area three and we can add custom text to footer area for custom text 44 alright so if we save and then refresh in the browser we see that all that is missing now is a bit of CSS to position these areas so that they sit as if they are four distinct columns so in footer.php you can see that we gave each column area a class of footer widget area and we're going to be floating these in just a second so I want to make sure that their parent element has a class of clear fix so let's head over to our stylesheet create a new comment footer widget areas now our columns had a class of footer widget area I want four of these to sit on a row so I will give them a width of 25% I will float them to the left and I want them to have margin or spacing between the four columns so I will give them a bit of padding right and to counteract this so that our width based arithmetic still makes sense I'm going to use box sizing border box now obviously from a graphic design standpoint there's still a lot of work to be done but you now have the tools to create widget areas and register them within your themes and you don't need to limit yourself to the sidebar or the footer you can use the dynamic sidebar function to output widget locations anywhere in any of your theme files maybe you want a widget location at the end of each blog post maybe you want a widget location that only displays in a special page template it's up to you you can create as many locations as you want now before we close out this lesson there are two more tips that I want to share number one is that if you're interested in customizing the HTML that WordPress outputs for your widgets there are a few simple options that you can add in functions.php so for example by default WordPress treats widget areas as a giant unordered list so that's why we see a bullet even for the widget titles now we can use CSS to hide the bullets or we can simply change the HTML output so for example if I inspect this header you can see that it lives inside a list item this is the categories widget and if I hover over this list item you can see that it's highlighting the recent posts widget so we can customize that if you don't want to live with the unordered list list item structure you don't need to so in functions.php we can add additional options for this widget location so I will say before widget output a bit of HTML that reads div class widget item and we'll use a different option named after widget and we will simply say close that div so now if we save and refresh WordPress is using the custom HTML structure that we just specified so now we can see this widget is using a div of the class of widget item and so as recent posts so this way you are free to add any border or margin between the widgets you can write CSS that targets HTML that you are comfortable with just a quick note you also don't have to live with the fact that by default WordPress outputs the title of widgets as an h2 with the class of widget title so maybe you want to use an h4 element to do that in functions.php you can simply say v4 title h4 with a class of my special class so you can use whatever you feel like and then be sure to add the after title and then close out whatever element you just opened so now our sidebar uses h4 elements and this lessons final tip is that the output for our sidebar which lives in index.php secondary column this code should actually live in its own file named sidebar PHP so that way we don't repeat ourselves so I will create a new file in my theme folder named sidebar PHP I will cut this secondary column code and paste it into the newly created sidebar dot PHP and then where this code used to live in index dot PHP I can simply say git sidebar and that's going to bring this lesson to a close be sure to check out the demo files for this lesson the zip file is in the description in that example I actually took the time to write CSS so that the padding the margin the borders the font sizes look a bit better but feel free to experiment with your own styles I hope you feel like you learn something and stay tuned for more WordPress and web development tutorials thanks bye just a quick note at the end here if you or anyone you know are interested in learning html5 and css3 you might be interested in a new course that I just published there is a half-off coupon code in the description for this video the course teaches these two languages from the ground up we learn how to create our own responsive grid add transitions and animations we learned about cross browser support and feature detection and we even learn the basics of sass it's definitely something to consider if you're new to web design and you want to get started on the right foot

Channel: LearnWebCode

Views: 244,714

Keywords: wordpress widgets, wordpress theme

Id: QxeQBPgftRE

Length: 20min 36sec (1236 seconds)

Published: Thu Oct 02 2014