All right. So right now I’m looking at a function called register sidebar as usual. Check out the resource section of this lecture for the link. This function will tell WordPress that we have sidebars we’d like WordPress to be aware of by doing this.
We allow users to customize the sidebar by adding various widgets. If you look at the very short description WordPress recommends that we use this function in the widgets in the net action hook. So let’s do that inside the function’s file. Let’s add this hook under the hooks section and let’s call the function J you widgets next let’s create a file inside the includes folder called widgets stop BHP and define the function.
Lastly include it from the functions file. Now we can create widget areas for our theme. Let’s take a look at the documentation for the register sidebar function. There is only one parameter and it’s optional. This function accepts an array.
Let’s go through this one by one inside the widgets file. So let’s call this function and pass it into an array. The first key is the name of the sidebar. The name should be readable short and concise. I’ll be using the double underscore function just like last time since I want to allow users to translate this name if needed.
I’m going to call it my first theme sidebar. The second key we can set is I.D. We must set an I.D. or WordPress will throw an error before we set the I.D.
Let’s go to the codex for a second. Scroll down to the notes and I want you to look at the very first note WordPress warns us of I.D. we should avoid and provide a link of ideas not to use. So let’s take a quick look. As you can see the list is pretty exhaustive. Let’s go back to our widget file and let’s give our widget a unique I.D. one way of making sure we have a unique I.D. is to prefix our I.D. with initials as we do with our functions.
I’m going to give my sidebar the idea J U sidebar. Next, it’s a simple description. I’m going to make this translatable and set it to the sidebar for the theme Udemy I’m going to skip the class key as I don’t want to apply to any classes. There are a couple more things we should be doing but I just want to make sure our widgets are working. Go ahead and refresh the page.
We should see no errors so far. Let’s go to the WordPress dashboard and you should now see a new menu item appear under appearance called widgets. Let’s check this out quickly. As you can see WordPress now has created a nice little UI for our sidebar. It takes care of saving and updating the sidebar right now. Our Sidebar Is empty so let’s drag and drop some widgets onto the sidebar after doing so.
Let’s take a look at our site. You’ll notice that our widgets aren’t loading. This is because we’ve only registered the sidebar. The next step is to display the sidebar before we do that. Let’s separate our sidebar from our template. Just like the header and footer sidebar can be put into their own files and can be called with the function get sidebar.
The rules for names apply to this function as well. Create a file called sidebar dot HP next. Let’s completely cut the HDL for the sidebar from our template into the sidebar file. You can find this by looking for the div tag with the class sidebar. It will also be surrounded by these H.G. comments that say sidebar once you’ve pasted that go back to the index template and call the get sidebar function. Let’s go back to the sidebar template.
I’m going to actually delete a lot of the HMO inside the div tag and leave it empty like so. Since the sidebar is going to be dynamic inside the sidebar file we have to check if the sidebar is active inside an if statement. Let’s call the is active sidebar. Function this function does exactly what we need it to do.
It will check if the sidebar is active. You simply pass in the name of the sidebar. In our case this would be the I.D. of the sidebar we created which was J. U sidebar inside this conditional statement. If it returns true that will call a function called dynamic sidebar which will take care of displaying our sidebar. The only thing we have to pass it is the I.D. of the sidebar which is J you underscore sidebar. Any widgets that are attached to the sidebar will now be displayed. If we did everything right we should now see our new sidebar appear on the page. Great.
Well not so great because the h t email output doesn’t really go well with our theme. Let’s fix this. Let’s take a look at the Codex and learn more about the register sidebar function. There are four more keys we can set.
They are the before widget after widget before the title and after title keys. These keys allow us to inject H2 UML into the sidebars as each name states. It will insert H [REMOVED] at some point of each widget created. I’m going to pause the video for a bit and fill out these keys. All right now I want you to copy what I have for the most part. Nothing in here is really special. This is just regular H GMO with some classes to make our widgets look pretty. It can look a bit confusing because there are so many Opening and Closing Tax widget areas that are a bit tricky to create.
If you create widget areas with so many classes and tax so when you’re designing your site try and keep the H team L for widgets fairly minimal. I was able to create this through trial and error. The only thing I want you to focus on is the before widget key. You’ll notice that I have these random set of characters in the class and idea attributes these attributes are a bit special because this tag is the container tag for the whole widget.
You can think of these random characters as placeholders. There are some widgets out there that might want to add their own classes and set their own I.D. by providing these characters we allow for a third party widgets to do so. We don’t have to do anything else. Now let’s refresh the home page and see what our widgets look like now. If yours looks anything like mine then you’re on the right track. It’s definitely looking closer to the original template but we still need to make changes.
We’ve run across a problem you’ll find yourself running into when creating widget areas and sidebars from the beginning. WordPress really tries its best to not dictate exactly what you have to include. You can use a lot of your own C assess javascript and each GM l. However, widgets are a special case because the H GM L for widgets are generated by WordPress. Anything generated by WordPress tends to be difficult to edit the HDL and class is loaded don’t match the ones with our template. I want you to remember that the template we’re using was not built for WordPress. I want to show you it’s completely possible to convert an HD email template into a WordPress theme. What we have here is a conflicting HMO and assessed situation. So how do we fix this?
We have about three options. The first option is to override the H GM L for these widgets and make WordPress load these widgets formatted the same way our HD email template does. The second option is to just create our own version of these widgets and have complete control over the GMO and information loaded. The final option is to edit the template CFS file so that they look similar to the H2 email template. We will be going with option 3 because that’s the simplest of the three trying to override the default WordPress widgets. It’s more difficult than you can imagine.
Actually, WordPress doesn’t even provide you with a way to override these widgets. This forces you to try and hack the word press corps if you have any experience with trying to hack a framework or CNS then you know it can lead to massive headaches so we’ll just be editing the CFS file so that the widgets look similar to our theme. It’s faster and way easier.
A lot of developers tend to opt into this route because it’s so simple. The second option is also commonly taken. It may seem redundant but you also give yourself the opportunity to add more options that originally weren’t available in the default widgets. It’s completely allowed and even recommended we’ll definitely be exploring how to create our own widgets in a future election.
For now, we’ll just go with option 3. As I stated earlier we won’t focus so much on the HCM Ellen C Ss since we have the freedom to use whatever frameworks we want. I’m going to actually give you all the C Ss all at once inside the assets slash extra folder. You’ll find a number of files that contain some HDL NC SS already created for you. I want you to open the widgets dash CSX that t file and paste the contents of this file into the custom dot CFS file inside the assets slash C Ss folder just paste it into the very bottom of the file.
If you’re wondering how I did this all I did was look at the GM L and classes WordPress generated then I just added my own stylings. It was all trial and error. It is time-consuming but definitely the shortest and easiest route out of the three. If you plan on specializing in WordPress theme development then this kind of error can be easily avoided by preparing your HD email templates to be WordPress-ready.
I’m going to refresh the page now. You’ll notice that these don’t look anything like our template. This is because we’re very limited to what we can style and what we can add with WordPress widgets. I promise when we start creating widgets we’ll definitely recreate our own versions of these widgets with the original template styles and format it just so you know a lot of commercial shops require that you format these widgets. Even if you provide better versions of these widgets in the end you never know which the user prefers. So it’s best to accommodate all scenarios.
