- Getting Started
- Install Jetpack
- Install Demo Data
- Preparing Your Images
- Using the Customizer
- Menu Locations
- Social Icon Menu
- Creating the Category Mega Menu
- Creating the Featured Post Header
- Creating Galleries
- Contact Page
- Post Layout
- Post Styles
Once you’ve activated Paperback, you’ll be forwarded to the Getting Started page (Appearance → Getting Started). Here, you can view the help file, browse frequently asked questions, and activate your theme’s license to enable Typekit fonts and theme updates.
We strongly recommend that you add your theme’s license key in the Getting Started page. By adding your key, you activate the beautiful Typekit fonts we’ve added for you as well as seamless theme updates. With theme updates enabled, you’ll get a notification in your dashboard whenever there is an update available. You can then update right in your WordPress dashboard, keeping your site healthy and secure.
You can find your theme’s license key by signing in to your Array dashboard and visiting the Downloads page. Click the Manage License link on your theme to view the license key. Copy this key and enter it into the sidebar of your Getting Started page and click the Activate License button. Your license key should now be active!
Jetpack is a free WordPress plugin that provides various features and enhancements to your WordPress site. Although Jetpack is optional, you may need to activate these features if you want your site to look like the theme demo.
- Install Jetpack by going to Plugins → Add New and search for “Jetpack”. Install and activate the plugin.
- After activating Jetpack, you will be asked to connect to WordPress.com to enable the Jetpack features. Click the connect button and log in to a WordPress.com account to authorize the Jetpack connection.
- If you don’t yet have a WordPress.com account, you can quickly create one after clicking the connect button. This will allow you to use Jetpack for Paperback or any other theme in the future.
Once installed, activated, and connected to WordPress.com, you can visit the Jetpack settings page, which is now available at the top of your admin menu. You will need to activate the following Jetpack features by clicking Settings tab at the top of the page, and clicking the Activate link next to each feature. For the best performance, we recommend deactivating all Jetpack features by default and only activating the ones you want.
- Carousel – The Carousel adds a beautiful lightbox carousel to your gallery images. To enable, visit the Jetpack Media settings and enable the “Display images and galleries in a gorgeous, full-screen browsing experience” option.Learn more about the Carousel
- Infinite Scroll – Infinite Scroll is a feature that loads the next set of posts via a More Posts button, without reloading the page. Paperback’s main blog supports Infinite Scroll. To enable, visit the Jetpack Theme Enhancements settings and enable Infinite Scroll.Learn more about Infinite Scroll
- Tiled Galleries – Add a tiled or square mosaic gallery to your projects with the Tiled Galleries feature. To enable, visit the Jetpack Media settings and enable the “Speed up images and photos” option. Learn more about Galleries
Installing Demo Data
When you first activate Paperback, it will look like simple blog with your existing posts. This is expected since Paperback needs you to modify a few settings before it will look like the demo. Optionally, you may install our Paperback demo data, which will populate your site with the pages you see on our live demo. This can give you a head start in setting up your site. Once you get your site setup and get the hang of it, you may delete the unwanted posts or pages as you see fit.
Download the Paperback demo data here. You can install this XML file by going to Tools → Import → WordPress and click Choose File. Upload the xml file and follow the steps to import. When the demo data is finished importing, you should have several new posts and pages to work with going forward. Hooray!
Preparing Your Images
In order to get the best looking images in Paperback, we need to refresh your images to be cropped to Paperback’s image sizes. We can do this with the Regenerate Thumbnails plugin.
After activating the plugin, go to Tools → Regen. Thumbnails press the Regenerate All Thumbnails button will start generating new image sizes defined by the theme. Once it’s finished, your library of images will be optimized for Paperback!
Using the Theme Customizer
Paperback is customizable via the WordPress customizer. Here, you can change the theme’s options and add widgets to your sidebar. To access the theme customizer, click Appearance → Customize in the WordPress admin menu.
Theme Options → General Settings
- Post Layout: Choose between three layouts for your posts on the homepage and archive pages. The options are one column with sidebar, two column with sidebar or three columns with no sidebar. View the various layouts on the Paperback demo.
- 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.
- Category Mega Menu: Turn your main navigation into a post loading drop down menu. When enabled, any category link will drop down a drawer with posts in that category. See a quick demo
- Fixed Scroll Bar: Add a fixed scroll bar that appears when you start to scroll back up a page. This helpful bar provides links to the menu, search and the next post. See a quick demo
- Comment Section Style: Choose to hide your comments by default and show them with a toggle button. This is helpful if you’d like to hide comments which may be distracting to your content. See a quick demo
Featured Post Header
These settings will help you customize the Featured Post Header seen on the homepage of your site.
- Featured Post Category: Optionally create a carousel in the homepage header area by choosing a category.
- Featured Post Opacity: Use this slider to change the opacity of the images that appear in the featured post area as well as single post headers.
- Featured Image Height: Use this slider to change the height of the featured image area on single post pages. Click any post to change this setting and see the results in real time.
Paperback includes 6 dynamic color schemes that are very easy to tweak and customize. Using the Base Color Scheme drop down, you can choose whatever color suits you, or even stick with the default and customize individual elements. Use the handful of color pickers and their descriptions to tweak the colors on your site live. When you’ve got something you like, make sure to click the Save & Publish button.
We’ve also included a Custom CSS box for additional style tweaks. Use this setting to add minor CSS edits. If you plan on making several CSS edits, you should create a child theme to ensure your edits are safely stored when the theme is updated.
Site Title, Tagline & Logo
- Site Title & Tagline: By default your site will display a site title and tagline, which can be customized here. You also have the option to hide the site title and tagline if you’d rather use your own logo image.
- Logo: Upload your own logo to use in place of your site’s title and tagline.
- Header Height: Adjust the height of the header that contains your site identity and main navigation.
Paperback includes four menu locations: Primary, Secondary, Social and Footer.
- Primary Menu: This is your main menu which appears in the right hand side of your header.
- Secondary Menu: This menu appears on the left side of the colorized bar above the header.
- 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.
Social Icon Menu
Create a social icon menu in your header to let visitors know where to find you.
- To add a social icon menu, go to Appearance → Menus.
- On the left side of the Menu page, click the Links menu item to add to your social links.
- Add the URL for each of your social profiles and a label for the link. Paperback will detect which site you are linking to and display a matching graphic. 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.
- Now that you have the menu created, you need to assign it to the Social Icon Menu location in the Theme Locations section
- Save the menu when finished.
Creating the Category Mega Menu
With the Category Mega Menu, you can turn your primary menu into a post loading drop down menu. Once you’ve enabled the drop menu, you simply need to create a menu with category links.
- First, let’s enable the Category Mega Menu. Go to Appearance > Customize > General Settings > Category Mega Menu. Make sure the menu is enabled.
- Next, you need to create a menu to populate the drop down. Go to Appearance > Menu and create a new menu and assign it as the Primary menu.
- Now you can start adding menu items. Using the Category menu items box, add categories that you’d like to populate your menu. Posts from these categories will be shown when the user clicks the link. You can add top level items and even drop menu items to the mega menu.
- Once your menu is complete, save the menu and check out the drop menu on the front end.
Creating the Featured Post Header
Using the Featured Posts Header, you can highlight four of your best posts in a slider on the homepage. This header area works by showing posts from a certain category that you choose in the Customizer at Appearance > Customize > Theme Options > Featured Posts Header. Here, you can select a category to populate the header and modify the appearance of the header.
Here is a brief diagram that shows you where each element in the header comes from.
The categories, title and author info will populate automatically, but the post excerpt will need to be added manually. By adding text to your post’s Excerpt box, it will show up in the featured post header.
Paperback is best used when paired with great content and beautiful photography. This theme takes advantage of WordPress’s built in galleries as well as some extra galleries provided by the Jetpack plugin (see above for installation). Enable the extra Tiled Galleries and Carousel by going to Jetpack > Settings. Once you’ve done that, you’ll notice you have a few new gallery types available when creating a gallery.
The gallery most used throughout the Paperback demo is Tiled Mosaic. This gallery generates a unique layout based on your image order and orientation. The effect is a nice, neat dynamic grid. Arranging your images can change the layout, so feel free to move your images around to get the layout you want. You can also choose to randomize your images to generate a unique layout upon each viewing.
If you enabled the Carousel feature in Jetpack, the images in your gallery will open in a lightbox for larger viewing.
The Contact Page uses the WPForms Lite plugin, which can grab for free on the WordPress plugin repository. Once installed, you’ll see there is a WPForms link in the left hand sidebar of your WordPress admin.
- If you haven’t already, create a new page called Contact.
- Go to the WPForms menu on the left admin menu to configure your contact form. The form creation process is pretty simple, but you can check out the WPForms documentation here for help and tips.
- After you’ve configured and saved your contact form, you will be given a shortcode like this: [wpforms id="161894"]. Copy your shortcode. We’ll use this to add the form to our Contact page.
- Now head back to your Contact page. Paste the shortcode that you copied into the body of the post. Update the post. You should now see the form on the contact page.
There are two widget areas in Paperback. One in the sidebar of posts and pages and another in the footer area. You can mix and match widgets to either of these areas, styles are provided for both.
Ad Image Widget
Using the Simple Image Widget plugin, you can easily add an image with a customizable link and link text. Once activated, you’ll have a new Image widget available on your widget page. Drag this widget to the sidebar and continue to fill out the required content.
Paperback comes with three different layout styles. You can choose from one column with a sidebar, two column with a sidebar, or three columns without a sidebar. The three column layout is for users who would rather utilize the screen space for more content.
You can select which layout you’d like to use by visiting Appearance → Customize → Theme Options → General Settings.
Paperback comes with elegant drop caps, text highlight, and pull quote styles for more expressive typography. Each require the use of the Text tab in your post editor, but fear not, they are simple to add!
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 how we’ve used dropcaps on the Paperback demo.
To create a dropcap 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 dropcap.
Text highlight simply adds a yellow background to your text, useful for in-paragraph emphasis. 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 are similar to block quotes, but are reserved for less text. See Paperback’s Style Guide to see the suggested usage. 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>