Category Archives: wordpress

On this page:

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!

Poll: How often would you like to receive e-mail updates? Also, quantifying my blog posting history

I’ve been posting practically every day for the past 3.5 years, and I write about a variety of topics. I’ve been thinking of ways to make it easier for people to keep in touch without E-mail newsletters seem to be a Thing. Right now, the e-mail subscription form on my blog is the default provided by WordPress, so people get daily updates (which is probably a bit much). I’ve been thinking of making it easier to subscribe to weekly or monthly updates. Would you find something like that useful? I’d really appreciate it if you could answer this poll!

[poll id=”1″]

(Don’t see the poll? Try viewing this post on my website.)

Aside: I was curious about just how long I’ve been keeping up with this ~1 post a day thing, so I graphed my blog posting history. It turns out that I’ve been pretty consistent, although there were days when I didn’t have anything new posted. I schedule my blog posts using Editorial Calendar and I sometimes send people sneak previews of upcoming posts using the Share a Draft plugin. This lets me smooth out the spikiness of my writing habit into a more predictable publishing schedule.

blog-posting-history

To generate this graph, I extracted the timestamps of all my published posts with the following SQL query:

SELECT UNIX_TIMESTAMP(post_date) FROM wp_posts WHERE post_type='post' AND post_status='publish' 
INTO OUTFILE '/tmp/timestamps.txt';

… and then I graphed it with cal-heatmap, removed in-between labels in GIMP, and used Autodesk Sketchbook Pro to hand-write new labels. =)

Sketchnotes from WordCamp Developers Toronto 2012 Day 2 #wcto

From Wireframe to WordPress Theme in 10 Minutes – Sam Xu

20121104 WordCamp Toronto Developers - From Wireframe to WordPress Theme in 10 Minutes - Sam Xu

WordPress for a Large Site – Brandon Hill

20121104 WordCamp Toronto Developers - WordPress for a Large Site - Brandon Hill

Mobile Apps in WordPress Version 2.0 – Trevor Mills

20121104 WordCamp Toronto Developers - Mobile Apps in WordPress Version 2.0 - Trevor Mills

If you like this, check out the sketchnotes from Day 1 of WordCamp Developers Toronto 2012, or see my other sketchnotes! Search Twitter for #wcto to see what people have been saying about WordCamp Toronto, or check out the conference site for more updates and slide decks.

Sketchnotes: WordCamp Developers Toronto 2012 Day 1 (#wcto)

UPDATE 2012-12-10: Now with links to slides!

Quick notes from WordCamp Developers Toronto 2012 Day 1. Enjoy! Click on the images to view a larger version. Please feel free to share them! © 2012 Sacha Chua, Creative Commons Attribution Licence

Creating Your First Plugin the Easy Way, Christopher Ross

20121103 wordcamp toronto1

Slides

Intro to the Template Hierarchy, Al Davis

20121103 wordcamp toronto2

Slides

User Centricity in WordPress Design, Taylor Dewey

20121103 wordcamp toronto3

Slides

Panel: Building a WordPress Development Business – Shannon Smith, Tom Auger, Brent Kobayashi, Dale Mugford, Trevor Mills, Marko Heijnen

20121103 wordcamp toronto4

Unconference: Women in WordPress – Hosted by Shannon Smith

20121103 wordcamp toronto unconference women in wordpress

WP Theme Frameworks: Speed Up Your Development Process, Chad Mohr

20121103 wordcamp toronto5

If you like these, check out:

Sketchnotes: WordCamp Toronto 2012 (End users) – Day 1

Sketchnotes from WordCamp Toronto 2012 Day 2: Case studies

Click on the images for larger version. Please feel free to share these! You can credit it as © 2012 Sacha ChuaCreative Commons Attribution 2.5 Canada.

Building Your Business on WordPress, Richard Martin

20120930 Wordcamp Toronto - Building Your Business on WordPress - Richard Martin

Malvern Red & Black Society, Shanta R. Nathwani

20120930 Wordcamp Toronto - Malvern Red and Black Society - Shanta Nathwani

WordPress of 1812, Digital Duncan

20120930 Wordcamp Toronto - WordPress of 1812 - Digital Duncan

Sketchnotes from WordCamp Toronto 2012 Day 1

Sign up for the mailing list at WordCamp Toronto 2012 to find out when the videos have been released, or keep an eye on wordpress.tv!