DIY WordPress: Styling The Author’s Byline In WordPress Journalist Theme In 3 Steps

(Reading time: 3 – 4 minutes)

Give the author byline more punch

Part of what makes Journalist such a good theme is that it’s easy for WordPress beginners to modify in simple, powerful ways. For example, moving the author’s byline from below the post to above the post is very simple.

But the default author styling is too plain. Let’s add a little punch to it using a bold font, as shown in the screenshot above.

WARNING: Make a fresh backup before poking around in theme files.

Add font format class to style.css

CSS styling for post author

Since we want to restyle the author’s byline, let’s make it really easy and create a CSS class called “theauthor.” Here’s how:

1. Click on “Appearance >> Editor” in your sidebar menu. This will open in the style.css file.
2. Scroll to the bottom of style.css
3. Add this formatting, also shown in the screenshot:

   1 2 3

   span.theauthor { font-weight: bold; }

That was easy! Now, we need to add the styling information to each page template in the theme.

Add class to page templates

As noted in “Moving The Author’s Byline In WordPress Journalist Theme,” 5 files need to be modified: archive.php, single.php, index.php, search.php and page.php. Below is a screenshot of what this looks like in your theme editor:

Add styling information to the page templates

As you can see, it’s pretty easy. Just wrap the_author() tag with the span, here’s what the code looks like:

1

<span class="theauthor"><?php the_author() ?></span>

Again, easy business. Make sure to add the span to all 5 files, and check to make sure everything works. If you make a mistake, it will break your website, and you will notice. So will everyone else. It’s not hard, just take care. This is why you did a backup before you started, right?

Is there more you want to do with the author information? There’s more I’m going to do. Stay tuned.

Tagged as: css, design, DIY WordPress, Journalist, Layout, Marketing, Self promotion, Themes