{"id":55,"date":"2008-07-11T09:15:07","date_gmt":"2008-07-11T09:15:07","guid":{"rendered":"http:\/\/30dayloa.com\/?p=55"},"modified":"2008-07-11T12:03:01","modified_gmt":"2008-07-11T12:03:01","slug":"widgetizing-the-unstandard-theme-sidebar","status":"publish","type":"post","link":"https:\/\/30dayloa.com\/blog\/widgetizing-the-unstandard-theme-sidebar\/","title":{"rendered":"Widgetizing the Unstandard Theme sidebar"},"content":{"rendered":"

I love The Unstandard theme<\/a> from 5thirtyone for it’s cool way of presenting posts, but the sidebar wasn’t down to be widgetised until the next release – and from his blog it seemed like the author might be too busy to do that for a while. So, not having done a lot of coding since the old days of html (although I did dabble a bit in php and javascript a few years back) I waded gamely in to learn my way around someone else’s – fantastic I might add – work. Hopefully without making too much of a hash of it.<\/p>\n

The long and the short of it is, I found lots of sites on designing themes, and widgetizing ones that didn’t have it, but following most of them I found the neat pretty formatting of the sidebar suddenly disappeared in favour of a tiny, mashed up ultra small script. Argh! Not good! Today being the first day I’ve had any serious time to delve, though, I did discover the why and wherefore behind losing the formatting. It lies in the ‘functions.php’ page.<\/p>\n

Credit where credit is due, as well as WordPress.org stuff and a primer that got me started<\/a> (and panicked when I lost the formatting), the turnkey point was when I found this post<\/a> today that clarified it for me. When wordpress registers a sidebar, I needed to tell it what formatting to put before and after the titles, as well as before and after the widgets.<\/p>\n

Now, I haven’t exactly got it right yet. For some reason it seems that each widget title appears larger than the one before it, so I’m not sure what’s going on there (update: found a workaround below, but still need some help with tidying it), but in a nutshell you need to do three things:<\/p>\n

First: create or edit the functions.php file so that wordpress knows what to do if there are widgets on the sidebar. The code I got was from that last link above was:<\/p>\n

<?php
\nif ( function_exists('register_sidebar') )
\nregister_sidebar(array(
\n'before_widget' => '',
\n'after_widget' => '',
\n'before_title' => '<h4>',
\n'after_title' => '<\/h4>',
\n));
\n?><\/code><\/p><\/blockquote>\n

Because the article explained that it was to fit in with custom headings etc, I knew where to look in the sidebar.php file to discover what needed to be put in for the Unstandard theme. My modified version is:<\/p>\n

<?php
\nif ( function_exists(‘register_sidebar’) )
\nregister_sidebar(array(
\n‘before_widget’ => ‘<br \/><br \/>’,
\n‘after_widget’ => ”,
\n‘before_title’ => ‘<\/ul><h3>’,
\n‘after_title’ => ‘<\/h3><ul class=”sidebar-ul”>’,
\n));
\n?><\/p><\/blockquote>\n

The top bit ‘before widget’ gives you the nice spacing, the before and after title lines put it into the sidebar formatting. The list formatting didn’t come up until I added in the <ul class…> bit, but I suspect that’s where my enlarging titles are (were) coming from, since I couldn’t figure out how to close off the ul class. Don’t forget to save the changes before you move away from that page. The button’s way down the bottom (update file) so I for one keep forgetting to do it! <\/strong><\/span><\/p>\n

Update<\/strong><\/span>: I tested putting \/ul in the ‘before title’ part, and it did fix the enlarging titles problem, but it’s messy, since the first widget will have a \/ul that has no corresponding ul tag. Any flash coders out there know how to put conditions in there so it’ll only put the h3 on for the first widget?<\/p>\n

Anyway, that’s step one. Now your theme knows how to handle widgets in the sidebar.<\/p>\n

Step 2 is to tell the sidebar file that it’s supposed to allow widgets in. That involves two pieces of code – a start one and an end one, which you put in at the part you want to have the widgets come up instead of.<\/p>\n

I wanted to keep the search bar, as well as that cool ‘next\/previous’ thing, so I made sure to put it underneath that – the lines to look for are:<\/p>\n

<h3>Explore Recent<\/h3>
\n<ul class=”sidebar-nextprev fix”>
\n<li class=”previous”><?php previous_post_link(‘%link’) ?><\/li>
\n<li class=”next”><?php next_post_link(‘%link’) ?><\/li>
\n<\/ul>
\n<?php } ?><\/p><\/blockquote>\n

It had to go in AFTER the section got closed off with the } bit (got some weird errors when I accidentally put it in after the \/ul instead.) Then I pasted in:<\/p>\n

<?php if ( !function_exists(‘dynamic_sidebar’)
\n|| !dynamic_sidebar() ) : ?><\/p><\/blockquote>\n

Finally, I had to tell the file where it was supposed to stop putting in the dynamic stuff. That line is<\/p>\n

<?php endif; ?><\/p><\/blockquote>\n

and I put it in just before the last <\/ul> (on the last line). If you just want to copy & paste the whole lot into your sidebar, click here<\/a> to open the text file with the entire code for your sidebar.php under your theme editor. Again, make sure you save the changes.<\/p>\n

Final step is to go to your widgets tab under design and drag in the widgets you want. Remember this is replacing<\/em> all the ones that come standard (recent posts, archive & meta) so if you want them, you’ll need to drag them over to the right to put them back on. It’s a good idea to click on ‘edit’ for each of them to check for any titles etc that are needed by the widgetised versions of the sidebar section.<\/p>\n

That should be it. Open the site up in a new tab or window and hit refresh to check what it looks like, and start playing!<\/p>\n

PS I also figured out how to tweak it so that I could pick what posts were displayed on the front page.\u00a0 Comment back if you’d be interested in how to do that one too (it’s surprisingly simple…)<\/p>\n","protected":false},"excerpt":{"rendered":"

I love The Unstandard theme from 5thirtyone for it’s cool way of presenting posts, but the sidebar wasn’t down to be widgetised until the next release – and from his blog it seemed like the author might be too busy to do that for a while. So, not having done a lot of coding since […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[59,60],"tags":[66,65,64,67,63,62,61],"class_list":["post-55","post","type-post","status-publish","format-standard","hentry","category-featured","category-web-design","tag-customizing","tag-scripting","tag-sidebarphp","tag-the-unstandard","tag-widgetising","tag-widgetizing","tag-wordpress-theme"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/30dayloa.com\/blog\/wp-json\/wp\/v2\/posts\/55","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/30dayloa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/30dayloa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/30dayloa.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/30dayloa.com\/blog\/wp-json\/wp\/v2\/comments?post=55"}],"version-history":[{"count":1,"href":"https:\/\/30dayloa.com\/blog\/wp-json\/wp\/v2\/posts\/55\/revisions"}],"predecessor-version":[{"id":153,"href":"https:\/\/30dayloa.com\/blog\/wp-json\/wp\/v2\/posts\/55\/revisions\/153"}],"wp:attachment":[{"href":"https:\/\/30dayloa.com\/blog\/wp-json\/wp\/v2\/media?parent=55"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/30dayloa.com\/blog\/wp-json\/wp\/v2\/categories?post=55"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/30dayloa.com\/blog\/wp-json\/wp\/v2\/tags?post=55"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}