Category Archives: wordpress

WordPress: Make a sequence of posts easier to navigate with Organize Series

You might have a lot to say, but you don’t want to overwhelm the readers of your blog. It’s a good idea to break up your posts into several shorter ones. That way, people don’t have to scroll through an intimidating 10,000-word post. Sequences help with that. Write several blog posts and link them up so that people can follow the path.

I’ve posted many blog posts that belong in sequences. Some of them are presentations and transcripts that I’ve spread out across time to make it easier for people to digest. Some of them are blog posts that I’ve organized after realizing how they’re related. I used to link these posts by hand, updating each post with a link to the next one and linking each new post with the one before it. Creating one page that listed all the posts meant yet another page to keep up to date. It took time to set up these links, and I didn’t always remember to do so.

When I look at my website analytics, I find that most of the visits are to pages that are deep within my archive. Besides the suggestions from Similar Posts, I also want to give people clearer paths through the content. That way, they can learn on their own. I wanted to make it easier to manage those trails through my blog posts without needing to edit many pages.

Organize Series is a WordPress plugin for sequences of posts. I like the way you can adjust the order of posts in the sequence. I customized Organize Series so that it didn’t show the list of posts at the beginning of each post, but I kept the other defaults. Organize Series adds links to the next and previous post, and it also adds a link to a page with all the posts in the series. I like the way that Organize Series makes it easy for readers to see many posts on the same page.

To see Organize Series in action, check out the series for A Visual Guide to Emacs. It links together three of the sketches I’ve made. I can add more posts as I publish them. You can also see the previous and next links in a post that belongs to a series, like this one for Adding Color, the second lesson in this Sketchnote Lessons series. Check out the rest of my series too.

The Organize Series plugin is free, and there are commercial add-ons. I haven’t bought one yet, although I find a few of them tempting. In the meantime, I’m looking forward to adding more series as I make my archive easier for people to use. Hope this helps!

Suggestions:

  • If you have a self-hosted WordPress blog and you write sequences of blog posts, give Organize Series a try.
  • Curious about what I’m learning? Suggest some sequences for me to organize or write about!

Thinking about the design of my blog

I hadn’t tinkered with my blog design in a while, since I’ve been paying attention to other things. Since I’m delegating podcast- and writing-related processes, I thought I’d revisit technical delegation too. Before I can delegate, though, I need to know what I want. I listed a bunch of blog improvements I’ve been meaning to do for a while.

2014-02-11 Thinking about blog improvements

2014-02-11 Thinking about blog improvements

I created a Trello board with the tasks. That way, I can keep track of the tasks as I assign them to people or do the tasks myself.  Trello lets me attach files (upload, Google Drive, or Dropbox), which will be handy for sharing designs.

One of the bigger tasks I was thinking about was making my site more responsive. 10% of my visits come from people using mobile devices, many from iPads and iPhones. On computers, it might be interesting to see how I can tweak my site design to make better use of larger screens.

2014-02-16 Thinking about web design #blogging #web-design

2014-02-16 Thinking about web design #blogging #web-design

For narrow widths, I was thinking of moving the sidebar down, trimming the navigation, and maybe making search more convenient.

2014-02-16 Thinking about web design and columns for my blog - #web-design

2014-02-16 Thinking about web design and columns for my blog – #web-design

I’ll need to sort out a good single-column layout for mobile devices, anyway. Do I want to keep the same distraction-free layout for larger screens, stay with my two-column layout, or add a third column? Hmm… Three columns might be too much. It might be interesting to test one- or two-columns. I’d like to be able to give people the ability to switch to the other style if they prefer. We’ll start with what we have, though.

2014-02-16 Thinking about post or page navigation for my blog #web-design #wordpress

2014-02-16 Thinking about post or page navigation for my blog #web-design #wordpress

I’m also interested in improving the navigation and discoverability of the posts in my archive. @madwilliamflint nudged me to logically arrange my posts, and the Organize Series plugin seems to be a good fit. Organize Series lets me define a series and the order of posts within it. It adds links to the series and the previous/next posts, and it also creates an archive page that lists the posts in order. Neat! See the trails I’ve defined so far.

I spent 4.5 hours last Monday moving my theme from a 960-grid to Zurb Foundation, which did make it surprisingly easy to make the site responsive. I fiddled with some of  the graphics, too. Check out sachachua.com to see what the site looks like now. =) I’m pretty happy with it, although of course there’s more to do.

It was great thinking about the things I want to tweak about my blog. Although I’m still thinking about finding someone I can delegate design or development tasks to, having a list of blog tweaks encourages me to tweak the blog myself (which is fun). I had fun setting up the series. I’m looking forward to trying out the other changes – either doing them myself or getting someone to do them.

Thoughts? What would make this site easier to use for you?

Reorganizing WordPress categories with Term Management Tools and other tweaks

Over ten years, my WordPress blog had ballooned to more than 500 categories. Part of it was because Org2Blog makes creating new categories super-easy, so I just piled them on (occasionally mispelling a few). Part of it was because I don’t really know what I’ll write a lot about until I write, so I had categories with one or two posts and then I moved on. Part of it was because I hadn’t decided what I’m going to use categories for and what I’m going to use tags for–yes, even after all those years.

I wanted to revamp my categories so that the Life, Geek, and Visual categories and their corresponding feeds might be useful to people who find my daily posts awesome-but-overwhelming and who would prefer a slice of my blog tailored to their interests. (There are even more categories on my archive page.) This meant organizing the categories into a hierarchy, but first I wanted to cut the number down to something more manageable.

The WordPress interface for managing categories leaves much to be desired when it comes to bulk actions. Fortunately, the Term Management Tools plugin makes it easy to merge categories or convert them to tags using additional Bulk Actions on the standard Categories screen.

I merged a few of the common typos, then converted any category with fewer than 10 posts into a tag. The original version failed silently when converting a category if a tag with the same name already existed, so I patched my version to silently merge the terms.

The Screen Options menu let me change the number displayed on screen to 100 items, which made it much easier for me to weed out most of my categories. Term Management Tools also provides a bulk action for setting a category parent, which was great for quickly reorganizing my categories into a hierachy.

I still had almost 3,000 uncategorized posts. Since I haven’t quite found or written an automatic N-gram text classifier for WordPress posts (if you have one, please share!), I decided to see if I could make a dent in this manually. I started by prioritizing the posts with comments. I assigned categories using the Posts screen, but that took a while and too many mouseclicks. The Categorized plugin automatically unchecks the default category once you select a different one, which saved me one click per post, but it still wasn’t enough. I ended up extracting a list of posts from my database with the following SQL command:

SELECT p.id, p.post_title, p.post_date, p.comment_count FROM wp_posts p 
INNER JOIN wp_term_relationships r ON (p.id=r.object_id AND r.term_taxonomy_id=1) 
WHERE p.post_type='post' AND p.post_status='publish' into outfile '/tmp/published.txt';

and another list of terms and taxonomy IDs:

SELECT t.*, tt.term_taxonomy_id FROM wp_terms t INNER JOIN wp_term_taxonomy tt ON (t.term_id=tt.term_id AND tt.taxonomy='category')
INTO OUTFILE '/tmp/terms.txt';

After a little spreadsheet manipulation involving VLOOKUP-ing the category name that I manually entered for each one, I copied the term taxonomy ID and post IDs into an Emacs buffer and used a keyboard macro to change it into the form:

UPDATE wp_term_relationships SET term_taxonomy_id=? WHERE object_id=? AND term_taxonomy_id=1;

where 1 was the term_taxonomy_id corresponding to Uncategorized.

Since I was on a roll, I decided to categorize everything from 2007 onwards, which is farther back than my manual index goes. That got me through about a thousand items before I decided it was enough filing for one day. As of the time of writing, there were 6512 posts on my blog. 4,536 posts (70%) belong to various categories, while 1,976 are still uncategorized.

I hope this work pays off! =) I expect that it will make my blog a little easier to browse.

Using Google’s In-Page Analytics to understand how people use a site

If you use Google Analytics to get some insight into how people use your webpages, be sure to check out Content > In-Page Analytics. It gives you an idea of what people click on, and that can influence your design decisions.

The posts on my blog homepage change roughly every week, so I used the drop-down in the top right to change the reporting date. Here’s what the overall stats look like for the main page of my blog:

image

Let’s look at the breakdown throughout the page:

2013-05-31 11_39_58-In-Page Analytics - Google Analytics

It looks like I should spend some time improving my About page, since a lot of people go to it.

2013-05-31 11_40_19-In-Page Analytics - Google AnalyticsSome blogs recommend removing the Recent Comments widget from the sidebar because people don’t find it useful. I find it handy for seeing what people are talking about, though, and it seems that other people do too. (21% of clicks to see older comments!) I switched to using the Better WordPress Recent Comments plugin in order to show comment previews. There’s a slight delay because I’m using the external Disqus commenting system which still needs to synchronize with WordPress, but I like it overall.

2013-05-31 11_40_37-In-Page Analytics - Google AnalyticsSome blogs recommend manually selecting Top Posts & Pages instead of leaving it up to the computer. This one is automatically selected based on recent views, which is great because it comes up with recommendations I wouldn’t have remembered or thought about (like that Drupal one!). I should make a Resources page, though.

2013-05-31 11_40_59-In-Page Analytics - Google Analytics

I include links to blog posts in my weekly reviews. This is surprisingly useful for both personal memory-jogging and for helping other people jump to things quickly.

2013-05-31 11_41_15-In-Page Analytics - Google Analytics

I have a hard time getting the hang of “Next page” and “Previous page” navigation on blogs. (Am I going forward or backward in time?) I changed my theme to make it easier to figure out which direction you’re going in, and I have these paging links at the beginning (near a table of contents) and at the end of the page.

2013-05-31 11_41_23-In-Page Analytics - Google Analytics

This is all the way near the bottom of the page.  It has the same numbers as the ones up top, so I think Google Analytics might be getting confused about the links because they go to the same place.  (Same with the Older Posts link.) I can probably disambiguate the links by changing the tracking code.

So, TODOs for me: spruce up my About page, figure out where to add a Resources page, look into asynchronous tracking, and see if there’s a way I can set up WordPress to experiment with different layouts…

Check out Google’s In-Page Analytics if you have it on your site!

Note: Got an error while trying to use In-Page Analytics? Make sure you’re properly calling the Google Analytics code on the site. I use a Wordpress plugin to make sure that my visits aren’t tracked when I’m logged in (no sense in throwing off the stats with obsessive refreshing! Winking smile ), so I needed to log out of my site before checking In-Page Analytics.

How to make a hand-drawn highlighted web page header

For the longest time, I’d been meaning to make my website look more hand-written and to take advantage of Google Web Fonts to make my site feel slightly different. After some design-related nudging from Matt Tanguay, I finally got around to it. Here’s how! =)

For comparison, here’s the “before” picture:

image

After (I tweaked the links, too):

image

If you’re already comfortable with HTML and CSS, it turns out to be pretty easy to make a hand-drawn website with highlights that appear when you hover over links. Here’s how!

Step 1: Draw the header image.

It can be more efficient to have one medium-sized image instead of lots of little images, and it’s easier to work with one image instead of many small ones. You’ll use CSS to split this up into rectangular regions later, so keep that in mind when designing your image and try to avoid overlaps.

I drew the main image using Autodesk Sketchbook Pro, but you can use any image-drawing program. You can even draw it on paper and then scan it in.

design

(I didn’t end up using the Random Page! button, but that’s okay. =) )

Step 2: Add highlights.

I added another layer below my main layer and highlighted whatever I wanted to highlight, making sure things were separated by enough whitespace so that the highlights didn’t overlap into another link’s rectangle. If you’re doing this on paper, you can highlight on paper as well.

design-highlighted

You’ll notice that everything is highlighted in this image. No worries! We’ll display just the appropriate part later.

Step 3: Set guidelines.

Setting guidelines using a photo editing tool like the GIMP will make it easier for you to select consistent rectangles. Here, you can see how I’ve set up my guidelines to make it easy to select a rectangle containing the “Home” link. You can use the rectangle selection tool to get the position and size, which you can find in the Tool Options window.

image

Step 4: Write your HTML and add IDs/classes to it.

Code your HTML so that the text makes sense, and then use CSS to replace the text with images and to lay things out for your intended design.

I added IDs and classes to my links to make it easier to replace the links with images later on.

<ul class="links" style="margin-bottom: 0">
<li><a id="home" class="replace home-design" href="/">Home</a></li>
...
</ul>

Step 5: Replace the text with your images using CSS.

There are a number of CSS text->image replacement tutorials out there. The general idea is to use text-indent to hide the text, and then use background, background-position, width, and height to display the right portion of your image.

This is where the guidelines from Step 3 come in handy. Simply make the position negative and use that as the background position, then use the size as the width and height.

.home-design { background: url(images/design.png) 0 0 no-repeat; }
.replace { white-space: nowrap; overflow: hidden; text-indent: 100%; }
#home { width: 96px; height: 40px; background-position: -81px -105px; display: inline-block }
.header .links .replace:hover { background: url(images/design-highlighted.png) 0 0 no-repeat; }

Tada!

Still have questions? Please comment below – I’d be happy to explain more!

How I use Feedburner to give people the option of different blog update frequencies

I’ve been thinking about how to make it easier for people who want to keep in touch but who don’t want to be overwhelmed by my daily posting schedule. Instead of trying to come up with the Best Way on my own, I asked what people wanted. Out of 26 votes (as of the time I wrote this), ten people wanted weekly newsletters and three people wanted monthly newsletters. That probably means that even more people would like those less frequent update options, so I decided to spend some time figuring out a good way to offer that.

Since I already do weekly and monthly reviews, the easiest way would be to make those reviews available in a separate feed that people can subscribe to over RSS or e-mail. I’ve been using Feedburner as a way of making my feeds more browser-friendly and as a way to handle e-mail subscriptions. Although I’d been concerned about the long-term longevity of my feeds in case Feedburner shuts down, it turns out that you can set up your own domain name by following the instructions under My Account > MyBrand.

image

I set up my feeds to use feeds.sachachua.com instead of feeds.feedburner.com. That means that if Feedburner goes away, I just need to change my DNS record to point to my own server and write my own redirect rules. I wish I’d done this earlier! Anyway, if you subscribed to http://feeds.feedburner.com/sachac , please switch to using http://feeds.sachachua.com/sachac instead.

With the new feed URLs in place, I created Feedburner feeds for my weekly and monthly reviews. Category feeds are built-in, so all I needed to do was tell Feedburner to handle http://sachachua.com/blog/category/weekly and http://sachachua.com/blog/category/monthly . I customized each feed to include a short message pointing to the other feeds (Optimize > BrowserFriendly), change the URL, and enable e-mail subscriptions (Publicize > Email Subscriptions).

image

Then I modified my WordPress theme to include links to the new feeds. To make the feeds available from the feed icon in many browsers’ address bars, I added the following code to my <head>…</head>:

<link rel="alternate" 
  type="application/rss+xml" 
  title="Feed (~daily)" 
  href="http://feeds.sachachua.com/sachac" />
<link rel="alternate" 
  type="application/rss+xml" 
  title="Weekly reviews" 
  href="http://feeds.sachachua.com/sachac-weekly" />
<link rel="alternate" 
  type="application/rss+xml" 
  title="Monthly reviews" 
  href="http://feeds.sachachua.com/sachac-monthly" />

Result:

image

I also added links to the feeds in my sidebar using the Appearance > Widgets > Text widget.

Now, people should be able to easily subscribe to whichever frequency they want. =)

On another note: I was surprised and delighted to find that many people wanted daily updates. Thank you! I’ll try to make my headlines useful so that you can guess right away if you would be interested in something, and we’ll see if I can write weekly review headlines with keywords as well.

If you blog a lot, I hope you find this tip handy!