By the end of this section, you’ll know how to:
- Add personal touches to your blog, like as a custom header or background.
- Add and configure widgets (and what widgets are).
- Access more options to personalize your blog, such as unique fonts and colors.
Picking a theme you love is a great first step; customizing it is a great second step. You have lots of options for injecting more “you” into your site, from quick tweaks you can make in your dashboard to uploading custom photos and graphics to adding an upgrade with custom colors, fonts, and more. You decide how much (or little) you want to do, and we’ll help you do it.
Custom background and header, anyone?
Lots of themes give you the option of uploading a custom header, custom background, or both. Headers can be anything from a favorite photo to a slick, graphically designed banner; backgrounds can also be either of those things, or just a color that you love.
Headers first. Not sure what we mean by “header”? Check out this example — on the left is the standard homepage for the Oxygen theme, and on the right is a magazine site that’s added its own header:
Suddenly, a very similar layout becomes something distinct with the addition of a custom header, even if it’s just text.
Hopefully, you looked at whether the theme you chose allows custom headers; if not, there are two quick ways to find out whether it does: check out this list, or head to the “Appearance” tab in your dashboard. If your theme allows custom headers, you’ll have “Headers” as an option in that tab. (If your theme doesn’t allow it but this is something you want to try, it’s pretty simple to switch themes.)
Setting up your custom header couldn’t be easier — deciding what image you want to use is the hard part. As with all things WordPress.com, nothing is set in stone, so it’s okay if you don’t find The Perfect Image on day one. Pick something you like and that represents you and what you want your blog to be, and go with that. As you keep blogging, you may land on something else, or decide to design something (or have something designed) to reflect your personal brand. We’ve also got some advice on picking visuals for your blog that might help.
Your theme probably specifies what size the header image should be; if it doesn’t, then your theme has flexible headers, which means you can use an image that’s wider or taller than your theme’s standard header. If your image isn’t the right size and you don’t know how to crop it, no worries — we’ll help you out with that. If it’s smaller than the specified size, you’re going to want to blow it up (or pick something bigger).
Got your image? Great, it’s time to upload it. Hop over to Appearance >> Headers. You’ll be able to browse your computer to find the file, then click “Upload”:
If your image isn’t the right size or dimension, you’ll get to crop it by dragging the dotted box around until the section of the image you want to use is highlighted:
When you’re happy with it, click Crop and Publish. If your theme has a flexible header, click Skip cropping, publish as is to bypass this step.
Wait a few seconds until you get a “Header updated” message, then take a look at your customized homepage. Looks good, right? Congratulations, you’re a brand! We can’t wait to say we knew you back when.
If you’re not satisfied with your header, you can always re-crop what you have or upload a new image. To try something new, delete your current header by navigating to Media >> Library in your dashboard, finding the image, and clicking delete permanently.
A custom background can seriously change the look of a blog, letting you take a plain white page and turn it into anything you want (or simply choosing another color). That being said, we do caution you not to get too busy with your background; your cat is adorable and a page of tiled cat photos is exponentially more adorable, but it can really detract from your content. Give whatever background you want a try, but look at it critically to see if it’s going to make your blog tough going for readers.
As with custom headers, your dashboard will tell you if custom backgrounds are an option for you. Head to the “Appearance” tab, and if you see “Backgrounds” as an option, you’re good to go. Click it to go to the custom background administration page:
The administration panel has three parts: a preview of what your background looks like (right now, it should be white), a place to upload a background image, and a place to specify a solid color to use as a background.
If you have an image to upload, click Browse to find the file on your computer and Upload to get it into your media library. If you want to use something you’ve already uploaded, you can also browse your media library to find it. Click Choose image then select your image from the media library and click Set as background:
Once you pick or upload an image, you’ll have the chance to play with the display options a bit — kinda like setting a desktop image on your computer.
You can tile the image, align it left or right, and decide whether the background is fixed in place or moves with you as you scroll up and down. (Visit our support docs for full explanations of what all the display options mean.) As you make changes the preview will change along with them, so you can see what you’re about to do before you make it public.
If you want to change the background color rather than using an image, you can do that here, too. If you know the hexadecimal code for the color you want to use, just plop it in the box. (Then again, if you know the hexadecimal code for the color you want to use, you probably don’t need to read this.) If you’re like the 99.99% of us who do not use hex codes in daily life, you can click “select a color” to pull up a color spectrum and make your choice that way:
Drag the circle around until you land on a color you like, and hit Save changes. Check out the preview, and make adjustments if you want to go lighter, darker, or try something else entirely.
If you decide to go free, natural, and background-less, it’s easy to get rid of them. Go back to Appearances >> Backgrounds, and you’ll find options to Delete image and Clear color. (Note: when you delete an image this way, it disappears from your library, too — if you’re using it somewhere else on your site, you’ll need to re-upload it.)
You’re on your way to making your theme your own. Next is one of our favorite parts: adding bells and whistles or, as we call ‘em, “widgets.”
Action time! Time for a custom background. Try two options, a photo and a solid color, and see what you prefer. For your photo, upload something that won’t detract from your content; landscapes are nice for this, as are still lifes or abstract photos. For the color, try both a bright shade and something muted. See what you’re drawn to (it might be none of the above, which is also fine) and live with it for a few days.
Let’s configure some widgets
“Widget” is a fancy word for “doodad,” which is itself a fancy word for “small tools that you can add to your blog that add a variety of functions and content.”
If that’s less than 100% clear, it’s because widgets do so many different things, from letting readers browse your archives to showing off your Flickr stream to counting down until your wedding day. Check out the full list of available widgets to see what we’ve got. Every theme can use every widget.
If your theme has more than one column, the additional columns are called sidebars — that’s where the widgets go. Your mission, should you choose to accept it, is to fill your sidebar with helpful widgets that give readers more information and help them navigate your blog. (Depending on your theme, widgets can also go in the footer, the area at the bottom of your blog.)
Need an illustration of an A+ widgeteer? Take a look at science fiction author John Scalzi’s site “Whatever“:
See how it has a text description, a calendar, an archive dropdown? Each of those is a widget, sitting patiently in the sidebar until the blog reader starts looking around for more, then leaping into action.
Widgets serve all kinds of purposes, but some broad classes include:
Widgets that help readers navigate your site: These include the Archives widget (helping people find your older posts), the Tag Cloud and Categories widgets (helping people browse your posts by subject matter), the Pages widget (making it easy for people to get to your blog’s other pages), the Search widget, and the Top Rated and Top Posts & Pages widgets (highlighting readers’ favorites).
Widgets that share the bloggy love: Connecting with other bloggers is at the heart of the blogosphere. Use the Links and Blogs I Follow widgets to share your favorite daily reads and send them some traffic, or the Posts I Like widget to point to particular reads that stuck with you. The My Community widget highlights your followers and commenters.
Widgets that pull in content from other places: Show off your Flickr and Twitter streams, bring in content from your BandPage account, share your GoodReads list or Delicious links, or bring in the RSS feeds of other sites you love.
There are more widgets than those explicitly listed here, so be sure to browse the full list to see what you can do with widgets.
To start activating widgets on your blog, go to Appearance >> Widgets in your dashboard (if you’re on your blog’s homepage, you can also hover over your blog title in the black admin bar, and select “Widgets” in the drop-down menu). On the left side, you’ll see all your available widgets and on the right, your available sidebars and/or footers:
To add a widget to a sidebar, just drag it over from the left and drop it into the widget area you’d like it to appear on the right. You can have multiple widgets per sidebar or footer, and use drag-and-drop to re-order them. Whenever you add a widget, make sure you click Save and then Close to cement it in place. It’ll update on your blog immediately.
Lots of widgets have configuration options you can use, so be sure to take a look at what’s available before hitting save. Some have options like “number of items to display,” while others will need links or other information from you (e.g., to access your Flickr stream).
Many widgets allow you to edit their titles. For example, if you’re using “Recent Posts,” “Archives,” or “Blogs I Follow,” you can spice them up with titles that reflect the personality of your blog. Write a television blog? Try “Last Week’s Episodes,” “Previous Seasons,” and “Critics’ Recommendations.” A homeschooling site? How about “Current Assignments,” “Last Month’s Homework,” and “Reading List”? Be punny. Be funny. Be yourself.
Each widget saves individually, so once you add one and save it, it’s done. Take a look at your site to see how everything looks, and add, delete, or update accordingly; you can tweak widgets at any time. To get rid of a widget, just drag it from the sidebar back to the general widget pool; ff you decide to nix a widget but think you might want it again in the future, drag it to the “Inactive Widgets” box just below to remove it but save its settings:
Take some time to experiment with widgets — it’s easy to add and subtract them, and since your blog updates immediately each time you save a change, you never have to be stuck with something you don’t like.
Action time! Add three widgets to your site:
- A text widget with some “about this blog” text. Bonus points if you manage to work in a link.
- An image that helps people navigate, like the Pages or Tag Cloud widgets.
- Blogger’s Choice — pick any widget you want.
For each widget, be sure to customize them as you see fit.
Custom fonts and colors
If all this customization just isn’t scratching your blogular itch, you can add the Custom Design upgrade to your blog at any time for $30 a year and get access to custom fonts and custom colors (and, if you’re feeling confident, custom CSS). To activate the upgrade, visit the Store tab in your dashboard, select Store from the menu, and click Buy Now under Custom Design. Ah, relief!
(You can also follow these same instructions to preview what your customizations would look like before you actually buy. We don’t do the hard sell.)
Once that’s done, a “Custom Design” option will show up under the Appearance tab, and you’re ready to customize.
Custom Fonts actually has two modes, Standard and Advanced. In Standard mode, you just pick your font from our list of pre-loaded options and click to activate; Advanced allows you to upload your own fonts, but requires knowledge of CSS. If you’re interested, you can review detailed directions for Advanced mode — we’re sticking to Standard here.
To pick your fancy new fonts, go to Appearances >> Custom Design to get to the Custom Design editor, then click on the Fonts tab:
You can choose three fonts: one for your title, one for headings (think post and page titles, widget titles, and headlines inside posts and pages), and one for regular text.
The screen will also show a preview of your blog, so you can see how your chosen fonts will look before you activate them.
To pick a font, click the down arrow next to one of the font names (in the image above, Calluna) to see all the available fonts. Once you’ve chosen one, tweak it by playing with the Style and Size options:
“Style” gives you options like bolder and italicized fonts, while size lets you bump the size up or down. Note that not every font has styles; if you don’t see any style options it means that font doesn’t have any, not that Custom Design is busted.
Once you’re happy with the way everything looks, hit Save to lock in your choices. It may take a few minutes for the changes to be seen on your blog, although typically it’s faster. You can come back at any time to play with your fonts some more as long as your have an active upgrade.
You can have a lot of fun with custom fonts. We encourage you to experiment, but offer a few guidelines:
- Size matters — make sure all your fonts are readable on-screen.
- Fonts have feeling and emotion. Some are strong and bold, others are delicate, elegant, or whimsical. Think about matching the feelings of your fonts to your blog’s personality.
- Readability is always key, so save the more embellished options for your title and headers, and pick something cleaner for regular body text.
We also interviewed some WordPressers who’ve done an exceptional job using fonts to personalize their blogs; you can benefit from their wisdom.
You can do a good deal of customizing with headers and backgrounds, and custom colors adds another level of personalization by letting you change the overall color scheme of your blog. You can choose a color palette, swap colors by dragging and dropping, view color palette suggestions, and apply background patterns. Score!
(A word of warning: there are a few themes that don’t currently support Custom Colors. If yours is in that camp, you’ll see a note on the Custom Design page letting you know. Sorry — we’re working on it!)
Get to Custom Colors the same way you get to Custom Fonts, by heading to Appearance >> Custom Design. Click on the “Colors” tab to pull up the color picker. You’ll see individual color options, suggested palettes, and available background patterns. If you’ve already created a custom background, we’ll remind you.
The color picker is not unlike having the Crayola 64-pack: pick whatever you’d like. Mix and match. Use one of our suggested palettes. Use one of our palettes, but drag and drop the individual colors to assign them to different features. Ignore our suggested palettes and pick whatever colors you want. Everything’s clickable and customizable.
If you’re not sure where to start, pick a new palette. The individual circles will change to reflect the colors in that palette, and you can hover over them to see what they’re assigned to — your background, post titles, link and visited links colors, and more. Drag and drop some of those colors to see how that changes the look. Click on a color to pull up different color options; we’ll suggest some we think will work well, or you can explore entirely new hues.
We do build in one little safety net: if you try to pick a text color that’s too close to your background color, we’ll increase the contrast to make sure things stay readable. Other than that, the color picker is your oyster.
Now you’ve set up your online home just so. It’s time to move on to the main event, the reason you came here in the first place: publishing. Next up, learn all about creating posts and pages, working with images and other media, and creating menus to help readers get around your site. Head to Get Published