- Getting Started
- Install the Demo Data
- Recommended Plugins
- Install Jetpack
- Customizer Settings
- Widget Areas
- Create the Featured Content Carousel
- Create the Footer Category Menu
- Create a Gallery or Video Post
- Create the Contact Page
- Create the Contributors Page
- Add a Store with WooCommerce
- Add a WooCommerce Store Homepage
- Create the Featured Product Carousel
- Add Testimonials
- Finding Good Photos
Once you’ve activated Lenscap, 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!
Theme Demo Data
When you first activate Lenscap, it will look like simple blog with your existing posts. This is expected since Lenscap needs you to modify a few settings before it will look like the demo. Optionally, you may install our Lenscap 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.
You’ll want to install and activate both the Jetpack plugin (if you want the Featured Content Carousel) and WooCommerce (if you want a store) before importing the demo data so those posts are also included in the import.
Download the Lenscap 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!
There are a few features used throughout the theme demo that are added by a plugin. These plugins are entirely optional, and won’t take away from the performance of the theme in any way. But they add some nice elements that your users may enjoy. Here is a list of plugins and what they add to the theme.
These plugins can also be installed via your theme’s Appearance → Getting started page. Just click the Plugins tab to see the recommended plugins for your theme.
- Featured Image Caption – Featured Image Caption makes it simple to show a caption with the featured image of a post or page. This caption will be shown below your featured image on single post or pages. See this post on the theme demo for an example.
- MailChimp for WordPress – This plugin let’s you collect email subscribers via a MailChimp widget or shortcode placed in your content. You can see an example of this in the sidebar of the Lenscap theme demo.
- Shortcodes Ultimate – With this plugin you can easily create tabs, buttons, boxes, different sliders, responsive videos and more. See the Shortcodes page on the theme demo to see a few examples.
- Jetpack – Jetpack is a free WordPress plugin that provides various features and enhancements to your WordPress site.
- WooCommerce – WooCommerce lets you sell physical or digital goods on your website. Check out the Shop on the Lenscap demo.
Jetpack is a free WordPress plugin that provides various features and enhancements to your WordPress site. Lenscap uses several of the Jetpack features to add things like sharing icons, related posts and sweet photo galleries.
- 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 Lenscap 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 features that suit your site.
- Carousel – The Carousel adds a beautiful lightbox carousel to your gallery images. Learn more about the Carousel
- Contact Form – Add a contact form to your site by activating the Contact Form feature. Learn more about the Contact Form
- Custom CSS – The Custom CSS Editor allows you to customize the appearance of your theme with CSS modifications. Learn more about Custom CSS
- 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 in. Related posts will automatically be output on your single post pages upon activation. Learn more about Related Posts.
- Subscriptions – Let visitors sign up to receive notifications of your latest posts and comments. Learn more about Related Posts.
Lenscap comes with several Customizer settings that you can use to customize your site to your style.
The following settings can be found in Appearance → Customize → Theme Options → General Settings.
- Accent Color: Change the accent color of button and typographical elements found in the theme.
- Index Post Style: Choose between an excerpt and thumbnail layout or full post layout, as you see on single post pages.
- Index Post Excerpt Length: If you choose the excerpt layout, you’ll have the option to change the excerpt length on index and archive posts. This setting is only shown if you choose the Excerpt option on the Index Post Style setting.
- Footer Category Menu: Enable or disable the Footer Category Menu that appears below the posts on your homepage.
- Footer Category Menu Title: Change the title of the Featured Category Menu section at the bottom of the homepage. Leave the title blank if you’d rather not have a title.
- Footer Background Image: Add an image background to the footer area.
- Footer Background Image Opacity: Change the opacity of the background image. This is useful if your footer image is conflicting with the text in your footer. Turning down the opacity will make the text more legible. This setting is only shown when a Footer Background Image is set.
- Footer Background Image Blur: Add a blur effect to the footer background image. This setting is only shown when a Footer Background Image is set.
- Footer Background Image Color: Change the background color of the footer area. This setting is only shown when a Footer Background Image is set.
Site Title, Tagline & Logo
The following settings can be found in Appearance → Customize → 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.
The following settings can be found in Appearance → Customize → Featured Content. Please note that 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.
- Header Layout Style: Choose between a full-width header layout or a boxed layout. Full-width will stretch your header to the edge of the screen and boxed will contain your header to the width of the content on the site.
- Header Title: Change the title of the Featured Content area. This text will also link to the Featured Content post archive.
- Header Text Position: Choose left or right positioning for the Featured Content post text.
- Excerpt Length: Change the length of the excerpt for the Featured Content post text.
- Header Accent Color: Change the background color of the Featured Content post text and carousel navigation. Choose one of the included color schemes or create your own!
- Header Background Color: Change the background color of the Featured Content header. To see this color change, you’ll need to lower the Background Image Opacity setting.
- Header Background Image Opacity: Change the opacity of the Featured Content background image.
- Header Background Image blur: Add a blur effect to the Featured Content background image.
- Header Height: Change the height of the Featured Content header.
- Header Text Width: Change the width of the Featured Content post text area.
Lenscap has four different menus that can be used throughout the theme. See the diagram above for a visual tour of the menus and find the menu details below.
- Primary Menu – This is the main menu found in the header of your site.
- Footer Category Menu – This is the category browser menu found on the homepage, outlined in the Footer Category Menu section.
- Footer Menu This is the menu found at the very bottom of your site, on the left side of the footer.
Social Icon Menu This is the social media icon menu found in the header of your site. See the instructions below to set up the Social Icon Menu.
- 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. Lenscap 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. If there is a popular service that isn’t supported and has an icon on FontAwesome, let us know and we’ll add it to the theme!
- 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.
Lenscap comes with a few different widget areas you can use to customize your site.
Sidebar – This widget area can be found on the sidebar of most posts and pages.
Footer – This widget area can be found in the footer of your site. There are four widget columns that you can use to add widgets to the footer. The footer widget columns have a dynamic width, meaning if you only choose to use two or three columns, the column width will adjust to display the columns evenly in the footer.
WooCommerce Shop Archive Sidebar – This widget area can be found on the Shop archive page of your WooCommerce store. If you do not add any widgets to this sidebar, it will not be shown. This sidebar is intended for adding some of the WooCommerce product widgets such as WooCommerce Product Search, WooCommerce Average Rating, WooCommerce Price Filter and WooCommerce Layered Nav. You can add any widgets to this sidebar, but these widgets will improve the usability of the Shop page.
WooCommerce Single Product Sidebar – This widget area can be found on single product pages of your WooCommerce store. If you do not add any widgets to this sidebar, it will not be shown. This sidebar is intended for adding some of the WooCommerce product widgets such as WooCommerce Cart, WooCommerce Product Categories and WooCommerce Product Search. You can add any widgets to this sidebar, but these widgets will improve the usability of the product pages.
Create the Featured Content Carousel
Lenscap uses Jetpack’s Featured Content to showcase four of your latest featured posts in a beautiful post carousel on the homepage.
- To create the Featured Content header, first make sure you have the Jetpack plugin installed.
- Once installed, you can go to Appearance → Customize → Featured Content to begin setting up the header.
- In the Tag name field, enter a tag or choose an existing tag to use as the Featured Content tag. The tag you choose here will be used to display posts from that tag in the Featured Content carousel on the homepage. If you already have posts with the chosen tag, you will see the Featured Content area appear near the header on the homepage. If you don’t have any posts setup with the tag you selected, you may want to do this before customizing the carousel with the settings in the Customizer.
- After you’ve got the tag selected and can see the Featured Content area, you can continue customizing the carousel with the settings found in Appearance → Customize → Featured Content.
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.
Create the Footer Category Menu
With the Footer Category Menu, you can turn a standard category menu into an instant post-loading category browser. By default, Lenscap uses your most popular categories to create a menu for users to browse, but you can also override this with your own category menu using the instructions below.
First, you’ll need to create a menu to populate the category menu. Go to Appearance → Menu and create a new menu and assign it as the Footer 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 category link.
- Once your menu is complete, save the menu and check out the Footer Category Menu on the homepage.
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.
Create a Gallery or Video Post
Lenscap includes support for Gallery and Video post formats. Post formats allow you to change the style of your content to more closely match the type of content you are creating. Lenscap adds a lightbox feature to Video and Gallery post formats that allows visitors to get a quick, full-screen view of media on index pages, while featuring the media at the top of the post on single pages.
Gallery and Video post formats rely on WordPress’s embed/oEmbed feature for videos and the standard gallery shortcode for gallery posts. See here for a list of available embed options for video. Lenscap will take the first video or gallery in your post to create a lightbox for the index page and it will feature the video or gallery on the single page.
Create a Video Format Post
- Go to Posts → Add New and create a new post. In the Format window, click Video.
- Next, let’s add a video. In the same way you embed videos normally, add your embed code or link to the top of your new post. Remember, only video embeds supported by WordPress (oEmbed links or iframe video) will work here.
After you’ve added your video to the top of your post, you can continue adding content as seen below.
- Publish your post when you’re finished and preview the results.
Create a Gallery Format Post
- Go to Posts → Add New and create a new post. In the Format window, click Gallery.
- Next, let’s add a gallery. In the same way you create galleries normally, add your gallery to the top of your new post.
After you’ve added your gallery to the top of your post, you can continue adding content as seen below.
- The Gallery post format supports standard WordPress galleries, as well as the extra gallery styles provided by Jetpack, such as Tiled Mosaic, Tiled Column and Square Tiles.
- Publish your post when you’re finished and preview the results.
Create the Contact Page
Lenscap uses Jetpack’s Contact Form feature for adding contact forms to your pages. You can choose to simply add a contact form to your contact page, or you can create a page like the screenshot above, with two columns, a contact form and a Google map. The instructions below will help you create a two column layout for your contact page.
Creating the two column layout will require just a small bit of code be added to your post content. Fear not, we’ve prepared it for you and it won’t require any coding skills to create this page. If you’ve installed the theme demo data, this page will have been created automatically, however, the info below will help you customize it further.
- Firstly, make sure the Contact Form feature is activated on the Jetpack settings page.
- Go to Pages → Add New to create a new page to use as the contact page. Apply the Full Width page template in the Page Attributes window.
Now we’ll switch over to the Text view to add a small bit of code. We’re adding two divs, which we’ll add a contact form and a map to. Copy and paste the following code into the Text view of your contact page.
<div class="contact-column"> // First column </div> <div class="contact-column"> // Second column </div>
- In the first column, we’ll add a contact form. Place your cursor after the code comment
// First column, and click the contact form icon above the post editor. Visit the Contact Form page for more information on how to customize a contact form.
- Once you’ve customized your form, click the Add this form to my post button, which will add the contact form into the first column.
In the second column, we’ll add a Google map embed. You can get a Google map embed code for any location by visiting the location in Google maps and clicking the Share icon and clicking Embed Map in the pop-up window.
- Copy the embed code and paste it below the code comment
// Second Column. You’ll notice in the code there is a width defined, usually
width="600". To make sure the map fits the columns, change this to
- Feel free to add any additional content above or below the contact form or map embed. You can also use this two column layout for other content throughout your site.
See the final page content below, along with the final page code available on Github.
Create the Contributors Page
Lenscap comes with a page template to display all of the authors on your site. This is handy if you have several contributors and you’d like a quick way for users to access their posts. The Contributors template file is called template-contributors.php and can be found in the main theme directory for further customization.
- Go to Pages → Add New to create a new page to use as the Contributors page. Apply the Contributors page template in the Page Attributes window.
- You may add content to the page via the post editor and it will be output above the contributors. You won’t see the contributors listed in the post editor, but they will appear on the Contributors page below the page title and page content.
- Contributors must have published posts before they will appear on the Contributors page. Lenscap will grab the author avatar, display name, bio and website URL from the user’s profile when available. If this information is missing for your authors, you can add author details to each author by going to Users → All Users and completing the profile for each author. To display the author avatar, the author must have a Gravatar account.
- Publish the page when you’ve finished adding content.
Add a Store with WooCommerce
Lenscap supports the popular WooCommerce eCommerce plugin. We’ve simplified the Lenscap and WooCommerce integration so there aren’t any additional steps other than following the WooCommerce setup steps. The WooCommerce setup steps will help you create the Shop, Checkout, Cart and My Account pages needed to run WooCommerce. Once you’ve gone through the setup, you can begin adding products just as you would on any WooCommerce site.
Browse the WooCommerce documentation site for tips and tricks on working with WooCommerce.
Add a WooCommerce Store Homepage
By default, Lenscap uses your blog posts for the homepage. However, we’ve also included a Shop Homepage template to help you display your WooCommerce products on the homepage. The Shop Homepage template includes the Featured Content Carousel as seen on the blog homepage, as well as space below the carousel to add any of the WooCommerce product shortcodes.
To create the Shop Homepage as seen on the demo, first you’ll need to ensure you have products added to your WooCommerce store. Once you’ve done that, you can go to Pages → Add New and create a new page for your shop homepage. Once the page is created, apply the Shop Homepage template in the Template drop down. This is going to enable the shop homepage styles and carousel. Setting up the carousel requires jumping into the Customizer, so we’ll come back to that step in a minute.
Once you’ve applied the Shop Homepage template to the page, you can now start to add the product sections to your homepage. Lenscap will support any of the WooCommerce product shortcodes seen below on the homepage:
Featured Products –
Recent Products –
Sale Products –
Best Selling Products –
Top Rated Products –
You can add these to the Text view of your page and arrange these in any order you’d like, but there is a little HTML markup we need to add so the styles look really nice. To create the appearance of homepage sections, we can add a container div and a title to each section, as seen below.
<div class="container"> <h3>Featured Products</h3> [featured_products per_page="4"] </div>
You’ll notice we’ve added
per_page="4" to each shortcode. This will ensure the shortcode only outputs four products into each section, which keeps the homepage nice and balanced. You can add more or less products by adjusting the number of products per page.
To achieve something like you see on the Lenscap demo, your homepage content might look something like the screenshot above. You can grab the code from that screenshot in this Github gist.
Create the Featured Product Carousel
Similar to the Featured Content Carousel you see on the homepage, you can also feature products in a carousel on the Shop Homepage template. Once you’ve created a page and set the Shop Homepage template, you can visit the Customizer to set up the carousel.
The following settings can be found in Appearance → Customize → Theme Options → WooCommerce Settings.
- Featured Product Tag: The Featured Product carousel works by displaying products that use a common product tag. Select the tag of the products you’d like to feature in the header. Start typing to search for your tag or to create a new tag.
- Featured Product Layout Style: Choose between a full-width header layout or a boxed layout. Full-width will stretch your header to the edge of the screen and boxed will contain your header to the width of the content on the site.
- Featured Product Excerpt Length: Change the length of the excerpt for the featured product post text.
- Featured Product Accent Color: Change the background color of the featured product post text and carousel navigation. Choose one of the included color schemes or create your own!
- Featured Product Background Color: Change the background color of the featured product header. To see this color change, you’ll need to lower the Featured Content Background Image Opacity setting.
- Featured Product Background Image Opacity: Change the opacity of the featured product background image.
- Featured Product Background Image blur: Add a blur effect to the featured product background image.
- Featured Product Height: Change the height of the featured product header.
Shop Homepage Testimonials
Lenscap supports customer testimonials on the Shop Homepage template. To activate Testimonials, you just need to have the Jetpack plugin activated and a new Testimonials menu item will show up in your WP admin.
Similar to the way you add new posts, you can add a new testimonial under Testimonials → Add New. Testimonials are ordered by the date they’re created, with the most recent testimonial displayed first. The title of the Testimonial should be the name of the customer/user and the content of the testimonial post will be the testimonial quote, as seen below. You may add a Featured Image to each testimonial which will act as an author image.
There are a few different ways to view your testimonials after they’ve been created. Firstly, you can find them on the Shop Homepage template, if you decided to add the testimonial shortcode there. You can also find testimonials on the testimonial archive page, which is found at yourgroovysite.com/testimonial/. You can add a link to the testimonial archive page by going to Appearance → Menus and clicking Custom Links and adding this link. Don’t forget to change yourgroovysite.com to your own website address.
Adding Testimonials To Your Site
As mentioned above, testimonials are automatically archived at yourgroovysite.com/testimonial/. You can also add them to your posts and pages by using the [testimonial] shortcode, as we do on the shop homepage. For additional attributes for this shortcode, check out this Embedding Testimonials article.
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.