Resonant is WordPress blog and portfolio theme. Lightweight, with attractive and modern design, it draws visitor’s attention to the content. Theme can be used for blogging, or portfolio theme.
WordPress is well-known for its ease of installation. Under most circumstances, installing WordPress is a very simple process and takes less then five minutes to complete. Many web hosts now offer tools to automatically install WordPress for you. However, we strongly recommend that you install WordPress yourself, the following guide will help http://codex.WordPress.org/Installing_WordPress.
Theme can be installed in two different ways:
- Installing through WordPress
- The traditional installation using an FTP client
Installing through WordPress
Go to your website’s WordPress dashboard, then go to Appearance -> Themes. Click on Add New, and then Upload from the navigation bar right below it. Click on Choose File, and browse your computer for resonant.zip file and click Install Now. After the installation is complete, click on Activate link.
IMPORTANT NOTE if you bought the theme from ThemeForest: Please do not upload the whole file you have downloaded. Open the file first, then find the resonant.zip file inside the WP folder – then upload only that zip file.
The traditional installation using an FTP client
First things first, you will need an FTP client (FileZilla is free, easy to use and it works on Windows, Mac and Linux) to access your web host server. Once you download Resonant, find the resonant.zip file in the WP folder. Extract it, and upload it to your server in the ..wp-content/themes/. Once it’s done, activate the theme: go to your WordPress dashboard and navigate to Appearance -> Themes, search for Resonant and click the Activate link right below it.
IMPORTANT NOTE if you bought the theme from ThemeForest: Please do not upload the whole file you have downloaded. Open the file first, then find the resonant.zip file inside the WP folder – then upload only that zip file. If you’re stuck, here’s a detailed way how to install themes.
First Steps After Theme Activation
Resonant uses the latest post reading setting. Of course, you can set the theme to display desired static page instead of posts, but you will also need to create a posts page.
Setting theme reading settings – Latest Posts landing page
Go to your website’s WordPress dashboard, then go to Settings -> Reading. Set the Front page displays option to Your latest posts. Press Save Changes.
Setting theme reading settings – Static Page landing page
Go to your website’s WordPress dashboard, then go to Pages – > Add New. Create a new page – enter a title (e.g. Home). Click on Publish. Now create another page (e.g. Blog), with the Default page template, using the same method.
When you are done, go to Settings -> Reading. and set the theme to display static page. Then select previously create pages – for Front page select your desired page (e.g. Home), and for Posts page select your page with Default page template (e.g. Blog) . The page you select for your Post page will display all blog posts. Press Save Changes.
The next important thing to do is to set your permalinks. We strongly suggest the use of pretty permalinks. Go to Settings -> Permalinks and select Post name.
Resonant advanced features
To take advantage of Resonant‘s advanced features, you have to install and activate the Jetpack plugin.
Jetpack is a free plugin developed by Automattic – the same folks who make WordPress. Jetpack has a lot of features that will make your life a lot easier:
- Custom Content Types (Custom post type – portfolio)
- Contact Form
- Tiled Galleries
- Shortcode Embeds
- Extra Sidebar Widgets
- Widget Visibility
- Infinite Scroll
- Related Posts
- Custom CSS (edited)
- SEO tools
- Google Analytics
- Site Stats
Do I have to use Jetpack?
Yes. Jetpack is a mandatory plugin for the Resonant theme. It’ll let you include a lot of handy features to your site like security, design tweaks, backups, sharing and more.
To use Jetpack, please sign up for a WordPress.com account.
How do I install Jetpack?
Before installing, make sure you have:
- The latest version of WordPress.
- A WordPress.com account. Sign up for one here.
- A web site that’s publicly accessible (not hidden/private).
The easiest way to install Jetpack is from within WordPress itself.
Log in to your site and head to your dashboard, click on the Plugins tab in the left panel, then click “Add New.” If you search for “Jetpack,” you’ll find the latest version. Install it by clicking “Install Now”. After that you’ll have to connect your WordPress.com account.
After successfully connecting to your WordPress.com account, you’ll see a list of features Jetpack offers. Most of them are automatically activated.
For more details and support with installation, visit the official Jetpack installation guide.
How do I use Jetpack in Resonant?
Jetpack has “modules” – tiny features that let your site do more things. You can see which modules Jetpack has by going into Jetpack -> Settings. They’re divided into five categories (General, Engagement and so on).
We’ve highlighted the most important modules that work great with Resonant.
Custom Content Types (Custom post type – portfolio)
The Custom Content Types module adds custom post types (CPTs) to your site. These CPTs allow you to add content that doesn’t necessarily fit into a post, but isn’t right for a static page either. Since this is part of Jetpack, you can even switch themes without losing these custom post types!
Jetpack supports a few custom post types, but the most important one for Resonant is the Portfolio custom post. The Portfolio custom post type gives you an easy way to manage and showcase projects on your site.
Enable the Portfolio custom post type by activating the Custom Content Types module in your Jetpack settings, like shown below:
Then, go to Settings → Writing in your WordPress Dashboard and check the Portfolio Projects option under “Your Custom Content Types.” You can then choose to display the portfolio using the portfolio shortcode [portfolio] or with a link to the portfolio in the menu.
A contact form is a great way to offer your readers the ability to get in touch, without giving out your personal email address.
You can add a contact form to any post or page. To get started, click the contact form icon above the post editor. Note: you can only have one contact form per page.
With the Tiled Galleries module you can display your image galleries in three new styles: a rectangular mosaic, a square mosaic, and a circular grid. The rectangular and square tiled layouts also have hover-over captions to save space while making captions accessible.
To create your Tiled Gallery:
- Make sure the module is activated in Jetpack settings.
- Create a new gallery with the “Tiles” option selected.
- Optional: To make all of your galleries tiled by default, go to Settings → Media in your blog’s dashboard and select the box next to “Display all your gallery pictures in a cool mosaic.”
Go to Jetpack -> Settings -> Appearance and turn on the Carousel module. Once on, any standard WordPress galleries you have embedded in posts or pages will launch a gorgeous full-screen photo browsing experience with comments and EXIF metadata.
Once you activate the Carousel module, you will find the settings in your Dashboard under Settings -> Media.
For more information on Carousel and its options, see the official Jetpack Carousel documentation.
A shortcode is a WordPress-specific code that lets you do nifty things with very little effort. Shortcodes can embed files or create objects that would normally require lots of complicated, ugly code in just one line. A shortcode is like a shortcut.
Shortcodes allow you to embed videos from YouTube, tweets from Twitter, and other media across the web directly in to your WordPress-powered site.
The module also allows you to embed elements by pasting URLs on a line by itself in your visual editor.
For a full list of which shortcodes Jetpack support, see the official shortcode documentation.
Extra Sidebar Widgets
The “Extra Sidebar Widgets” module includes widgets you can add to your blog. From RSS Links to Twitter Timelines and Facebook Like Boxes to social icons, this module makes it easy to add extra functionality to your site.
Once enabled the module adds the widgets, login into WordPress admin panel and go to Appearance -> Widgets.
See the full list of all Widgets added by the Extra Sidebar Widgets module.
The Widget Visibility module enables you to configure widgets to appear only on certain pages (or be hidden on certain pages) by using the Visibility panel.
Visibility is controlled by five aspects: page type, category, tag, date, and author. For example, if you wanted the Archives widget to only appear on category archives and error pages, choose “Show” from the first dropdown and then add two rules: “Page is 404 Error Page” and “Category is All Category Pages.”
You can also hide widgets based on the current page. For example, if you don’t want the Archives widget to appear on search results pages, choose “Hide” and “Page is Search Results.”
Each visibility rule is handled separately. There isn’t a way, for example, to only display a widget on posts that are categorized as “Summer” and also tagged with “Picnic.”
Instead of having to click a link to get to the next set of posts, infinite scrolling pulls the next posts automatically into view when the reader approaches the bottom of the page.
Go to Jetpack -> Settings -> Appearance, and turn on the Infinite Scroll module. Then, in your WordPress dashboard under Settings -> Reading, make sure that “Scroll Infinitely” is checked.
The Sharing module gives your readers the tools to post your content to social networks from the bottom of each post and/or page.
First, make sure that the Sharing module is on. Go to Jetpack -> Settings -> Engagement and see if Sharing is turned on. Then, go to your dashboard Navigate to Settings –> Sharing in your site’s dashboard.
Under Sharing Buttons, drag and drop the services you want to use into the Enabled Services area.
Choose your preferred button style and where you would like the buttons to appear.
Hit “Save” in the end.
You can add Captcha and have more fun with sharing. Learn how at the official Jetpack Sharing module documentation.
The Related Posts feature scans all of your posts, analyzes them, and lets you show contextual posts your visitors might be interested in reading next.
Most sites who activate this see an increase in traffic. Unlike many other related post plugins, Jetpack does all the analysis, processing, and serving from its own cloud, so there is no additional load on your server. (That’s why many plugins like YARPP or Similar Posts are often banned by web hosts, but Jetpack Related Posts are allowed.)
Go to Jetpack -> Settings -> Engagement -> Related Posts to turn this module on.
What about all the other Jetpack modules?
Feel free to use them! Resonant supports Jetpack and its modules. We’d recommend turning on any module you need, and turning off any module you don’t need (so as not to overwhelm your site).
Does Jetpack offer support?
Yes. Jetpack offers full, free support. If you have a Jetpack related problem, please contact their support agents.
Importing Demo Content
IMPORTANT: Before importing content, please make sure to install Jetpack!
One Click Demo Installation
You can make your website look exactly like a Resonant demo. This is handy if you are in a hurry and need to get your website quickly set up. Just don’t forget to change the posts and images with your own after you finish importing.
Go to your website’s WordPress dashboard, then head to Appearance -> import Sample Data.
First select the demo you want, then click Import Demo Data.
Please note the import will take a while – a lot of images and content need to be imported. Give it a few minutes.
Note: If the demo import suddenly stops, simply select same demo again, and click on Import Demo Data again. Depending from your server configuration, you might need to do this a few times.
This can be fixed by:
- Contacting your hosting provider, and asking them to increase
max_execution_timein your php.ini configuration.
- Contacting your hosting provider, and asking them to increase
- Add the s
et_time_limit(240);line to your wp-config.php file.
- Add the s
- Install the WP Maximum Execution Time Exceeded plugin.
Traditional Demo Import
Go to your Themes Kingdom account and click on the XML icon to download demo file.
After download is complete, you will need to import demo content:
- Login into your WordPress admin panel.
- Go to Tools -> Import.
- Click on the WordPress, install the plugin if you don’t already have it.
- When the plugin is opened click on the Choose File button.
- Select XML file you previously downloaded.
- Select authors to assign to posts. You may choose an existing author or create a new one.
- WordPress will then import each of the posts, pages, custom post types, comments, and categories contained in our demo version.
- Done! Very important thing to do after you are done with importing demo content is updating menus. To do that go to Appearance -> Menus. Select desired menu and under the Menu Settings at the bottom of the page check Primary Menu, then click Save Menu button to save changes.
Here’s a detailed explanation how to Import demo content.
The Customizer is great WordPress feature which allows you to customize theme and set theme options. We will not explain all options, since some of them are WordPress standard. Theme specific settings:
- Site Identity
- Content Options
- Featured Content
- Additional CSS
- Related Posts
- Font Settings
- Color Settings
- Theme Options
Site Identity allows you to set your site title, tagline and icon. Site title is the name of your site and it’s displayed in the header, where logo is displayed. Tagline is short description, or your motto, and it’s displayed just under the title. This setting is the same as in Settings -> General in WordPress admin panel.
- Logo: Upload logo for your site. Logo should be in PNG or JPEG/JPG format.
- Site title: Name of your site.
- Tagline: Site punchline.
- Display Site Title and Tagline: If enabled, both site title and tagline will be displayed. Tagline will be displayed under the title.
- Site Icon: The Site Icon is used as a browser and app icon for your site. Icons must be square, and at least 512px wide and tall.
Content options panel contains settings for meta data for single posts – both regular and portfolio.
- Author Bio: If enabled, author bio box will be displayed on single post page.
- Display date: If enabled, publishing date will be displayed on single and posts page.
- Display categories: If enabled, post categories will be displayed on single and posts page.
- Display tags: If enabled, post tags will be displayed on single and posts page.
Featured content is displayed as screen covering slider on the landing page. Five latests posts with entered tag will be displayed as featured content.
- Tag name: Enter tag related to posts which you wish to display in the slider.
- Display featured posts: Featured posts can be displayed as a film strip, larger image, or as a full-screen slider.
In our demo: http://resonant-photographer.tkdemos.com we have set page with default page template as landing page. That way no other content is displayed, but only slider. If you set static page with Portfolio template, then portfolio items will be displayed under the slider.
- Do not display tag in post details and tag clouds.: If enabled, featured content tag will not appear in post meta and/or tag cloud.
- Also display tagged posts outside the Featured Content area: If enabled content displayed in the slider will be displayed on archive pages as well.
In additional CSS section you can enter your custom CSS classes, so you don’t need to mess with original styles, or create child theme. Of course, you should create child theme if you plan to modify other files as well.
Before using this option, open single post through the customizer. Otherwise, customization options will not be displayed. Related posts are cool feature that displays suggested posts based on the same category.
- Show a headline: If enabled, suggested post headline will be displayed.
- Show thumbnails: If enabled, suggested post thumbnail will be displayed.
- Show date: If enabled, suggested post date will be displayed.
- Show context: If enabled, suggested post context – category or tag will be displayed.
- Layout: Suggested posts can be displayed as grid or as list.
Font settings allows you to set font family and font weight for headings and paragraphs.
Colors panel allows you to set header text and background colors.
Footer Settings panel is used to set footer copyright text. You can insert HTML if you need to create links, bold text and such.
Sticky header option can change behavior of the site navigation. If sticky header is enabled, it will be always visible at the top to the screen.
If disabled, header will scroll together with the page.
Layout settings have options for setting number of columns and portfolio and single post appearance.
- Portfolio archive layout: Portfolio archive can display portfolio items in two, three, four or five columns.
- Gapless layout: If enabled, images on Portfolio page will be displayed without gap between them.
- Show the portfolio title: If enabled, portfolio title will be displayed under portfolio items on Portfolio page.
Otherwise, portfolio item title will be displayed on mouse hover over single portfolio item.
- Show the portfolio type filter: If enabled, portfolio categories will be displayed above portfolio items as a filter.
- Split layout in portfolio posts: Splits portfolio posts in two sides. One side is the body of your post (text, images, etc.). The other has additional information (project credits, model names, clients, etc.)
- Split layout in regular posts: If enabled, post will be split into two sections – one side with a featured image and the other with post content.
Resonant comes with one menu location – primary, or header menu.
The Primary menu is located in theme’s header area. This menu can contain custom links, pages, categories, tags, or posts.
Creating Primary menu
Login into WordPress admin panel and go to Appearance -> Menus. Click on Create a new menu link. Enter name for your menu(e.g. Primary), and press Create Menu button. Your new menu is created. Now you can add your pages, posts, categories, tags and links to the menu. When you are done check option Primary Menu and press Save Menu button.
- Click on “create new menu” to add new menu.
- Here you should define a name for your menu, after that click on the Create Menu button right next to it.
- Select pages you want to add to your menu. When you are done with selecting pages, click on Add to menu button below. You can also add custom links, posts, categories etc. as you can see in the panels below.
- If you want to customize or delete menu item, click on the arrow icon in the top right corner of the menu box to expand it. Inside you will find:
- This menu editor allows you to create multi-level menus. To do that simply hold your left mouse button and drag desired menu items left or right. Dragging menu items slightly to the right will make them sub-menus for the menu item that is above them. You can also change the order of appearance of menu items by dragging them up or down. Remember to save the changes when you are done with editing (No4).
- Set “Primary Menu” check box to checked if you want this to be your primary menu.
Widgets are used to add content and features to your sidebar and footer. There are default WordPpress widgets and and custom widgets that come with the theme. Adding and removing widgets is quite easy, just follow the instructions below:
Login into your WordPpress admin panel and navigate to Appearance -> Widgets.
- Choose a widget you would like to use, and drag it into the sidebar to right (shown in No 3). Widgets will become active after a page refresh.
- Widget area where you place desired widgets.
- You can add, remove or customize widgets in widget areas. To do that click on the arrow icon in the top right corner of the widget box to expand it. You can also change the order of appearance by simply dragging widgets up and down.
Resonant theme have only default sidebar.
If you have enabled Widget Visibility feature from JetPack, you will be able to set widget visibility depending from post or page. Visibility works in simple if or if not logic. This means that you can set widget to be visible if some condition is, or if it’s not matched. Widget visibility options will be displayed as part of the widget.
Show widget only on contact page: Select from dropdown Show only, and then from list check box near your contact page. Save changes. This way widget will be displayed only on contact page.
Hide widget only on contact page: Select from dropdown Hide, and then from list check box near your contact page. Save changes. This way widget will be hidden only on contact page.
Resonant theme comes with several different post formats: Standard, Gallery, Video, Quote and Link.
- Post title: Name of your post. It will be displayed on the front end.
- Post content: Content of your post – text, images, shortcodes and other.
- Publish: Publish options. You can set custom date and time for publishing your post, and set post status – draft, in review or published.
- Post formats: Different post formats will display content in different way. You can choose one of the following post formats:
- Category: Each post in WordPress is filed under one or more categories. This aids in navigation and allows posts to be grouped with others of similar content.
- Tags: Tags are words that allows you to organize posts by similar content.
- Set featured image: Featured image will be used as cover image on front end.
Pages are for content such as About, Contact, etc. Pages live outside of the normal blog chronology, and are often used to present timeless information about yourself or your site — information that is always applicable. You can use Pages to organize and manage any content.
Resonant theme uses different page templates to display different information. Included page templates:
- Default Template – Default Template is multipurpose page template, without any special property.
- Portfolio Template – On page with Portfolio Template will be displayed all Portfolio items.
Portfolio is a custom post type that comes with Resonant. Portfolio posts are used to display your work on a page with a Portfolio Template. Portfolio items can be associated with Portfolio categories.
- Project name: Enter your project name.
- Project content: Content of your project – text, images, shortcodes and other.
- Publish: Publish options. You can set custom date and time for publishing your project, and set project status – draft, in review or published.
- Project Types: Types are the same as categories. Each project can be filed under one or more categories. This aids in navigation and allows projects to be grouped with others of similar content.
- Project Tags: Tags are words that allows you to organize portfolio items by similar content.
- Set featured image: Featured image will be used as cover image on front end, and displayed on single page as well.
Additional Portfolio settings
If you have enabled split layout in the customizer, you can use
code to set custom header and additional information for portfolio items.
Switch editor to Text mode, and insert this code. Between h6 tags enter portfolio item title, and between paragraph tags desired content.
Final result should be like in our example: http://resonant-agency.tkdemos.com/portfolio/aura/
If you need additional assistance for this theme, please submit a ticket in our support system.