Customizing a Theme

It’s amazing to me how well WordPress works and yet how poorly it works at the same time. I realize that it’s the “Open Source” nature of it all that’s to blame. Programming by committee. Everyone doing their part to make sure that their code works but no one taking the time to make sure that it works with anyone else’s code. I work in the open source world every day and see the same things. People making assumptions about how things work and forcing those assumptions onto the end user. I’ve got some examples. 

For security reasons, I had to do some updates to my php. These updates also required that I change themes. My old theme, Brickyard, was not compatible with php 7.3. Or so the php-checker said. And I guess I believe it. So I went in search of a new theme. The one that was the closest to what I wanted was ‘Gist’. But nothing comes without a price. Something always needs to be tweaked.

One. The background image. It’s the first thing that I wanted to add. I don’t like scrolling endlessly through a single color page. Give me some texture. Give me some separation between entries. Give me a break, literally. Add background image: click. Now the blog entries ‘pop’. There’s a distinction between them. There’s a flow. Except my search bar is gone. Obscured. Absorbed by the background image. So is my pagination. 

CSS rescues me. Being able to edit the custom style sheet gets me out of the theme’s programmable stupidity. I just have to identify the element id or the class definition that’s causing or allowing the problem to occur. That in this case meant adding ‘background: white’ to ‘page-header’ and to ‘candid-pagination’. 

Two. The Masthead. The first area that anyone looks at. In this theme, it’s separated into three areas; the site-id, the navigation menu, and the header image. I have no idea the reasoning behind assigning all three different shapes. It was like mismatched Lego blocks randomly stacked together.  It gave the impression that the site was just thrown together and you shouldn’t expect too much from it.

CSS rescues me again. I had to manipulate the ‘header-image-block’, the ‘main-navigation’, the ‘site navigation’, and the ‘masthead’  by adjusting the padding, the width and the margins. And it took some time, but I got it all to look similar to how I envisioned it. I actually had it working a couple of different ways. I had them stacked in different orders and variations. But every time the page was redimensionized on a different device the three went out of whack. So I just left the theme’s order alone and aligned everything to my satisfaction.

Three. Breadcrumbs. Don’t need them. Don’t want them. Turned them off. The theme has a checkbox. Turn off breadcrumbs: check. So what is this white line doing at the top and bottom of my blog entries? It could be an after effect of my first customization. But it’s still unwanted. “Breadcrumbs” “display: none”. Poof. gone.

Four. Page width. Now here’s a real kick in the head. My old Brickyard theme had a page customization to set the usable width of the page. It had to be set in pixels according to the theme’s error checking. I had set that ages ago as 1200 pixels. That value crossed over to the new Gist theme. But not the ability to change it. So if I wanted to enlarge the area of my page that my entries could occupy, I had to change themes, change values, and change back. As if. 

CSS is more flexible now. In older versions and with older browsers I may have been limited to setting the value of ‘max-width’ to be in pixels. But now I have the ability to set it in percents. So regardless of the screen dimensions, I am going to use 85% of that width for my page. Unfortunately, setting this value also changed all the alignment that I had done in my masthead. Fortunately, since I already adjusted them once, tweaking them again was super easy.

Five. The blog history widget. It’s a single command in a sidebar widget that is translated to display the title and date of every blog post for your entire site. Now, I’m not much in the way of a prolific writer. Not like my friends Richard and Wil. But given that I’ve been slothily doing this for a decade, there’s a good quantity of items to display. Who in their right mind wants all that data to stretch the length of their page to infinity. I mean, the blog entry itself could just be three lines but the sidebar makes it go on for miles. 

This one is just a CSS no-brainer. I found the element that controlled the widget’s display, widget.widget_recent_entries, and set the parameter ‘height’ to be 600 pixels and set the ‘overflow-y’ value to ‘scroll’. Okay, I also set some values to make the blog title bold and the blog date italic. But it wasn’t a big deal to do either. Ta-da. Mischief managed. The page scrollbar now indicates the length of the blog entry and the widget is scrollable its-own-damn-self.

And there were a couple of little tweaks that I did just to make things to my liking. I put a black border around my feature images and I removed the white background from my GreenGeeks badge. But that was all. Thank you, CSS.