Themes | Website In A Weekend

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

August 19, 2009 By Dave Doolin

(Reading time: 3 – 4 minutes)

Give the author byline more punch

The WordPress Journalist is an excellent theme for anyone wanting to use a blog to deliver a lot of information with a minimum amount of fuss.

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

We’ll need to either 1. find an existing class in the Journalist style sheet, or 2. create a new, custom CSS class just for ourselves. I’m going to save you some time here… I poked around in the Journalism style.css file, and I didn’t find anything useful for simple author byline formatting.

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:

Click on “Appearance >> Editor” in your sidebar menu. This will open in the style.css file.
Scroll to the bottom of style.css

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.

DIY WordPress: Moving The Author’s Byline In WordPress Journalist Theme

August 18, 2009 By Dave Doolin

(Reading time: 4 – 6 minutes)

The Journalist theme for WordPress is very popular, for good reason. It’s simple, clean, and to the point. Even Mark Jaquith, a highly highly experienced WordPress developer uses journalist for his WordPress.com blog.

Byline under post

There’s one part of the Journalist design that I don’t particularly like, and that’s having the author’s byline at the bottom of pages and posts. This morning, I set out to fix that. Moving the Journalist theme’s author byline turned out to be fairly easy, and I’ll show you how to do just that below.

Brief intermission for Chillout and Ambient music fans (all you others skip over): Check out Low Mercury from Groovera.com on iTunes radio (Click on the “Listen Now” link for browser streaming). No, this isn’t an affiliate link… but it is a promotion link. If you like it, consider subscribing at any level of commitment. I’m in at “Icicle” level. Listening to Low Mercury helps me write blog posts like this one. So helping Groovera helps me help you! What a deal! (Just so you know, I’m musically multi-dimensional: I drove into San Fran listening to The Allman Brothers Band “Live at the Atlanta Pop Festival.”).

Move the author’s byline

First step: back up everything before doing anything else.

Second, consider where you are going to do this work. I did it right on the server, live, but I’ve been programming long, long time. If you’re not comfortable fixing stuff you break, consider making the changes locally, then uploading the modified files to your host. (You might consider modifying the theme name as well, to keep track of what you have changed.)

In any case, where ever you decide to work, you will need to change 5 files, all in the same way:

index.php: This is your main website display.
single.php: When you click on a title link, this is php file that gets served.
page.php: Default layout for pages.
archive.php: When you view a category, this file lays it out for you.
search.php: The results page for a search on your website.

As it turns out, you need to make the same change in each file, except that the code is going to look slightly different in each file. I won’t go into the technical details on why having file layout handled by more than one PHP file is inconvenient. There were likely constraints dictating this approach in the WordPress framework when the theme was written. In any case, it’s no big deal, we can handle it.

What we need to do is find the block of PHP code that displays the author information. Let’s start with index.php. Your file should look very similar, but probably not exactly the same as the screenshot below. I usually tinker a bit with themes to make the format more readable, so there may be slightly different layouts, but all the pieces should be in the same order.

Find the author formatting block

After you move it, you should have something similar to this:

Byline under post title

Simple theme changes are easy

Byline now under title

Now that you have finished with index.php, you need to make the same kind of change in each of the other 4 files: archive.php, single.php, page.php and search.php.

Journalist is cleanly coded overall, but you will notice that each file has a slightly different code formatting layout, and none of them will look exactly the same as my screenshots. Don’t be rattled. Figure it out using the class names and you will be fine.

You can see the result in the screenshot above. Perfect!

Was this enough? Or is this just too boring? If you feel compelled to spice up your byline even more, you might be interested in “Styling The Author’s Byline In WordPress Journalist Theme In 3 Steps.”