Custom Class Attributes for a more Refined WordPress Theme

Adding custom class tags isn’t exactly a new revolution in web development, and I am sure many of those reading this have used them in the past, but as someone that just started using them I thought it would be fun to share with others just how much you can do with a custom tag if you know even a little bit of HTML and CSS.

As many know, I like to play around with my website and change things up with my theme(s). I primarily do this by selecting a base WordPress theme and editing that theme in the “Additional CSS” section when customizing my WordPress theme.

If you aren’t familiar with CSS, you can learn a lot fairly quickly when using the Developer Tools in Google Chrome. Once I started inspecting the websites I thought were beautifully designed and researching about the fundamentals of CSS I started to mess around with my own website. After some trial and error I managed to make changes to my website I never thought I could. Eventually, editing WordPress themes and making changes became a hobby/addiction for me.

What I have done recently is added class attributes to specific parts of my writing. For those of you that don’t know, if you were to write your posts in HTML you can add a class attribute to items and use them with custom CSS to change only items with that tag.

For example, if you wanted to have a class that makes your text larger, you can make a class tag called “big-text” which you can then edit what happens to the text.


This is normal text.

This is big text.


That code would look something like this after adding custom CSS to that attribute.

This is normal text.

This is big text.

To get these results, you need to add custom CSS to the newly created attribute. As the name suggest we want to make changes to the font-size of the text tagged with “big-text.”

So, let’s say we want to make the text 300% larger than normal when tagged with “big-text.”

Here’s what we could use for the CSS to make that happen:

.big-text {
font-size: 300%;
}


Once you add this to the CSS you will see all text that has that class tag will be 3 times larger than normal.

It would look something like this.

There are a lot of use cases you can make for using custom attributes, but for me I had one thing in particular I wanted to change.

What I use it for

I didn’t start using class tags for text size, instead I used it for when I make a Link Post and want to characterize the link to the original source. If you go to a recent link post of mine you will see where my source link at the top is different to other hyperlinks in the post. A great example is my recent post about Rosemary Orchard’s empty link Drafts Action.

As you can see, the section that I use at the top to link to Rose’s post is underlined while other links are not. I simply did this by using a custom class attribute in the post and added a “border-bottom” CSS attribute to that tag.

Here is what my post looked like with the custom HTML class:

<a class="link-source" href="https://rosemaryorchard.com/blog/drafts-action-fix-empty-markdown-links/">Rosemary Orchard</a>:


The CSS I use to make the text look the way it does is as follows:

.link-source {
border-bottom: 1px solid !important;
}


I don’t have a coding background, everything I use has been self-taught or explained to me from someone who knows more than I do about coding. I am sure someone reading this who is much more knowledgeable will tell me there is a more efficient way of making the same tweaks to my website. With that said, if the “more efficient” solution involves a lot more coding and knowledge beyond my limited scope of web development, I think I will stick with this solution for the foreseeable future.

Jeff Perry @JeffPerry