How to Customize Period with CSS

CSS can be used to customize the style of any element in Period. The easiest way to add your own CSS is with the Additional CSS section in the Customizer.

To add your own CSS with the Additional CSS section:

  1. Visit the Customizer (Appearance → Customize)
  2. Click on the Additional CSS section
  3. Paste in or write the CSS you want to add
  4. Once you've added your code, click the Save & Publish button

Your site will update with your CSS edits as you type, so you can easily preview them before saving any changes.

Note: want a head start with your CSS? Check out the Period CSS Snippets Collection. It's full of pre-written code snippets you can copy and paste to customize your site with.

Common Questions

I added my CSS, but nothing is happening?

First, check for any syntax errors in your code. Is there a period missing before a class name, or a misspelled selector?

If not, your CSS is likely not "specific" enough. Try adding an !important tag like this:

.site-title {
  font-size: 24px !important;
}

Should I be using a child theme?

You could use a child theme to add your CSS. However, using the Additional CSS section is much easier and works similarly.

If you want to edit template files, reorder elements on the page, or modify any functionality in Period, you will need to use a child theme.

To learn how to customize Period with a child theme, please refer to the child theme tutorial.

Additional Resources

  • Period WordPress Theme

    Download a copy of the latest version of Period.

  • Support forum

    Ask questions and find existing solutions in the support forum.

  • Changelog

    Review recent and past updates to Period.

  • Period on Github

    Review Period's commit history and project files on Github.

  • WordPress Resources

    Check our recommended resources to find great plugins and solutions for your site.

  • Codeable.io

    We can help you with minor changes on your site, but if you need a highly customized version of Period, we recommend finding help through Codeable.

  • WordPress Tutorials

    We've published nearly 100 tutorials for using WordPress. Head over to the blog and search for any WP-related topic you need help with.

  • Create Your Site

    If you've never made a WordPress site before, follow along with our step-by-step guide for creating, customizing, and launching your first website.