This document covers the installation, set up, and use of this theme and provides answers and solutions to common problems. We encourage you to first read this document thoroughly if you are experiencing any difficulties before contacting our support team.
If you have any questions that are beyond the scope of this document, feel free to ask us via our dedicated help center.
After downloading the theme package open the folder named “harbor-package”, un-zip the folder if it is not already so. Inside the theme package folder you will find the following files:
To upload through your Dashboard, select “Appearance” and then “Themes”. Next, select the “Install Themes” tab at the top of the page and then select the “Upload” link, right above the search field. Choose your file and select “Install Now”. Once the theme is fully uploaded and installed, click “Activate” to activate the WordPress theme.
The theme files will be stored on your server in the
When uploading your theme with the installer, please ensure you are uploading the theme .zip file, not the entire package you downloaded. In this case, you will be uploading harbor.zip.
To manually upload your new WordPress theme, login with your credentials to your website and locate the wp-content folder in your WordPress install files. Upload the un-zipped Harbor folder into the: wp-content/themes folder.
Once uploaded, activate the theme by heading to the “Themes” menu in the WordPress Dashboard. Locate the Harbor theme and hit “Activate”.
Premium Theme Installation
If you're looking for WordPress theme installation and setup to look exactly like the live theme demo - then we're here to help. Fast & simple for only $49.
Our in-house team of professional developers will install the theme, upload the demo XML file, and setup your website exactly like the live demo. Frustration free. Complete your purchase of the Premium Installation service by clicking the link above and send us your deliverables.
- Domain name
- FTP information
- WordPress admin credentials
- Theme files or ThemeForest item purchase code
If you have a problem with the theme or found a bug, please let us know via our official Help Center. We take pride in our customer support and we will do what we can to assist you. If you are experiencing a theme issue, please first turn off all third party plugins to see if the problem persists.
We are happy to help with setup & bugs you may stumble upon though we cannot support CSS customizations.
Harbor has the following templates built into the theme and can be applied by creating and saving a page in WordPress.
- Contact Template
- Default Template
- Portfolio Grid Template
- Portfolio Relative Grid Template
- Portfolio FullPage Template
- Post Archives Template
- Site Map Template
- Team Members Template
- Testimonials Template
- Under Construction Template
Page Featured Images
Harbor includes support for page featured images. You can add featured images via the Featured Image meta module, located below the Publish and Page Attributes metaboxes, on the right side of your page editor. These featured images will be used as a background for the page's Hero Area (if enabled).
On each page you'll see a Page Settings metabox, located below the page content editor. This metabox includes the options to display to select the page content layout (Default, Center, Wide & Wide Center).
Page Hero Areas
Every page, post and porfolio post in Harbor has the ability to display a beautiful and elegant hero area. You'll see the "Hero Settings" metabox below the main content editors of each of these post types.Learn more about Hero Areas below →
Every page, post and porfolio post in Harbor has the ability to display a beautiful and elegant hero area. You'll see the "Hero Settings" metabox below the main content editors of each of these post types.
Simply check the Enable Hero Area checkbox to display the hero area - and if you'd like it to be fullscreen, check the Hero Fullscreen Effect option directly below.
Click on the screenshot below for a detailed view.
Here's a list of the stylistic options:
- Enable Hero Area
- Enable Fullscreen Hero Area
- Enable Background Zooming Animation
- Enable Background Gradient Overlay
- Optional Hero Tagline
- Custom Hero Text Color
- Custom Hero Background Color
- Hero Background Video URL
- Hero Background Video Embed (Vimeo, Youtube, etc.)
The hero area background is pulled via the uploaded Featured Image, though you can override this on posts and portfolios by adding an image to the Hero Header Image option in the "Hero Settings" metabox.
Harbor can display both direct linked videos - HTML5
<video> elements - and embedded videos from services such as YouTube and Vimeo. When using an embedded video, it's important to enable an autoplay setting (from the video's platform of origin).
If you're using a video background, be sure to upload a screenshot of your video as a featured image or Hero Header Image. You'll need the image here on mobile devices where the html video elements struggle with performance.
We've added in a neat animated typing effect that can be used in the hero tagline textarea. Below is an example of the animation code deployed on the Harbor demo. Simply add this to the Hero Tagline textarea within the "Hero Settings" metabox (located beneath the page or post editor), and swap out the text, add more
<b> elements and such.
You can work the code however preferred, as long as you have the correct
<b>elements within it.
To set up the Home Template, simply create a page using one of the many portfolio templates and publish it. Don't forget to install and activate the Bean Portfolio plugin, which is available as a free download. Find out more on installing and activating plugins.
After installing the plugin and creating your page using a portfolio template, head to the WordPress Dashboard > General > Reading Settings admin page. You must set your Posts page, which will be the default index page, and your home page (the page you just created).
Alternatively, you may select the page in the Theme Customizer.
The Harbor demo is utilizing the Portfolio Grid template, with a Hero Area enabled and a background video MV4. We've also entered a blockquote to the page's content - in order to add a nice entry tagline ,though you may utilize whatever you'd like there.
You may elect to have your posts on your home page. All you need to do here is select the option from the "Static Front Page" section in the Theme Customizer after you've created a blank page that you may use for the blog.
To create a new post, from within your WordPress Dashboard, navigate to the “Posts” tab (located in the Dashboard sidebar) and click on “Add New”. Select the post format on the right sidebar and the format specific meta fields will appear below the editor.
Don't forget to upload your featured image or grid image.
As of version 1.1, Harbor has the added capabitlity to display an alternate wide posts blogroll layout. This option is located in the Theme Customizer > Blog section. Once selected, the blog index will display the selected layout, as well as all archivial and search posts. Below is a screenshot of the Customizer option:
There are a couple post formats that are built directly into the theme: standard, audio, image lightbox, aside, link, quote and video. To change your post format, select your desired format from the Format metabox, located beneath the Publish metabox to the right of your post editor.
Once you've selected a post format, you'll find additional metaboxs appear below your post editor. You will include the neccessary information for your post type and hit "Publish".
Harbor has a couple built-in compatibilties with some modules of the JetPack plugin. Once you've installed and signed in with a WordPress accout, you may turn on/off various elements.
Creating a Gallery
To create a gallery, click on the Add Media button above the page or post editor. Then click on Create Gallery, which is located at the top left. You may now select as many pictures as you'd like to be included in the tiled gallery.
Once you've selected your pictures, hit the Create a new gallery button on the bottom left. Lastly, modify the Gallery Settings on the right hand side of the modal. We suggest setting the "Link to" value to none and the "Type" to either tiled mosiac or square tiles. Now hit Insert Gallery.
Creating your Portfolio Page
You need to first create a page using any of the portfolio templates. These templates will pull your published portfolio posts accordingly. Here's a list of the available templates:
- Portfolio Grid Template #demo
- Portfolio Grid Relative Template #demo
- Portfolio Fullpage Template #demo
In the Portfolio > Single Layout section, set the global single portfolio layout. This layout will be applied to any portfolio post with the Global Setting portfolio layout option. Instantly change the single portfolio post's look with one click.
You can easily override the global setting selected in the Theme Customizer by changing the Portfolio Layout selector to any one of the single portfolio layouts, as listed out below. We built Harbor to be extremely simple to change on-the-fly, but with powerful flexibility to provide user-level customization.
Upload a featured image (any size) and it will be automatically applied throughout all the neccessary templates and pages. If you don't upload any additional media, the featured image will be applied to the singular portfolio page hero area and loop templates.
This is where you will add your images to the post by clicking the "Browse & Upload" button. You have the capability to rearrange, caption, add more and remove images from the popup modal that appears.
Just remember to hit Save Gallery and you're all set.
Portfolio Post Formats
In addition to different portfolio gallery laytous, Harbor is also capable of outputting audio and video portfolio posts (embedded - e.g. Vimeo & YouTube). To change the type of portfolio to display, click on the checkboxes under the "Portfolio Format" metabox, located beneath the Portfolio Categories, on the right hand side of your window.
Mix or match video, audio and gallery posts on the same post. Note that the Stacked layout is the only layout that supports Audio and Video formats.
Each portfolio post has selectable meta options that you may choose to use on each individual post. You can set the date, client, role, url, url title, elect to display the categories, tags and any custom meta.
You can also add an external URL to which your post loop will link to a different URL than it's single post page. For example, you can create a post with a featured image and an external link to your Behance project page - then promote that project within the portfolio templates.
Located within the Theme Customizer you will find a Portfolio section. Here you may elect to enable the portfolio filter, enable sharing, portfolio navigation and your template count.
Portfolio Call to Action
Also in the Theme Customizer is the single portfolio Call to Action settings. You can enable a bold call to action that displays beneath the Stacked and Carousel layouts.
Add team members to your site by installing and activating the free Bean Testimonials WordPress plugin.
To display your team, simply create a page in the WordPress admin dashboard and select the Team Members template from the Page Attributes metabox to the right.
Above is a screenshot without a hero area enabled on the page, or any content. You can add any content to the team template and it'll display directly above the team grid (as seen in the Harbor demo).
To create team members, click "Add New Member" inside the new Team dashboard menu item. Add the name, featured image, role and an optional quote. Easy enough, yea?
To set up the Contact Template, simply create a page using the "Contact" template and publish it. Within the Theme Customizer you'll find a Contact section, which includes settings for the Google Map option, and optional Bean Testimonials slideshow.
Adding a Google Map
Harbor utilizes the free Google Maps Builder WordPress plugin to add an optional fullscreen Google Map to the contact template. On top of that, we've added built-in integration with Snazzy Maps to create truly unique Google Map themes that look absolutely breathtaking.
Once you've installed and activated the plugin(s), simple create a map within the Google Maps dashboard menu item.
Then, simply head to the Theme Customizer > Contact > Google Map section and add the map's shortcode to the "Map Shortcode" input field (ex:
The map shortcode is located to the right of the Edit Map page, above the "Publish" button.
You may also add your address, to be input in the center of the Google Map. Above is an example of an address added. Be sure to add the neccessary break element -
<br/> - to the end of each line.
Add a testimonial slider to the contact template by installing the free Bean Testimonials WordPress plugin and enabling testimonials via the Theme Customizer.
Once installed and activated, creating testimonials is a breeze. They're added just like regular posts are, via the new Testimonials dashboard sidebar menu item.
Don't forget to add your testimonial's featured image.
The "Client Reviews" testimonials section title, located on the contact template, can be modified via the Theme Customizer > Contact > Testimonials section, as seen in the screenshot below:
Please note that the testimonials slider displays 8 testimonials in a random order. This number can be modified in the content-testimonials.php file.
- Flickr Photostream Widget
- Portfolio Widget
- Portfolio Menu Widget
- Portfolio Taxonomy Widget
- Video Embed Widget
Bean Plugin Widgets
The following widgets are provided with our compatible array of free plugins.
- Bean Tweets Widget
- Bean Instagram Widget
- Bean Social Widget
- Bean Dribbble Widget
- Bean 500px Widget
Using the Widgets
To employ a widget, simply go to your Widgets editor (located in your WordPress Dashboard in the “Appearance” menu) and drag your widgets into the specified widget areas.
Accessing the Customizer
To access the live Theme Customizer, you may select the Customize button in the admin bar dropdown or select
"Customize" from the Dashboard menu. Note that you must be logged in as a site administrator in order to access the controls.
1. Site Title & Tagline
Set your site title and the tagline.
2. Theme Options
Enable Retina.js, enable the retina logo option and enable the Bean Framework SEO metaboxes.
3. General Settings
Upload the logo, login logo, favicon, apple touch icon, and add a Google analytics script.
Enable the Header Menu, select your header alignment (logo left, or logo right) and select the secondary menu layout.
Enable the author bio/post meta section, post social sharing (Twitter, Facebook, Google & Pinterest) and enable the "Next Post Preview" section on single posts.
Enable filtering, single portfolio sharing, post-to-post navigation and loop categories. You may also set the Portoflio Page (which the navigation middle button links to) and set the number of posts to display on your portfolio templates. There's also an option to add a CSS3 Filter to the portfolio loop (grayscale, sepia & high saturation).
In the Portfolio > Single Layout section, set the global single portfolio layout. This layout will be applied to any portfolio post with the Global Setting portfolio layout option. Instantly change the single portfolio post's look with one click.
Set your contact form email address, add your Google Map code, map address, enable testimonails and modify the testimonials section title.
Add your social media links to the site footer and customize the copyright text.
Customize your site's 404 page by uploading a custom image.
Change up the theme's background by selecting an alternate color.
Easily manipulate the theme accent color CSS elements throughout the theme with the color picker in this tab.
3. CSS3 Filter Options
Within the Portfolio > Options section of the Theme Customizer, you'll find a select field to set an optional Portfolio CSS3 Filter value (grayscale, sepia & high saturation). If activated, your portfolio grid templates will default with the selected filter active.
Note that these filters only function in modern versions of browsers.
4. Custom CSS
Insert your own CSS into this block and it will be applied to your website. This overrides all default styles located throughout the theme. Get help learning the art of CSS →
CSS entered in the Custom CSS editor will override all other theme stylesheets. Deleting the styles inputted here will allow the stylesheets display.
To install any of our free plugins, head over to our website and simply download the plugin files. Once you’ve successfully downloaded a zip file, head to your WordPress Dashboard and select “Plugins > Add New > Upload.” Add the zipped file in the field there and click “Upload.” Upon a successful upload, you’ll be prompted to activate the plugin.
Harbor is compatible with many of our custom developed WordPress Plugins. Head over to our website and download our free plugins now →
- Bean Portfolio
- Bean Shortcodes
- Bean Tweets
- Bean Instagram
- Bean Social
- Bean 500px
- Bean Dribbble
- Bean Pricing Tables
- Bean Registry
- Bean Team
- Bean Testimonials
Google Maps Builder
Google Maps Builder isn't just another Google Maps plugin. It's built from the ground up to be the easiest, most intuitive and fastest Google Maps plugin for WordPress. Visually build powerful customized Google Maps to use on your WordPress site quickly and easily without ever having to touch a bit of code.Learn how to add a Google Map to the contact template →
Snazzy Maps adds styles to your existing Google Maps with the click of a button. Use this plugin to style up your Google Maps as in the Harbor theme demo.
Each graphical asset has an associated retina image that should be modified when customizing assets in this theme. You will find these retina assets in their respective image locations, in the “retina” folders.
Additionally, if the image size has changed, the background-size property of the associated class in /assets/css/mobile.css must be modified to reflect those changes.
HD Retina Assets
Harbor has particular @3x CSS located in mobile.css, which utilizes the images appended with @3x ex: firstname.lastname@example.org within the
/assets/images/retina folder on HiDPI screens.
If you'd like to add more @3x assets, simple save your image at 300% (we use Photoshop) and add it to the
/assets/images/retina folder. Then look for the following CSS at the bottom of mobile.css and add your CSS element with a background image pointing to your new image:
You may need to add the
background-sizeattribute to the element if you have not already added it to the standard retina query.
This theme is retina.js ready - which means that any image will be replaced by a retina image if you’ve uploaded one into the same directory & have appended the “@2x” to the end: ex: email@example.com will replace logo.png
WordPress will modify the asset name of any identically named uploads. Make sure your retina assets are the named identically - with "@2x" appended.
Easily add a retina logo with the Theme Customizer. Head to the Site Settings section within the Customizer and check the "Enable Retina Logo" checkbox. Please make sure your uploaded logo is 2x it's inteneded size - as the retina logo option basically shrinks your image by 50%.
If you've requested and entered your theme license key, then you'll automatically be notified of any theme updates as we push them. This is the most effective method for getting updates pushed to you quickly and effienctly. Read more about theme licenses.
Check for Updates
To check your theme version, click the live changelog link below and check the version number at the top of the changelog.txt file:
Relay the changelog version at the top of that changelog.txt file with the version in your WordPress Dashboard > Appearance > Themes section to see if your theme files are up to date.
If you are in need of the update, download the current build from the location you purchased the theme from (either ThemeForest, Creative Market or via your account dashboard) to install the updated theme.
If you have an active license key applied to your theme, you will receive live update notifications to which allows one-click updates directly from your WordPress dashboard.
If you have not customized the original theme files then you may simply drop the updated theme folder contents into the theme folder on your server – which is located in wp-content/themes/harbor.
If you wish to upload the entire updated theme as a separate theme, ensure you:
- Rename the updated theme’s folder (different from the current theme)
- Drop the renamed theme folder into wp-content/themes
- Switch to the new theme via your WordPress Dashboard
If you choose to upload the whole theme and switch to it, you may lose your Theme Customizer data and will have to add those back in.
FTP Selective Updating
On the other hand, if you have customized some files in the core theme contents, you should consider selective updating, which simply means updating only the files that are pointed out in the theme’s changelog.
There are a couple programs out there that will allow you to compare versions of files, in order to catch customizations you may not remember. Some recommended programs are WinMerge (Windows), Kaleidoscope (OSX), and handy GitHub (OSX) & (Windows).
Overall, the safest and cleanest way to update your theme is to leave your currently modified theme on your server/site as is, rename the folder of the newly updated theme, upload the new theme, and modify that to match your original custom work. In this way, if something has gone wrong with the new version, you’re just a few clicks away from getting things back to how they originally were.
Please note that ThemeBeans is not responsible for content loss, database errors and such, which may happen to your WordPress install upon an incorrectly applied theme update.
Locating your Key
Below are the different locations you may purchase our themes and clarifying instructions on locating your license per each.
1. Purchased from ThemeBeans
You should have received an email purchase receipt with your theme license key attached. Be sure to check your spam mailbox, just in case the receipt was filtered on accident. That’s it!
2. Purchased from ThemeForest
Locate your item purchase code from ThemeForest and then complete the license request form. Once you’ve sent us your request, we’ll email you a license key for your verified theme purchase.
Please only submit one request per purchase code. It may take up to 24 hours to process your request and generate your license key.
Below is a graphic depicting how to find your item purchase code:
3. Purchased from Creative Market
Contact our support team with your Order ID (which is located on your purchased product’s invoice. Once again, after we’ve verified your purchase, we’ll email you a license key for your verified theme purchase. Below is a graphic depicting how to find your purchase order ID.
It is important to keep your license up to date in order to continue getting updates for your ThemeBeans WordPress theme and support for any issues you may encounter. Renewing your license grants you access to support and updates for another year, including all updates for bug fixes and feature introductions.
Once you've located your license key you may enter the key on the Theme License admin page, located on your
WP Dashboard > Appearance > Theme License. Once your license key is entered, hit the “Activate” button. Upon a successful activation you’ll see a green “Active” tag next to the input field.
If your key is not applied after hitting the Activate button, simply re-enter the key and try again. Sometimes it takes a few tries to properly establish a connection with the activation server.
Theme license key and update notification support only apply to our WordPress themes running our Bean Framework v2.2 and forward.
Bean Feature Setup
As a quick reference point, you may have noticed the
bean_feature_setup function at the top of your theme’s functions.php file. Within this function there are a few true/false statements – set to activate or deactivate various features and functionality within the theme.
We recommend that after installing the included child theme, activate it and then copy this function into your child functions.php file. This way you can turn off/on features from your the child - and your changes will never be overwritten.
The above is just an example of the
bean_feature_setupfucntion. You should grab the function from your downloaded theme package to copy into your child theme - DON'T use this one.
If you'd like to add another menu location to use in the theme, search for the
bean_theme_setup function in your theme's functions.php file and copy that whole function to your child theme.
bean_theme_setup function you'll see the standard register_nav_menus function. Simply create another copy/paste another line with a unique location identifiers and name. The code below creates two separate menus locations that are selectable via the
WP Dashboard > Appearance > Menu page.
Adding your menu to the theme.
Now that you've created the menu, you can use it in your theme's files. As always, we suggest utilizing a child theme to make file modifications.
The code below is an example of the wp_nav_menu function that displays your created navigation window. There is quite a few parameters associated with this function, so take a look at it's official reference to see all that you can do.
Add Image Sizes
If you'd like to add another image size for your WordPress instance to automatically size for, search for the
bean_theme_setup function in your theme's functions.php file and copy that whole function to your child theme (if you have not already done so).
You'll want to look for
add_image_size within the
bean_theme_setup function and copy/paste a new line in. Below is an example of the
Note that the first numeral value is the image's width and the second is the height. Read more about the parameters of the
add_image_size function on the WordPress reference site.
Using image_size in your theme.
It's pretty simple to utilize your new image size within your theme templates. Here's an example using the above
Note that you will need to regenerate your images if you're trying to create an image size for images already uploaded to your WordPress Media Library.
As part of our v2.0.5 Bean Framework update, we’ve added an option to completely whitelabel the theme framework. Set the
"whitelabel" value to
"true" within the
bean_feature_setup function and the default ThemeBeans favicon, logo and general references to ThemeBeans will be removed.
This is a great addition those developers out there who are customizing ThemeBeans themes for clients. There’s no need to dive in and “rip” out code.
Files & Sources
These are the primary CSS files used for general front-end styling. Use these to customize your theme even further.
- style.css primary stylesheet
- assets/css/mobile.css responsive stylesheet
- sharrre www.github.com/julienh/sharrre/
- fancybox www.fancyapps.com
- fitvids www.fitvidsjs.com
- fullpage www.github.com/alvarotrigo/fullpage.js
- isotope http://isotope.metafizzy.co
- jplayer www.jplayer.org
- owl carousel http://owlgraphic.com/owlcarousel/index.html
- retina www.imulus.github.io/retinajs/
- superfish www.github.com/joeldbirch/superfish/
- superslides www.github.com/nicinabox/superslides
Template PSDs and image asset source files are included within the theme's
/sources folder. These files contain the necessary elements for customizing Harbor even further.
Our Focus is to design & craft the most proficient and trustworthy themes and plugins available in the WordPress eco-system.
Our Philisophy is that each product our team builds is thoughtfully executed with a simplistic and intuitive focus, down to the last line of code.
We strive to maintain a strong symbiotic relationship with the core WordPress CMS and our team diligently updates each theme and plugin to ensure seamless update transitions. All in all, we like to keep our products well oiled and running smoothly.
Our latest premium WordPress themes. Each theme in our collection is meticulously crafted to afford the best user experience possible, for novices & developers alike.