Appearance, Upgrades

Custom Design »Custom CSS

You can add custom CSS to your WordPress.com blog using the CSS Editor in the Appearance → Customize → CSS panel in your blog dashboard. Anyone can save and preview custom CSS on a WordPress.com blog even if they have not yet purchased the upgrade. In order to make those changes viewable on the blog’s front-end for everyone, however, you must purchase the Custom Design upgrade which costs $30.00 per blog, per year.

CSS stands for Cascading Style Sheets. It is a markup language that controls the appearance of HTML elements on a web page. There is almost endless potential to what you can do with CSS to modify the design of a website, as evidenced by the very popular CSS Zen Garden project which is a showcase of what can be done with only CSS to change the appearance of one single HTML file. You can see a few examples of WordPress.com sites using the Custom Design upgrade in a the WordPress.com blog post: Infinite Theme Styles with Custom CSS. Many of the sites in the WordPress.com theme customization showcase also use custom CSS.

Making the best of this feature requires some knowledge of how CSS and HTML work, or at least a willingness to learn. See the CSS Help section further down this page for more information.

Or if you’re looking to get one of the many WordPress.com themes customized and you’re not interested in learning CSS yourself, we recommend hiring a designer to make the changes you need.

Frequently Asked Questions

Does the Custom Design upgrade let me edit HTML?
No. The Custom Design upgrade allows you to add or replace CSS for WordPress.com themes; it does not give you access to change HTML markup or PHP code. You can turn any WordPress.com theme into a blank canvas by turning off the theme’s CSS in your custom CSS settings.

Does the Custom Design upgrade let me upload themes?
No. Uploading custom themes is not supported on WordPress.com. Read more about this here.

May I remove credit links such as ‘Blog at WordPress.com’, theme, font, or toolbar links?
All WordPress.com users are required to maintain the credit links, even our VIP bloggers. Please do not hide or alter text or links for the footer credits or the toolbar. Modifying the style of the footer text (i.e. colors and font size) is fine as long as it’s still readable.

Can I use Custom CSS with the Custom Design upgrade to make minor visual changes to an existing theme?
Yes. This is the most popular option and the simplest to implement. If you just add small snippets of CSS for changes you’d like to make to an existing theme, those will be applied after the theme’s CSS is loaded and therefore override the theme CSS without requiring you to manage an entire separate set of CSS. This makes it possible to make minor changes quickly and easily with just a few lines of code in the CSS editor.

Can I use Custom CSS with the Custom Design upgrade to make major changes to my blog’s layout?
Major changes are certainly possible with custom CSS, but how easy they are to make will depend on the theme and your CSS skill. Instead of adding your styles to the theme’s existing CSS, you can override it completely and start from scratch, essentially turning any WordPress.com theme into a blank canvas. Some themes are more flexible than others, and the best way to find out what is possible is to start experimenting.

Can I use CSS rules like @import and @font-face?
WordPress.com currently does not allow loading outside files via CSS.

I’m not sure if the Custom Design upgrade is for me. Can I try before I buy?
Yes! If you haven’t purchased the upgrade yet, go to Appearance → Customize, click the Custom Design menu link, and then click the Try Now button. The CSS panel has an editor where you can paste CSS code and preview the changes in the live preview area on the left. The CSS changes you try before purchasing the upgrade will only be visible to you, so you can test and edit to your heart’s content.

I purchased the Custom Design upgrade and changed my mind. Can I get a refund?
Yes. Please check our refund policy on upgrades.

Are my custom CSS styles used instead of my theme’s standard styles, or in addition to them?
It’s up to you—there are options for both! You can choose to add CSS incrementally to override the theme’s existing CSS (this is the most popular option) or you can start fresh without loading the theme’s original CSS at all. If you add to a theme’s exiting CSS, the theme’s standard stylesheet will load first, then your custom CSS rules will be applied afterwards. Choose this option if you just want to make some minor adjustments to a theme, such as changing the appearance of text or background color. If you start from scratch, the theme’s standard stylesheet won’t be loaded at all. Choose this option if you want to start from scratch and design everything yourself.

Can I apply my CSS to the mobile theme, Minileven?
Yes. You can opt to apply your Custom CSS to Minileven, our default theme for mobile browsers. To enable this option, go to Appearance → Themes → CSS and look for the settings below the CSS Editor.  Check the box next to  “Include this CSS in the Mobile Theme.” Your styles will now apply to Minileven. The Minileven theme has a body class of “mobile-theme”, which you can use to write styles that target Minileven specifically. Here’s a simple example that uses the “mobile-theme” body class to give Minileven a red background:

body.mobile-theme {
background-color: #ff0000;
}

Can I upload images for use with my CSS?
Yes. You can upload an image to your Media Library, then refer to it by its direct URL from within your CSS stylesheet. Here’s a simple example of how to use a background image in your stylesheet:

div#content {
background-image: url('http://example.files.wordpress.com/1999/09/example.jpg');
}

I messed up. How can I reset my theme’s styles?

Go to Appearance → Customize → CSS, remove all CSS code from the editor, and click Save.

What happens if I unsubscribe from my Custom Custom Design upgrade?
All upgrades on WordPress.com are renewed yearly. Should you choose to cancel your subscription, your custom CSS will still be saved but it will no longer be applied to your site for others to see. If you would like them re-applied to your site you can purchase Custom Design again and the styles will be re-applied automatically provided you haven’t changed themes. If you have changed themes, you will find your past CSS in the CSS revisions link located above the editor in the CSS panel.

CSS Help

Need CSS help? We’re lucky to have a really supportive CSS community and our support team also keeps an eye on the CSS Customization forum.

To learn how CSS works on WordPress.com, see Editing CSS. If you are new to CSS, try checking out a CSS tutorial such as HTML Dog’s CSS Beginner Tutorial first.

If you’re just getting started, there will be a learning curve, but CSS is a very valuable and reusable skill. There are a TON of great resources on the web to get you started with learning more about HTML and CSS.

Here are a few tips we live by:

Suggested CSS Tutorials

Suggested CSS Books

Still confused?

Contact support.

Not quite what you're looking for?

Get Help