Part Four: Laying it All Out There

As we approach the topic of custom layout, I do want to repeat: your safer option is choosing a different theme. There are so many to choose from, and growing all the time, and it’s hard to imagine you’ll have layout needs that aren’t already found between the original options and the layout of the original design.

However, if you’re an insistent type, or you just like a challenge, you might want to start by getting rid of all the CSS entirely. You can view the custom CSS for the page using your developer tools, and once you see what’s going on, you can test your expertise from there.

I, however, am not an expert. While I do have aspirations of becoming one, I do not see CSS when I close my eyes, nor am I yet confident when I write a line of code that I know exactly what will happen. While I’ve been playing with layout in my custom CSS, I’ve felt a little like this poor little dinosaur, who keeps destroying the city:


Godzilla was largely misunderstood.

But here are some things I’ve learned, and some things I’ve learned how to do:

Extra Columns in Your Posts

If you want a little newspaper look to your posts, you can use a two or three column format, you can add something like the following to your custom code:

article {
column-count: 2;

I used the element selector; you could have used a class selector if you preferred, and it may not be the same element or class selector in your particular theme. Notice we didn’t use “body” or “div,” each of which results in something disastrous and interesting, and I invite you to take a look at what they do if you’re curious.

But this solution isn’t without casualties either. Take a look at our short article from last time:

Screen Shot 2018-07-10 at 11.01.06 PMMy caption fell apart! The columns took over everything, now I need to override at least that one element to keep everything together. In my theme, that’s the “.wp-caption” class, but what do I do with it? White-space: no-wrap? Text-wrap: suppress? My solution in the end is:

.wp-caption {
overflow: auto;

I thought I might be able to move my widget bar from one side to the other, but I couldn’t. I thought I might be able to detach my header image from the sidebar and put it across the top, but all I could do was stretch it off to the side. But I’ll keep experimenting, and soon, I’ll try to come up with a handy list for you of the commands I know you can use.