When you purchase a Theme license and downlosad the theme package, you will receive a zipped folder titled something like themeforest-558931304-sense-a-responsive-wordpress-blog-theme.
Upon unzipping that zip file you will find the following folders inside:
- Help & Support
Withing the Upload folder There is an additional zipped file titled sense.zip.
Important: Do not unzip this file! This particular .zip file(sense-wp.zip) should remain zipped.
The easiest way to install a WordPress theme is through WordPress’s built-in Theme Install feature, follow the steps below to install your theme:
Step 1: Log in to your WordPress dashboard and go to Appearance -> Themes. At the top of the page, click the tab Add New.
Step 2: Just below the headline, you will see a link that says Upload Theme – click that.
Step 3: Click the Choose File button and find the theme .zip file (source-wp.zip) from your local machine and then click the Install Now button.
Step 4: After the theme has been successfully installed, click Activate.
Installing Recommended Plugins
Sense theme uses the following plugins for it’s demo:
Kirki: It is used to enable the theme’s customizer options, you need to Install this plugin to be able to customize the theme yourself.
Jetpack: Jetpack is an essential plugin for all WordPress installations it is designed by the WordPress’s core development team, Sense uses this plugin for showcasing the Galleries and Post Sharing Icons.
Q2W3 Fixed Widget: The sticky widget functionality in Sense’s demo is achieved using this plugin.
We have made installing the recommended plugins easy, all you have to do is click on the Begin Installing Plugins From you WordPress dashboard notification which will pop up after installing the theme and Install each of the plugins Individually or all together as shown in this GIF.
Once you have installed the plugins successfully you will be forwarded to the plugin Activate page you can follow the same process as above instead just choose the Activate Option from the Actions Dropdown like so:
If you don’t feel like starting from scratch, you can get the same layout as our demo in no time all you have to do is import the demo file we have provided you in the download files and you are done, Follow the steps below to import the theme demo.
In the folder called Demo which you get after unzipping the download packaged you recieved you will find an XML file usually saved as demo.xml
Step 1: On your WordPress dashboard in the left-hand menu, select Tools -> Import.
Step 2: Select the WordPress option. You may need to install and activate WP Importer.
Step 3: Click the Choose File button and upload the theme’s demo content XML file you located above.
Step 4: You will be given the option of choosing which author name will be assigned to the imported content you can choose that from here. Otherwise, click Submit and you’re set!
In order to find your Licence key or Purchase code, please log into your ThemeForest account and go to your Downloads page.
Once there download the license key file and you should receive a file with the following contents:
If you have followed the steps under Installing Theme & Plugins specifically installed the Kirki Toolkit plugin, you can skip this section as the customizer already is setup for you.
If you navigate to the customizer by clicking Appearance -> Customize from your WordPress Dashboard and see the message like in the image on the left, you have not installed the Kirki Plugin correctly, no worries! we have made it super easy for you to install it.
All you have to do is click the Install button as shown in the picture and then activate the plugin to be able to use the customizer properly.
It is important to have your blog running on a latest Theme version due to often bug fixes. Latest changelog can be found on a theme’s sale page on Themeforest. Before going further with updating your theme, please be sure to backup your database.
Updating the theme manually
- Once there is an update you will get an email about the same. From there you can download the latest theme files
- Unzip the downloaded zip file and look for upload/sense-wp folder
- Open your web hosting FTP and navigate to the theme folder usually at located at wp-content/themes/sense-wp.
- Replace the folder on your web hosting server with the one you downloaded from the email.
Updating the theme automatically
Automatic theme updates are handled by a third party plugin which can be downloaded here: Envato WordPress Toolkit Plugin.
Once setup, the Envato WordPress Toolkit will display a notice in your WordPress dashboard when an update is available. But first, let’s setup the plugin:
- Generate an API key in your Envato Market account to link your WordPress site to your ThemeForest account. The API Key generator will be located in your account settings.
- Install and activate the Envato WordPress Toolkit Plugin if you haven’t already.
- Click the Envato Toolkit menu item in your WordPress dashboard and enter your Envato Market username and API Key. Click Save Settings.
- BasePixels About Widget
- BasePixels Recent posts Widget
- BasePixels Infobox Widget
- Pre-footer area
- After Posts area
If a theme has an update available, you’ll be able to click to install the latest version from the toolkit area.
It is recommended to keep your theme up to date at all times so that your WordPress Installation is healthy fast and secure also to enjoy all the new goodies and features we add to the theme.
Setting up the navigation menu is really easy and is a built in feature of WordPress the following steps will guide you through the process.
Step 1: navigate to the WordPress Menu area by clicking Appearance -> Menus
Step 2: Click on create a new menu then select a menu name.
Step 3: Be sure to assign the menu to a theme location by checking the tick box. For example, set the menu as the primary menu for the header of the blog.
Step 4: Save menu
Adding Pages, Categories and Posts to the menu
On the left side of screen are a number of drop-down boxes titled Pages, Links and Categories. Each group contains available items you can add to your menu. Check the box next to the page or post you’d like to add to your menu and click Add to menu. The selected item will appear under Menu Structure.
You can drag & drop the item you’ve added to adjust its location in the menu. You can also create sub-menus the same way i.e dragging an item underneath another so that it’s indented. Make sure to save the menu after any re organization.
Sense supports One widget area called Sidebar which can be positioned left, right or completely hidden using the Theme Customizer. To add widgets to this sidebar simply drag and drop widgets from the widget dashboard under Appearence->widgets menu.
Sense also supports Three extra widget appart from the default included WordPress widgets.
Included extra widget(s) in Sense are:
BasePixels About Widget
The about widget is a handy custom widget to display information about yourself on the sidebar area of your website. We have added a few pre-defined fields to the widget to help you organize the info.
While the fields available are self-explanatory the upload image field needs some extra steps to add the image correctly.
When you click the Upload Image Button you will be prompted to select the size of the image. Once done click the Insert Into Post Button. If you want more control over the image dimensions etc. another way of adding an image is by uploading it to WordPress by heading over to the Media page under the menu Media-> Add New, once that is done copy the image URL and paste it in the same field here.
BasePixels Recent posts Widget
This widget is similar to WordPress’s default Recent Posts widget however it displays a thumbnail of the featured image along with the other details. Enter the number of latest posts you want to show in the field provided.
Currently, Sense just supports Mailchimp newsletter forms integrated into the theme however you can use any other newsletter service widgets easily.
The theme supports integrated forms in 2 places:
However, multiple newsletter widgets can be added on the sidebar and hero widget areas of the theme.
For setting up Mailchimp Signup forms follow the steps below:
Install the Mailchimp for WP plugin from your WordPress dashboard or by following this link.
Once you have installed and activated the plugin successfully. Next step is to integrate it with your mailchimp account.
Locate your mailchimp api key. Read this article for more info about where to find your api key.
Paste the api key in the plugin’s settings page and save, If you entered the correct key you will see active lists on your mailchimp account.
Now head over to the plugin’s forms section name it anything you like and paste the following code in the provided field.
<input type="text" name="FNAME" placeholder="Your Name"> <input type="email" name="EMAIL" placeholder="Your email address" required /> <input type="submit" value="Subscribe Now!" />
This should be enough to setup the 2 integrated signup forms in Sense. If you want to create a widget form like in the demo copy the form’s shortcode. Then head over to the WordPress’s widgets section and create a text widget. There paste the copied shortcode and that’s it! Check out the following gif for more info.
Sense like all our themes uses the social media icons provided by Jetpack Plugin. Follow the steps above to install and activate Jetpack. Once that is done setting up all the social icons is just a breeze.
To display the top navigation social media icons just navigate to the WordPress dashboard’s menu section and create a new menu then assign it to the social media menu location by navigating to Manage Locations section of the menu page.
If everything is done correctly, just create new menu items and paste your social media links as menu items. That’s it WordPress will automatically generate the respective icons for you.
Sense has built-in styles to make your content look pretty and get your point across in a clean fashion. All basic elements are styled to match the theme design.
If you have imported the theme demo content, the imported page called Style Guide is a great starting point to use the elements and add your own content to it.
we have also added a few extra elements to help you display your content which are:
- Pull Quotes
- Syntax Highlighting
columns are great when you want a left-right split on your content. To add 2 columns simply paste the following code and add your content to it.
<div class="grid-row"> <div class="two-columns"> <h4>Left Column</h4> <p>Adding a two column split layout has never been more simple than with the easy to use snippet provided with this theme.</p> </div> <div class="two-columns"> <h4>Right Column</h4> <p>Adding a two column split layout has never been more simple than with the easy to use snippet provided with this theme.</p> </div> </div>
Pull Quote is a brief, attention-catching quotation taken from the main text of an article and used as a subheading or graphic feature.You can add it easily in your content by adding a class pullquote-left or pullquote-right something like this for left pullquote:
and this for right pullquote:
Highlights can be used to draw special attention to an important part of your content, using highlights is really easy all you have to do is wrap the text/content in a span tag a class of highlight like so:
Sense has a script included with it which helps in displaying your code syntax highlighted for better readability.
We have included the okaidia prism theme and the support for languages including but not limited to:
To use the syntax highlighter just copy paste the following code replacing the class with the name of your desired coding language.
if you want to change the syntax highlight theme or add support for more languages just regenerate a new script by visiting prismjs website and including it in your child theme’s functions.php file. If you are not able to do it yourself, we will be more than happy to help you out just drop us a line using our contact us page.
Sense theme includes an extensive theme customizer that allows you to easily change the look and feel of your site and see your changes in real time before actually applying them to the live site which can come really handy when you want to test drive certain changes. This section will cover the various settings included in the customizer.
You can access the customizer by visiting Appearance -> Customize .
Sense includes the following customizer settings:
Colors & Styling
These settings include all the colors used in the theme usually Primary Color, Various Background Colors, Border Colors etc.
Typography being one of the most important aspects of a theme we have added a lot of options to customize every small detail of the typography used in the theme. You can select from 800+ Google Fonts easily with just the click of a button.
The body field setting includes options to change the Font Family, Variant, Font Size etc.
The default unit for font size is rem which is recommended to make your site look perfect on all devices. However, it can be changed to any other unit like px or em etc.
We have also provided options to chose Font Subsets which will help you choose which font glyphs you want to load and save file size and improve page loading speeds. Read this article for more info.
Sense includes options for setting different font family and/or styles to different heading elements. The fields for each individual heading item work the exact same way as for the body font picker above.
Note: Try not to change font sizes for different heading elements unless absoluetely necessary for your content as we already define a good ratio for the heading size defaults for all themes
Header & Logo Options
Logo: Upload the regular sized logo image file here preferably .png. Also while uploading take a note of the width of this logo image file, it will be used in one of the following fields.
Retina Logo: We have added scripts and styles which will automatically use this logo image file in case of devices with high dpi screens. Make sure the logo image file you are uploading to this field is 2x the size of the original file you uploaded in the previous field.
Logo Width: Here add the pixel width of the original logo image file you uploaded to the Logo field. No need to enter any unit values px will automatically be added to the value. So If the logo dimentions you uploaded are 200×100, put the value 200 to this field.
Fields relating to changing the layout of the theme are included under this setting. Under this field there is an option to change the sidebar positioning or hide it completely.
If you want to remove the sidebar on a single page and not the whole website, Sense includes a custom page template called Full Width Page Which you can chose while creating a new page.
The Footer option panel includes a field to change the copywrite text of the website. We request you to keep this setting as it is unless absolutely necessary. We love backlinks back to our work 🙂
Sense includes a handy field to easily integrate Google Analytics with your website. Just paste in your Google Analytics tracking ID and you are good to go!
The tracking ID is a string like UA-000000-01. To know where to find this ID from Google read this article.
This field includes options and settings to change the content added to the 404 Page. While we have hard-coded the layout of the page, these settings will help you customize most of the content inside the page.
We have included .pot files inside the theme download package under the Languages folder.You can refer to this article for a step by step resource to aid you in translating the theme using poedit. While we provide resources to help you translate the theme easily, We do not provide any support for translating themes.
While asking for support or trying to change any layout/style of the you will ocassionally have to dive in to edit the CSS of the theme to achieve your desired style changes.
It is not advisable to change the theme’s core files since they will be overwritten when an update happens. Alternatively you can use JetPack’s custom CSS addition which provides a very handy set of tools to add custom css to your website among others.
If Jetpack does not solve your purpose, there are many plugins in the WordPress’s plugin repository which provide custom CSS fields for you to easily paste custom CSS code in.
We offer Theme Install Services and Theme Customization Services as well! all you have to do is send us a message with your requirements using the form here.
Thank you for checkout out Sense!