Adventures in Co-Blogging is a monthly feature where we discuss what it’s like to blog with a group of people. We talk about tips and tricks, what we’ve learned, how we accomplished things, challenges, benefits, and more! To see all of the posts we have so far for this series, check out our Adventures in Co-Blogging tag.
When Asti, Leanne, and I decided to create a blog together, there was one thing that I really wanted to accomplish with the design. Often when reading posts on a group blog, I find it difficult to discern which person has written the post. Sometimes they do include a personal signature at the bottom, and some sites have the post author’s name displayed somewhere in the meta (you know, that chunk of information with the post date, categories, tags, etc.). But it’s rarely easy to tell at a glance.
Each of us already had a blog with a very distinct style that showed off our personalities. I wanted to be able to preserve this feeling, not only for us, but especially for our visitors, because I know this is one thing that many people like and appreciate about our individual blogs.
So how do you make it easy to differentiate between post authors on a group blog?
If you’re reading this post in its natural habitat, it’s probably clear to you by now, the solution we chose. What really triggered this idea in my mind, however, was the awesome group blog called Pub(lishing) Crawl. Not only is this blog chock full of fantastic content from several folks in the publishing industry, but they do a great job of letting the reader know who is speaking right away. Each post has a picture of the author right at the top, and the bottom of the post has a little snippet about them. It’s surprising how much the inclusion of their photo makes me feel like I know them better!
My challenge was to translate this idea into something that fit the kind of feel we wanted to have on our site.
Step 1: Choosing the Right Theme
I knew I wanted the reader to be able to tell — at a glance — whose post they were reading, so an obvious choice was some visual cue. I did a LOT of searching for the perfect WordPress theme for multiple authors, and I found very few that seemed decent. When I came across the Flounder theme, however, I knew this was something I wanted to use or mimic. I tested out the theme and ran it by Asti and Leanne to see what they thought — they were in!
What makes the Flounder theme so great for our needs:
- It supports post formats, which essentially mimic the different post format options available on sites like tumblr: image, video, quote, status update, etc. On our blog, we utilize these different post formats for each author: Asti, Leanne, Kelley, Group (like our weekly recap posts, which include content from all three of us), and Guest.
- Perhaps more importantly, this theme utilizies a different color scheme for each available post format option. This is key, because it meant a lot less work for me, trying to make each post format look different enough, while still maintaining a cohesive style.
- The clean, simple, yet visually-appealing layout left a lot of room for us to add our own personal flair without having to do too much work. I love it when tools give you the freedom to use your imagination without being too restricting!
Step 2: Working with What You’ve Got
Now that we had a theme and a plan for how to implement it, we needed to fine-tune it a bit. Right away, Asti said she had a claim on the color purple, and Leanne nabbed teal (by this point, I knew I had a winner with the theme choice). I selected green (my favorite color – yay!), and decided to round out the color palette with blue for the group of us. This was made easier because the Flounder theme already included all of these colors! We did want to tweak them a bit, so I went to my old stomping grounds and whipped up some color palettes.
Now I had a clear set of palettes to work with, which made it so much easier to modify the theme CSS (via a child theme, of course) and create all of our blog graphics and peripherals. Once we had this, that’s when I began working on a header image, which ended up rounding out the rest of our theme.
At this point, we had most of our toolset:
- Theme and plan for post formats
- Individual color palettes
- General look-and-feel with the heading fonts
With these tools, I was able to individualize each person’s post format with their color palette and a special icon/image that appears top-right of each post. Woohoo! We now had a theme that was color-coded by post author, complete with special graphical signals of the poster’s name.
- Modify CSS for global items, like: background texture, content font, heading fonts, page and sidebar colors, sidebar construction, tweaks for the way the theme adjusts to different screen sizes, remove “featured images” from the main post body
- Modify CSS for every post format type we’re using, including: colors for general post, headings, hyperlinks, meta information, images with captions, blockquotes, UBB book cover images, horizontal rules, comment color schemes (each post format has comments colored for general and post author; group posts have colors for general, plus each of us)
- Add shortcode functions for things like: blog post header images, divider lines, signatures
- Find plugins to help us accomplish: using a non-defunct (thanks, Google Fonts) version of the Amatic font, ability to use shortcodes in the sidebar, setting the front page and archives pages to display post excerpts only
Step 3: Adding Those Personal Touches
Beyond the personalized color schemes, I knew we needed a little bit more. We wanted our color scheme to translate into every area of the blog, which included:
- Special Text Boxes (for adding our own messages in group posts)
- Sidebar navigation menu
- Individual sidebar widgets
Sidebar Navigation Menu
I knew right away that I wanted the sidebar menu to include each of our personal colors for our personal links, and a group color for the global ones. Achieving this was somewhat difficult, and it took me a while of trying out various methods and plugins to get it to work. I was thrilled when I discovered that the jQuery Vertical According Menu plugin would let me accomplish exactly what I was envisioning.
The sidebar menu now displays each heading in a different color — and when it expands to display the items beneath, those follow the color scheme! This took a lot of work.
What did I have to do to get it working right?
- Create special stylesheets for each color scheme I wanted to use.
- Create special menus in WordPress for each different group of links (everything under the Features heading is in its own menu, etc.).
- Install a plugin that would allow me to use shortcodes in the sidebar.
- Create a sidebar widget that included each menu in its own stylesheet, using the shortcodes, so that they would show up as you see them.
It took some work, but it was so worth it, because I’m very pleased with how it turned out!
Individual Sidebar Widgets
One of the things I look for right away when I visit a blog is a little sidebar widget telling me about the blogger, and each of us already had one of these on our individual blogs, so this was a given. I toyed around with various plugins that would automatically add little “About the Author” boxes at the bottom of a post, but after trying these for a while, we decided this just wasn’t the right method for us.
We knew we were going to be implementing Special Text Boxes with each of our personal color schemes anyway, so this seemed like a good way to add the About boxes, too. Once I defined each of our Special Text Box styles, I was able to use the accompanying sidebar widgets to setup each of our personal “about me” widgets.
But how did we get them to only show up on our own individual posts and pages?
Great question! And it’s one that took some research, but I’m extremely happy with the solution. The Dynamic Widgets plugin was a godsend. It allows me to choose exactly which posts and pages I want each individual sidebar widget to appear on.
NOTE: This widget also inspired us to include our personal rating scales on our review posts/pages, as well as our review badges on their respective posts and pages! I LOVE THIS PLUGIN.
The Final Result
I think all three of us are extremely pleased and satisfied with the final look of our site. Each person’s posts feel different and like they belong to their owner, not to an unnamed Group Entity (I daresay even our group posts feel like Us, not Unnamed Group Entity). From the sound of the comments on our Grand Opening post, many of you also liked it (which made me — well, all of us — very happy!).
The One Remaining Question
Like many of you, I keep up with all the blogs I follow through a reader like Feedly and email. This means that most of these personal touches are not being shown (post colors, sidebar widgets, and post icon), and only the signature shows through — which is admittedly at the bottom of the post.
One way that I think this theme prevails, however, is with our post heading shortcodes. Most of our posts utilize our personally color-coded post heading images, like for Book Bingo, Bookish Games, and Almost Here. These will show up in a reader or email, which will give the reader a visual (color) cue for whose post they’re reading.