- Getting Started
- Install Jetpack
- Using the Customizer
- Featured Content Carousel
- Header Category Menu
- Footer Category Menu
- Social Icon Menu
- Creating Galleries
- Contact Page
- Post Styles
Once you’ve activated Baseline, 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 seamless theme updates which lets you update your theme in seconds. With theme updates enabled, you’ll get a notification on your Themes page whenever there is an update available. You can 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. Baseline uses Jetpack to add some extra features to your site.
- 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 Baseline 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. 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. Baseline’s main blog supports Infinite Scroll. Learn more about Infinite Scroll.
- Tiled Galleries – Add a tiled or square mosaic gallery to your projects with the Tiled Galleries feature. Learn more about Galleries.
- Sharing – Add sharing buttons to your blog posts to give your readers the ability to easily share your content with Twitter, Facebook, and a host of other services. Learn more about Sharing.
- Related Posts – Show your visitors related posts they might be interested. Learn more about Related Posts.
- Subscriptions – Let visitors sign up to receive notifications of your latest posts and comments. Learn more about Related Posts.
Using the Theme Customizer
Baseline is customizable via the WordPress customizer. Here, you can change the various theme options and customize the colors of your site. To access the theme customizer, click Appearance → Customize in the WordPress admin menu.
Baseline’s settings are separated into various panels in the Customizer. Below is a rundown of the Baseline’s options and where to find them.
- Font Style: Choose between a modern sans-serif font (Work Sans) or a newspaper-style serif font (Abril Fatface).
- Index Post Style: Add intro text above the posts on your homepage.
- Grid Layout: Customize the number of columns to display on your index, search and archive post layout. You can choose from a one, two, or three column layout.
- Grid View Excerpt Length: If you choose a two or three column layout, you’ll have the option to change the excerpt length on grid posts.
- Auto Generate Excerpt: If you choose a one column layout, you’ll have the option to display the full post content on index pages or generate an excerpt with a Read More link instead.
- Sidebar Menu Button Text: Change the text of the Menu button in the fixed navigation bar, which opens and closes the sidebar with your widgets in it.
- Header Category Menu: Add a Browse button to the fixed navigation bar, which allows users to quickly explore the latest categorized content via snappy AJAX post loading.
- Header Category Button Label: Change the text of the Browse button mentioned above.
- Footer Tagline: Change the copyright text in the footer of your site.
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 Text Color: Change the color of the site title and description in your header.
- Header Background Color: Change the background color of the header of your site.
- Button Color: Change the color of the buttons found throughout on your site.
- Header Image Opacity: Change the opacity of the header images in your header. You can create a subtle color + image effect with this setting, as seen in the Baseline demo.
- Header Height: Change the height of your header.
Baseline uses Jetpack’s Featured Content to highlight 10 of your featured posts in a beautiful carousel. Featured Content works by tagging the posts you’d like to highlight with a shared tag. Jetpack must be enabled before the Featured Content panel is available in the Customizer.
- Tag Name: Select the tag of the posts 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.
- Featured Content Height Use this slider to change the height of your featured content area. Your featured image will be scaled proportionally to fit any size you choose. To see this height adjustment in real time, be sure you have a few posts tagged with the Featured Content tag and make sure you are viewing your homepage in the Customizer, since that’s where the Featured Content area is shown. See an example →
The recommended image width for the Featured Content carousel is 1200-1500px. Because the height of the featured content area is percentage based, your image will be scaled proportionally to fit the container. See the Finding Good Photos section of this help file to download beautiful, high-res photos for free for your posts and pages to make sure this area looks awesome.
Creating the Header Category Menu
With the Header Category Menu enabled (Appearance → Customize → Theme Options), you can turn a category menu into an awesome AJAX post-loading drop-down menu. By default, Baseline uses your most popular categories to create a menu for users to browse, but you can also override this with your own category menu.
- First, let’s enable the Header Category Menu. Go to Appearance → Customize → Theme Options > Header Category 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 Header Category 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.
- Once your menu is complete, save the menu and check out the drop menu on the front end.
Please note that the category menu is meant for categories. Adding page links or custom URL’s to the menu will work, but the category menu area may not display or function as seen in the demo.
Creating the Footer Category Menu
Baseline also includes a Footer Category Menu, allowing you to create another area for users to explore your content. To enable the Footer Category Menu, follow the steps above and simply create a new category menu in Appearance → Menus, and assign it as the Footer Category Menu. Once a menu is assigned to this area, the Footer Category Menu section will be shown on your site.
Social Icon Menu
Create a social icon menu to the fixed navigation bar 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. Baseline 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 in the Theme Locations section
- Save the menu when finished.
Baseline 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 Baseline 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, as seen on the demo.
Finding Good Photos
Finding good photos for your site can be tough and expensive, but we’ve got a few sites that offer really nice photography for free. Feel free to browse these sites and find some photos that highlight your content.
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.
The widget section of Baseline is found by clicking the Menu button on the fixed navigation bar. Add widgets to the sidebar by going to Appearance → Widgets and adding widgets to the Sidebar panel.
Baseline comes with a few custom element styles, which are used to easily add extra styling to your WordPress posts.
Pull quotes are similar to block quotes, but are reserved for less text. See Baseline’s Style Guide to see the suggested usage. To use pull quotes you can add a class of pull-left or pull-right to your content. See an example below.
<span class="pull-right">This text will be pulled right.</span>
Text highlight simply adds a yellow background to your text, useful for in-paragraph emphasis. To use the highlight style, you can add a class of highlight to your content. See an example below.
<span class="highlight">This text will be highlighted.</span>