Periodicalby Array

Periodical Setup Diagram

This diagram will help you locate features and assist you in setting up Periodical.

periodical-diagram

Using the Customizer

You can change the theme’s options and add widgets to your sidebar through the Customizer, which is accessed via My Sites → Customize.

Available Theme Options

  • Post Layout: Choose between three layouts for your posts on the blog and archives. The options are one column with sidebar, two columns with sidebar, or three columns with no sidebar.
  • Grid View Excerpt Length: If you choose the two- or three-column post layout, you’ll have the option to set the post excerpt length on posts shown in the grid view. If you choose the one-column post layout, you can control the length of your posts using the More tag.
  • Fixed Navigation Bar: Add a fixed navigation bar that appears when you start to scroll back to the top of your page. This is a helpful feature to provide your users quick access to the top of your page.
  • Featured Post Image Opacity: Use this slider to change the opacity of images that appear in the featured post header and single post header.
  • Featured Image Height: Use this slider to change the height of the featured image area on single posts.

periodical-featured-content

Using the Featured Content header, you can highlight four of your best posts in a slider. Featured Content works by tagging the posts you’d like to highlight with a shared tag.

To get started with Featured Content, visit My Sites → Customize → Featured Content.

  • Tag Name: Select the tag you’d like to feature in the header. Start typing to search for your tag or to create a new tag. Once you’ve selected a tag with associated posts, the Featured Content header will appear on your homepage.
  • Hide tag from displaying in post meta and tag clouds: This option can be checked to ensure that the tag selected for Featured Content doesn’t show up in that post’s list of tags or the Tag Cloud widget. Your tag’s archive will continue to be displayed in normal fashion.
  • Display tag content in all listings: This option can be checked to ensure that the Featured Content tag will display in all pages and archives.

Add a subtitle to the Featured Content header

periodical-excerpt

By default, the Featured Content Header will add your post title, categories, author and date to the header. You can also add a subtitle below the post title to introduce the post. You can do this by adding text to the Excerpt box on your post.


Periodical includes four menu locations: Primary, Social, Featured Category, and Footer. See the Periodical setup diagram above to see these menu locations in action.

  • Primary Menu: This is your main menu, which appears in the dark bar at the top left side of your page.
  • Featured Category Menu: This menu appears to the right of the site title or logo and allows users to explore more of your content. Clicking category links in this menu will drop down a drawer with up to six posts per category.
  • Social Icon Menu: This menu appears in the colorized bar above the header. Adding social links here will convert the links to icons. See the Social Icon Menu section below for more info.
  • Footer Menu: This menu appears in your footer, below the widget area (if you decide to add widgets). You can add a single-level menu here.

Featured Category Menu

periodical-drawer

The Featured Category Menu allows users to explore more of your content directly from your site’s header. Clicking links in the Featured Category Menu will drop down a drawer of posts, where users can browse up to six posts per category.

periodical-category-menu

By default, if no Featured Category Menu is assigned, Periodical will display your top five categories with the most posts. You can override this with your own menu by going to Appearance → Customize → Menus and creating a new menu. Using the Categories link panel (see screenshot above), you can add whatever categories you’d like to the menu. When you’re finished adding category links, assign this menu to the Featured Category Menu location and save the menu. You should now see your custom menu in place of the default menu.

If you’d rather not have a menu in this location, you can create a blank menu with no links added and assign it to the Featured Category Menu location.


Social Icon Menu

Create a social icon menu in your header to let visitors know where to find you. Visit the Social Links Menu page to learn how to create this menu. Icons are supported for the following sites: Twitter, Facebook, Google, Instagram, YouTube, Vimeo, Dribbble, Github, Flickr, Codepen, Behance, Dropbox, Pinterest, Reddit, Soundcloud, Spotify, WordPress, LinkedIn, Stack Overflow, RSS and email.


Widget Areas

There are four widget areas in Periodical. Use the Sidebar widget area to add widgets to the sidebar of your posts and pages. Use the Footer Left, Footer Center, and Footer Right widget areas to add widgets to your footer.


Post Layout

periodical-layouts

Periodical comes with three different layout styles. You can choose from one column with a sidebar, two columns with a sidebar, or three columns without a sidebar. The three-column layout is for users who would rather use the screen space for more content.

You can select which layout you’d like to use by visiting My Sites → Customize → Theme Options.


Post Styles

periodical-styles

Periodical comes with elegant drop caps, text highlight, and pull quote styles for more expressive typography. Each require the use of the HTML Editor, but fear not, they are simple to add!

Drop Cap

periodical-drop-cap
A drop cap is a large capital letter at the beginning of a text block that has the depth of two or more lines of regular text. See Periodical‘s Style Guide to see drop caps in action. To create a drop cap you need to switch over to the text view of your post editor and wrap the first letter of your paragraph in a span with the class dropcap. See an example below.

<span class="dropcap">T</span>his is how you drop cap.

Text Highlight

periodical-highlight
Text highlight simply adds a yellow background to your text, useful for in-paragraph emphasis. See Periodical‘s Style Guide to see highlighted text in action. To highlight text, you need to switch over to the text view of your post editor and wrap your text in a span with the class highlight. See an example below:

<span class="highlight">This text will be highlighted.</span>

Pull Quotes

periodical-pull
Pull quotes are similar to blockquotes, but are reserved for less text. Pull quotes can also be positioned to the left or right side of your post’s content. See Periodical‘s Style Guide to see pull quotes in action. To use a pull quote, you need to switch over to the text view of your post editor and wrap your text in a span with the class pull-left or pull-right. See an example below:

<span class="pull-left">This text will be pulled left.</span>
<span class="pull-right">This text will be pulled right.</span>