If you want a highly customized theme for your WordPress site the only option is to self-host, right? Not so fast…
I just finished a small project for Bluefin Software redeveloping their blog. They wanted to stay with WordPress.com hosting because of its ability to scale and low maintenance. And incredibly, by using just the custom design upgrade and widget areas in the Coraline Theme, it was possible to build exactly what their designer had envisioned.
Bluefin Blog After Custom Design
Bluefin Blog Original
Benefits of Using WordPress.com
Using WordPress.com has a few benefits:
- It’s completely free to have a basic blog. The custom design option is only $30/yr, and custom domains are only $12. Together, it’s still about half as much as using a shared host like HostGator or BlueHost.
- It scales up incredibly well. WordPress.com serves up 2.5 billion pageviews a month. Your site will run fast, content is served off a global CDN, and you never have to worry about upgrading a plugin.
- It handles everything most users need. Contact forms, polls, stats, twitter widgets, code highlighters, and flickr widgets are all available.
Disadvantages of Using WordPress.com
If you use WordPress.com you won’t be able to add any plugins. You’re stuck with what they got. No bbPress or Gravity Forms for you, sorry.
You can’t alter the theme markup. Although it’s possible to do a lot with CSS, you won’t be able to do everything- especially in the javascript department. You’re also limited to the selection of themes on WordPress.com.
Tips for Custom Design on WordPress.com
If that doesn’t deter you, here’s some tips for working with the custom design option:
Pick the Right Theme
Before you get heavily involved in the design, try to pick out the theme you want to use and work within it’s limitations.
I originally chose Toolbox to build the site off of since it’s a blank canvas with good markup, but to make the custom footer work I needed widget areas at the bottom. That’s why I switched to Coraline, which has an incredibly flexible layout.
Use the Widget Areas
Widget areas are the one part (besides the actual post content) where you can control the markup. Just paste in the HTML you need (no scripts or iframes though).
Build the Site Locally
I built out the Bluefin design locally using MAMP. All the free themes on WordPress.com are available on WordPress extend or directly through SVN from Automattic.
Make a Child Theme
Once you have the theme you plan to customization, make a child theme, import the WordPress.com content (if you have it), and start styling. The other advantage of building a child theme is that it will be very easy to switch to self-hosted if you need to in the future.
Upload All Your Assets to WordPress.com
When you’re ready to move the design over, simply paste in the contents of your child theme’s CSS in the custom design editor. If you’re using any images, those should be uploaded into your media assets on WordPress.com and replaced in the stylesheet so they can be served from WordPress.com’s CDN.
In Conclusion
WordPress.com won’t be for everyone- but it’s definitely a great option for some. It’s low (or free) price and quality support make it a great option for folks who aren’t ready to make the plunge on self-hosted, and also for companies and organizations that just need a basic website and fairly unique look.
Also, as a developer it’s quite nice. On a .org site you can do anything with enough time and work, but on .com the scope is inherently limited. In this case, to 400 lines of CSS.
Hi Devin,
Exactly the reasons why we chose to stick with WordPress.com. I was postponing re-designing the blog for months due to fear of self-hosting :) When I found out that there is a custom design upgrade on WP.com I though that could be a good thing to try. And I have to say that the results matched my expectations. We love the new look and I’m especially happy about the no maintenance!
Thanks so much for your help with this project.
Alex
You can also purchase a premium theme to start with, there are a few themes from StudioPress Genesis framework
http://theme.wordpress.com/themes/sort/premium/
and you can also add a custom font option if you want even more customization. That uses fonts from Fontdeck.
The Custom CSS plugin might also be worth checking out for local development as a replacement for the child theming step.
Ah, neat plugin. Hadn’t seen that before.
I’m an italian web designer and I’m starting using worpress.com. Thank for your post, it is very usefull to understand what can I do with worpress platform. Great job.
Best regards
Thanks a lot . I didn’t know themes can also be changed using custom design. That was indeed useful