Day 37: Customize your WordPress website with CSS

I know what you’re thinking. (Groan) I hate technical stuff!

And I get it. Creative people tend to focus more on the work they do best, like writing, painting, or creating art.

Especially when you have website builders already in place, all you need to do is select which looks fit you best. So what’s the fuss about technicality when it’s already right there staring you in the face?

The technology is supposed to be there to help elevate your situation, not aggravate it. But for every creative who has ever published online, one way or another, they have to come across things like HTML and CSS in order to customize their websites.

And although I’m not a web designer (by profession and by heart—I love coding more), I can’t stress enough importance on CSS customization.

Knowledge truly is powerful. If you equip yourself with the proper information and skills, you might just come through loving the process of dealing with technical stuff more than hating it.

I’m hoping you already know what HTML and CSS is for. So I’ll dive in to the basics before we add our CSS tweaks.

Prerequisites for CSS customization:

  1. self-hosted WordPress. You can also edit your CSS with WordPress.com but I reckon this feature only comes with Premium accounts.
  2. theme to be tweaked upon (mine is Unwind by SiteOrigin).
  3. set up of how you want your theme to look like by using the Customize feature. Setting up other theme elements and Theme Options can help lessen the need to add CSS. Once you’ve finished customizing your theme using this feature and you still aren’t satisfied with your website’s overall look, then you can proceed to adding CSS to tweak the other details.

Adding CSS

This now leads me to the next step: adding in CSS code using the Additional CSS option to suit your website’s brand.

Here’s how my CSS code (partially) looks like:

blockquote {
 font-family: 'Arapey', serif;
 font-size: 24px;
 padding: 10px 5px 0 10px;
 margin-left: 10px;
 margin-right: 10px;
}

strong, b {
 font-weight: 600; 
}

.container {
 max-width: 950px; 
}

.entry-content, .entry-content p, .entry-content h2, .entry-content h3 {
 max-width: 700px;
 margin: 0 auto;
 padding-bottom: 20px;
 padding-left: 10px;
 padding-right: 10px;
}

Note: As I said, I don’t do web design professionally. I know enough code to edit my site to how I want it to look like. So if there are best practices out there that I’ve not come across in my own code, my bad (and will you hit me up on Twitter about it so I can learn more, too?). Also, if you want more context, W3Schools provides straightforward resources and examples.

CSS Breakdown

For simplicity, I’ll just call each section enclosed in { and } as (you guessed it) “section.”

So the first section describe how I want my blockquotes to look like.

The second depicts how I’d like the bold text to appear. By default, the current theme sets a much lighter font weight, which is why I set this in Additional CSS to override current theme defaults.

The third section shows how I changed the maximum width of my container (aka the width by which all the other elements of my site are enclosed in) to 950 pixels.

And finally, the fourth section sets the maximum width of textual content to a much narrower 700 pixels. I’ve also set the margin to automatic in order to place the content at the center of the webpage. Additionally, I indicated the padding for specific sides.

If you’re familiar with Squarespace, they do a similar way of displaying blog archives and text. That is, they make the blog images extend wider than the text. I simply implemented the same concept on my own site. (Imitation is the sincerest form of flattery, so they say.)

Anyway, the CSS customization above is just an example of how much more different your website could look if you used the information that’s already out there.

Design is only as good as function

It will take time, energy, and patience but learning HTML and CSS–even just the very basics–is good investment. Otherwise, you can delegate and/ or hire someone to do the customization for you.

The thing is, in our quests to focus on the creative work we so loving doing, we might forget that there’s also some really good ways in which we can deliver our work to our audience most effectively.

We need to keep in mind that our readers our humans as well. And humans generally respond well to good ol’ functionality.

By knowing and implementing good CSS customization, you have the potential to create a user experience that enables clearer, more efficient, and more organized communication.


What web hosting service are you on? Are you familiar or have experienced any problems with HTML and CSS? Let me know in the comments.