Responsive Horizontal widgets

As a person I like to push the limits of what I can get away with, like how many days I can go without washing my favorite shirt before I gag. Well, I like to push the limits of my coding as well especially Bootstrap. I love using Bootstrap because it does all my responsive work by itself, and working the front end is super fast. I’ve been developing my own website for not only myself but hopefully give something back to aspiring web developers like myself. So today I’m going to give back something I found dinking around with my custom sidebar. One thing I’ve hated while learning is not being able to start from the beginning so I’ll start with adding bootstrap to the theme via the “functions.php” file.(This is where 90% of things are going to happen)

There’s other ways to do this but I like to go with the way that works for me, if there’s better ways that work let me know.

First we have to remove jQuery that comes preinstalled with WordPress. This keeps the unknown from popping up like having two instances of jQuery loaded.

Notice I didn’t close the statement, I’ll get to that in a second. I’ll also skip over the unimportant stuff like the conditional statement because you can pick it up from Chris Coyier’s snippet Here which is where I got this. But the gist of it is creating a function called “my_jquery_enqueue()” then calling on the wp_deregister_script(‘jquery’) function that is a part of WordPress.

The next step is to include the CDN from jQuery if downloading scripts can be avoided by using a CDN then ABSOLUTELY do it. It saves loading time, seriously. Anyways, this is how you would enqueue jquery, again very simple.

You can probably guess what this does, it registers a script called “jquery”, and the script is from the CDN. It also asks whether or not it will be included in the footer of the site. With Bootstrap you need to have jQuery in the head because Bootstrap depends on jQuery. The second statement, “null”, is asking if it has any dependencies. The answer is no or as shown, null because it doesn’t. It’s a standalone.

Next we’ll add in the Bootstrap JS and CSS via also CDN because again, it’s easier. I never know what I’m going to use when I get in the zone so I like to have the whole thing at my disposal.

Ok now that that code is inserted it is doing the same thing as including jQuery. It’s adding scripts called by the name and where it’s located. I also enqueued my own stylesheet. If you don’t want to go that way, that’s cool by me but again I like to push my limits and if you want to go the safe way of putting it manually in the head then by all means have at it.

I hated fishing for the snippets that I needed because something always got mixed up so here is the final part of adding jQuery and Bootstrap to the “functions.php” file.

Now that we’ve successfully added jQuery and Bootstrap to your WordPress theme we can move on to the sidebar. You can either create a sidebar from scratch or you can use GenerateWp’s generator which has come in handy for me. You can also get that Here

I won’t go into too much depth with this one because most of it is self-explanatory. Here is the one I created.

If you look closely enough you can see that I added in a Bootstrap class, “col-md-3”, you can change it to whatever size column you like but for this instance, it works. That class is going to make every widget have it’s own column much like my mother did with me and my siblings when we weren’t getting along. Each widget will collapse underneath each other when the screen size is changed. The problem is that it won’t have a definitive container to establish it’s width to collapse. This is where the next part comes in, so let’s migrate to the “sidebar.php” file.

And here we are at your sidebar file and this is what you need for it to work on the front end.

And that’s it, the problem solver. You can see the “col-md-12” class to the main “aside” element. What that does is it tells each widget column, “col-md-3”, to collapse when it reaches its limited width. The final picture should look like this.

responsive-widgets

The “col-md-12” is basically a fail-safe, it’s most likely not needed but seeing as it fit this purpose and added the appropriate padding and margin to each widget, I’m sticking with it.

Now imagine what you can build with a horizontal sidebar with responsive widgets! Can you say “EPIC”!