Ampersand Install Video
Once you’ve activated your theme, you’ll see a friendly notice across the top of the page, with a link to the Getting Started page (Appearance → Getting Started). Here, you can view the help file, enter your license for theme updates, view the latest changes to the theme and visit us on our support forum.
Activate Your Theme License
Each theme comes with a 1 year license for support and updates. By activating your theme license, you can get theme updates right from your WordPress dashboard. These updates will keep your theme in tip-top shape, with the latest bug fixes and new features.
- Locate your theme’s license key in your Array Dashboard in your Downloads section In the pop-up window, copy your license key.
- Now, in your WordPress dashboard (where your theme is installed), go to Appearance → Getting Started and click the License tab.
- Paste your license key into the field and click Save License Key.
- Once your license key is saved, click Activate License.
- If your key is valid, you will see a success message. You will now receive a notice on Appearance → Themes whenever there is a new version of the theme available.
- To update your theme, click update now and follow the instructions. Note: Your theme will be overwritten with the latest files, which will overwrite any changes you’ve made to the theme files. Your posts, pages and settings will not be modified in this update.
Jetpack is a WordPress plugin by Automattic, the folks who make WordPress. It’s a toolkit that provides various features and enhancements to your WordPress site. Ampersand utilizes several features (gallery carousel, contact form, widgets, etc.) of Jetpack, and must be installed for the theme to work as you see in the demo.
Install Jetpack by going to Plugins → Add New and search for “Jetpack”. Install and activate the plugin. Once installed, you can enable Jetpack features in the new Jetpack menu.
- After activating Jetpack by WordPress.com, 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.
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 the Activate button on each feature box.
- Carousel – The Carousel adds a beautiful lightbox carousel to your gallery images. Learn more about the Carousel.
- Extra Sidebar Widgets – Easily add images, Twitter updates, and your site’s RSS links to your theme’s sidebar. Learn more about Extra Sidebar Widgets.
- Custom CSS – Easily add to or replace your theme’s CSS right from your blog dashboard, no child theme required. (Please note that if you intend on making heavy CSS changes, you should go with a child theme for modifications.) Learn more about Custom CSS.
Upon activating your theme, you should visit Appearance → Customize to setup the basic theme settings such as your logo, header, background and social links. Detailed instructions and tips can be found below.
- Add Your Logo – The first option in the Theme Options menu will be Logo Upload. Click the Logo select box to drag and drop or select an image from your computer. One you’ve uploaded and selected an image, a thumbnail preview will display and your logo will update live in the browser.
- Accent Color – You can change the blue accent color on the site to any color prefer. Simply click Select Color and use the color picker or color palette to choose a new color. You will see the color update on your site live in the preview window.
- Header Background Effect – By default, Ampersand will use any featured image or header image you set as a transparent header background. I think this effect is really awesome, but maybe you don’t. You can disable this effect here.
- Homepage Header CTA Button – Add a call-to-action button to the homepage header. Add your text for the button and the full URL to the page you want the button to link to.
- Social Media Icons – To add social media icons to the header of Ampersand, simply visit Appearance → Customize → Theme Options and add your links. Be sure to enter the full URL to your sites. Only the links you add will show up in the header.
Ampersand lets you display a page subtitle on posts and pages. You can use this to introduce your page with a little extra text below the title.
- You can add a subtitle to any post or page in the Page Subtitle window below your post content.
- If you don’t see the Page Subtitle window, click Screen Options on the top, right side of the screen. Make sure Page Subtitle is checked.
- Update your post and page and preview your changes.
Ampersand includes a custom homepage template that shows your latest portfolio items and blog posts.
- Go to Pages → Add New to create a new page to use as the homepage.
- Add a title to this page, which will become the main title on your homepage. For example, I named my homepage “Rules are made for breaking.”
- Using the Page Attributes window, set the template to Homepage.
- Publish the page when finished. (Note: Don’t worry about adding text content to this page, since it won’t output anywhere. The homepage template only brings in portfolio items and blog posts.)
- Go to Settings → Reading and click A static front page. In the Front page dropdown, choose the homepage you created above.
- When finished, click Save Changes. Your homepage should now be using the homepage template! Once you’ve added some blog posts and portfolio items they will show up on the homepage.
Blog Page Setup
If you chose to setup your homepage to use the homepage template above, you’ll need to also tell WordPress which page will display your posts.
- Go to Pages → Add New to create a new page to use as the blog page.
- Add a title to this page, which will become the main title on your blog page.
- Publish the page when finished. (Note: Don’t worry about adding text content to this page, since it won’t output anywhere.)
- Go to Settings → Reading and click A static front page. In the Posts page dropdown, choose the blog page you created above.
- When finished, click Save Changes. Your blog page should now be displaying your blog posts!
Portfolio Page Setup
Ampersand includes a custom portfolio template that shows off your latest works.
- Go to Pages → Add New to create a new page to use as the portfolio page.
- Using the Page Attributes window, set the template to Portfolio.
- Publish the page when finished.
- Now that you have the portfolio page in place, you can start adding some portfolio items! See below.
Adding Portfolio Items
Ampersand utilizes a custom page template for portfolio items. Each page that uses the Portfolio Item template will be shown on the Portfolio page you created above.
- Go to Pages → Add New to create a new portfolio item.
- Using the Page Attributes window, set the Parent dropdown to your Portfolio main page (setup above) and set the Template to Portfolio Item.
- Add a title and your portfolio item’s text in the editor. The text you enter in the editor will show up on the left of your image or gallery.
- To add a gallery, click Add Media → Create Gallery. Choose images from your media library or upload new images. Once finished adding photos and arranging your images, click Insert Gallery.
- When you are finished adding your content, set a Featured Image which will be used for the portfolio item thumbnail and transparent header background image. Even if you added a gallery to your post, you have to specify which image for the post to use.
- Publish the page when finished.
Contact Page Setup
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.
Custom Header Background Images
Ampersand utilizes Featured Images as transparent image backgrounds for the header area of each post or page. All you have to do is set a Featured Image and each page will get a unique header image.
If you’d like to set one image for all posts and pages, you can do so by adding a Header Image in Appearance → Header.
Select an image from your library or upload a new image. For the best looking header, do not crop the image when WordPress prompts you to. You can simply click Skip Cropping, Publish Image As Is. Learn more about custom headers.
Add a Custom Background Image or Color
Add a Custom Background to your site by going to Appearance → Customize → Background.
Similarly to the Custom Header Image, you can either upload a new image or choose one from your media library. Once you’ve chosen your image, you will have several options for displaying the background. You can also choose a background color instead of an image.
Adding Widgets to the Sidebar and Footer
Ampersand has two widgetized locations, the sidebar and the footer.
To add widgets, visit Appearance → Widgets. Drag any of the available widgets onto the sidebar or footer and arrange them however you’d like. Enable Jetpack’s Extra Sidebar Widgets module to get even more widgets!
Adding Images To Your Posts
Full-Width Page Template
Ampersand comes with a full-width page template, which displays your post content without a sidebar. To use the full-width template, select Full Width from the Templates section of the Page Attributes module.
Extra Styles Via CSS Classes
Ampersand comes with a few extra typography styles that can be used by simply applying a class to your content. They are entirely optional, but can add a nice touch to your content!
Pull quotes are similar to block quotes, but are reserved for less text. See Ampersand’s Style Guide to see our 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>
Intro text styling simply makes your text lighter and larger, creating a nice light title effect. This is useful for introducing a post or page with a brief description. To use the intro text style, you can add a class of intro-text to your content. See an example below.
<span class="intro-text">This text will be intro text.</span>