Popbelly Documentation

on

Overview

Ready to get started? Read through the documentation below to learn how to harness the full potential of Popbelly and build a stunning website in no time! It will walk you through setting up your site to look like the demo, answer common questions, and provide tips for getting the most out of your theme.

If you have any questions we haven’t covered in this guide or are having trouble getting started, please send us an email through the priority support form.

Installation

If you’re not familiar with the process for installing WordPress themes, please follow the steps in the theme installation guide.

Getting Started

After installing and activating Popbelly, you can jump in and begin customizing your site by going to Appearance → Customize in your admin panel to open the customizer.

The customizer allows you to preview changes to your site before publishing. The left side of the screen contains a series of sections and controls to modify various site settings, while the right side displays a real-time preview of your site.

You’ll find options for adding a logo, changing colors, creating custom menus, front-page settings, and more.

Popbelly requires WordPress 4.7+

Your site’s title and tagline are displayed in the header area of Popbelly by default, but you can easily add to or replace the text with your own logo in the customizer:

  1. Go to Appearance → Customize
  2. Click the Site Identity section to expand it
  3. Upload a new image in the Logo field

You can also update the site title and tagline text, or hide them to display the logo by itself.

If you only want to hide the tagline and not the site title, drop this snippet in the Additional CSS section in the customizer:

.site-description {
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	white-space: nowrap;
	width: 1px;
}

Custom Menus provide control over the links that appear in the navigation areas on your site.

Popbelly supports two menu locations out of the box: the Header Menu and Social Links Menu. Additional menu locations are also available when using AudioTheme.

You can manage menus by going to Appearance → Customize → Menus.

Header Menu

The Header Menu can appear above or below the header area at the top of your site and supports one level of drop-down links. It may also be fixed to the top of the screen while scrolling.

On smaller screens, the menu is displayed when a visitor clicks the “Menu” button.

The Social Links Menu allows you to display links to your social media profiles as icons. It appears in the middle of the header above or below the site title and logo depending on where the Header Menu is located.

Learn how to add a social links menu.

Homepage

The homepage, or front page, is typically one of the first pages most visitors see when visiting your site. While it shows a list of your latest posts by default, Popbelly includes a few options that allow you to customize the layout and information displayed.

Read the instructions for setting up a static front page if you’d prefer to use a page for your homepage. You’ll also want to create a page for displaying your latest posts (or blog).

Front Page Sections

One unique feature available in Popbelly is the ability to highlight manually curated content on the homepage. Front page sections can consist of recent posts, pages, records, videos, and AudioTheme archives.

Adding Front Page Sections

  1. Go to Appearance → Customize
  2. Click the Theme Options panel to expand it
  3. Click the Front Page section to expand it
  4. Click the Add Posts button
  5. Select the items you want to feature from the fly-out panel
  6. Click the Add Posts button to close the fly-out panel
  7. Drag and drop items into your preferred order
  8. Click the Save & Publish button at the top of the customizer

Each featured item can be further customized by clicking the arrow to the right to expand it.

Widgets

Widgets allow you to add content or tools to sidebars, or other widget-enabled areas, on your site. They can be used for displaying lists of posts, static text, images, and email sign-up forms, among many other possibilities. Most widgets are configurable so you can customize how they display.

WordPress includes a number of widgets out of the box and additional widgets can be added using plugins. Learn more about managing widgets.

Popbelly includes one widget location:

Widgets added to the Footer widget area will display at the bottom all pages.

Appearance

Colors

The header background, header text, link colors, and more can be changed in the Customizer:

  1. Go to Appearance → Customize
  2. Click the Colors section to expand it
  3. Update the color settings

An additional setting for changing the opacity of the header background color is included and is useful for making sure the text in the header remains visible when using a header image or video.

Fonts

Popbelly has built-in support for a few handpicked Google fonts. To update your fonts:

  1. Go to Appearance → Customize
  2. Click the Fonts section to expand it
  3. Update the selected font in each dropdown

Typekit Fonts

If you have a Typekit account and would like to use the fonts included in one of your kits, you can follow the documentation for integrating custom fonts for Typekit.

Page Templates

Page templates allow you to change the layout or functionality of individual pages on your site. The page template can be set in the Page Attributes meta box when editing a page in your admin panel.

Default

The default page template displays content in a single column. When a featured image is added, it will appear as a banner behind the page title.

Full-width Page

The Full-width Page template is a page template that displays content the full width of the content area. Learn more about how to use the Full-width Page page.

Popbelly includes extra support for a few plugins.

AudioTheme Integration

AudioTheme makes it easy for bands and musicians to showcase music, keep fans updated with live performances, tour dates and venue information, and embed videos from over a dozen popular services.

Popbelly requires the AudioTheme plugin to function as shown in the theme demo. It can be downloaded from your account dashboard.

Gig, Discography, & Video Archives

Be sure to read the documentation for setting up your archives to add links to your discography, gig, and video pages.

Archive Menus

Popbelly includes menu locations for the Gig, Record, and Video archive pages. These menus can be used to add additional navigation for past gigs or display different record types (e.g. Albums, Singles).

Assigning a menu to these archive pages is the same as assigning a menu to other menu locations via Appearance → Customize → Menus.

Gigs

Documentation for managing gigs can be found in the AudioTheme plugin documentation.

Records

Documentation for managing records can be found in the AudioTheme plugin documentation.

Videos

Documentation for managing videos can be found in the AudioTheme plugin documentation.

Customizing Popbelly

Check out the knowledge base article on the recommended ways to customize your theme along with helpful plugins and links.

Child Theme

You can download a sample child theme by using the AudioTheme Agent plugin. In the sample, we’ve changed the site content background color from white to red as a way to demonstrate the changes are working.