Introduction

Thank you

Divinity is packed with awesome features we hope you enjoy using it to create your website. Please read this documentation before you get started.

The following documentation will provide you with lots of detailed information about how to customise the Divinity theme to your needs. Divinity can only be used with WordPress and we assume that you already have WordPress installed on an online server.

Thank You

For purchasing the Divinity theme!

Requirements

We highly recommend running the latest version of WordPress. The minimum requirement is version 4.3. Make sure that your server meets the minimum requirements to run WordPress as well.

License

All licenses on the Envato Market sites are for a single use. If you are going to use Divinity on one domain, or multiple subdomains, you will only require one License. If you are going to use Divinity on multiple domains, then you will need to purchase a separate License for each domain.

Downloading

Download from Themeforest

  1. Log In To Themeforest First of all you will need to log in to your Themeforest account. Then click on your username at the top of the themeforest page and select Downloads from the dropdown menu.
  2. Themeforest Download Page From there locate the Divinity template in the download list and click the download button. From the drop down menu then select All files & documentation and choose a location on your computer to download the zip file to.

Unzipping the theme

  1. Zip File You should now have a file that looks something like this.
  2. Unzip The Zip File In order to get at the goodness inside you will need to unzip this file. To do this you will need to use suitable zip software for your operating system.
  3. Zip Contents Once you have unzipped the Divinity zip file you will find the following folders have been created.
Folder / File Description
docs/ Contains theme's documentation
licensing/ theme licence files
psds/ all the themes layered PSD files for Adobe Photoshop
Divinity.zip the WordPress theme zip file ( for installation into WordPress )
Divinity-child.zip the WordPress Child theme zip file

Installation

Installing the theme via WordPress

  1. Login to the WordPress administration panel
  2. Go to Appearance -> Themes
  3. Click the Install Themes tab
  4. Click the Upload link at the top of the page
  5. Click the choose file button in the Install a theme in .zip format box
  6. Browse for the theme zip inside the theme folder and click Install Now.
  7. The Installed Theme from uploaded file will display the results of the installation.
  8. Once you have uploaded the theme, you need to activate it by going to Appearance -> Themes, and activate Divinity.

Installing the theme via FTP

  1. Connect to your website host, using some of many FTP clients, for example FileZilla.
  2. Go to your default WordPress themes folder, and upload Divinity into that folder. Properly uploaded theme should have path like this : ../wp-content/themes/divinity
  3. Once you have uploaded the theme, you need to activate it by going to Appearance -> Themes, and activate Divinity.

Installing the theme plugins

To install the theme plugins you need to do the following:

  1. Admin Panel Login to the WordPress admin panel.
  2. Install Plugins Page Go to Appearance->Install Plugins.
  3. Installing the Plugins From the list of the available plugins, spot the plugin that you wish to install and click on install. After installation is complete, click on the Return to Required Plugins Installer link.
  4. Activate From the list of plugins spot the plugin that you just installed and activate it by clicking on activate.
The following plugins are required for Divinity to work:
  • Divinity Plugin
  • Visual Composer
It is not essential to install all plugins that come with the theme, just the ones you need to make your site.

Demo Content

Installing demos

To install a demo content site you need to do the following:

  1. Admin Panel Login to the WordPress admin panel.
  2. One Click Demos Go to One Click Demos from the side admin bar.
  3. Pick a Demo Choose a demo content site to install and then click the View Details Button.
  4. Required plugins Make sure you have all the required plugins installed for the demo content installer to continue. If you have any red x marks in the required plugins section click the Install Plugins button and install the required plugins.
  5. Installing Click the blue Install button.
  6. Pre Install Checklist If you have any errors in the pre install check list look at the troubleshooting section. If not, click the Install the package button.
  7. Waiting to install Wait for the demo content installer to install all the demo content.

Removing a demo

WARNING! This will remove all the pages / posts / widgets / menus / stacks that were installed by the demo content installer. All content will be removed / even pages you may have edited

To remove a demo content site you need to do the following:

  1. Admin Panel Login to the WordPress admin panel.
  2. One Click Demos Go to One Click Demos from the side admin bar.
  3. Installed Demo Note one of the demo content packages is marked as installed. Click the view details button for this package.
  4. Remove Button Click the remove button in the bottom right corner of the popup window.
  5. Are You Sure Read the instructions carefully and if you are positive you want to revert your site back to its original state click the I'm sure button.

Updating

Make sure that you have made a full backup of your WordPress files and database before updating, on the off chance that something goes wrong. Check out a useful article by WordPress on how to back up your website, or a list of backup plugins recently provided as an easy solution by wpbeginner.com

Updating the theme

Envato Market Plugin

The Envato Market plugin can install WordPress themes and plugins purchased from ThemeForest & CodeCanyon by connecting with the Envato Market API using a secure OAuth personal token. Once your themes & plugins are installed, WordPress will periodically check for updates, so keeping your items up to date is as simple as a few clicks.
If you don't have an API token you can create one here.

Here are step by step instructions on how to update your theme using the Envato Market plugin

  1. Admin Panel Login to the WordPress admin panel.
  2. Install Plugins Page Go to Appearance->Install Plugins.
  3. Install Install and Activate the Envato Market Plugin.
  4. Envato Market Click on the Envato Market menu on the admin sidebar.
  5. API Token Paste your token in the Token field of the Envato Market menu. Click on Save Changes.
  6. Check for Updates To check for available updates, go to Appearance->Themes and hover over the main Divinity theme. If an update is available, click on the Update Now link.

Manual Update

If you are having problems using the Envato Market Plugin try updating the theme manually

  1. Admin Panel Login to the WordPress admin panel.
  2. Themeforest Go to the Themeforest Marketplace
  3. Download From the Downloads section click on the Download button and pick the Installable WordPress file only download. Go to the Downloading The Theme section to see more on how to download Divinity.
  4. Change Theme Go to Appearance->Themes and select Activate on another theme.
  5. Delete the current Divinity version Hover over the Divinity screenshot and click the Theme Details button. Click the Delete button in the bottom right hand corner of the popup. Now your current Divinity theme is deleted. Don't worry, you will not lose any of your work.
  6. Upload the updated theme version To upload the updated theme version, from Appearance->Themes click on the Add New button on top of that page.
  7. Upload Theme Click on the Upload Theme button
  8. Choose File Click on the Choose File button and pick the .zip file that you downloaded from Step 1.
  9. Activate Once the upload is complete, activate the theme from Appearance->Themes and you are done!

Updating the plugins

Here are step by step instructions on how to update your plugins

  1. Admin Panel Login to the WordPress admin panel.
  2. Install Plugins Page Go to Appearance->Install Plugins.
  3. Updating the Plugins From the list of the available plugins, spot the plugin that you wish to update and click on update. After installation is complete, click on the Return to Required Plugins Installer link.
  4. Updated Plugin should be updated if you see the Plugin updated successfully and Plugin reactivated successfully notices

The WP Customizer

How to start the customizer

In order to navigate to the customizer options when you are viewing a page, you just need to click on the Customize link at the top of the page, on the admin bar of WordPress.

customizer

Customizer Options

General Options

When you are at the Customizer view, you should see all the available options on the left side of the screen. The cool thing about the customizer is that all the changes that you make to the options are immediately applied to your page. That way you can get an immediate view of what your website will look like if you apply the selected options, without saving and refreshing!

Page Specific Options

While you are on the customizer view, you can navigate through your pages as if you were in the normal view. As you do so, you will notice that new options might appear on the customizer menu, if specific options exist for the page that you are currently on. For example, when you visit the single post page, you should see a new options panel named Blog - Single Post appear. This will only remain there for as long as you stay on the single post page.

customizer

Similar panels appear on these cases

  • Blog-List Appears on the Blog list page.

  • Blog Background, Blog Header Appear on all Blog pages.

  • Sermons - List Header, Sermons - Background Appear on all Sermon pages.

  • Sermons - Single Sermon Appears on the single sermon page.

  • Events - Background Appears on all Event pages.

Navigation

To set the site logo, you need to open the Customizer and expand the Navigation panel. These options should now be visible:

  • Logo Text : Add your logo text here
  • Logo Image : Upload an image to use as the sites logo

Divinity comes with a variety of menu types to choose from

Logo right menu left

header

Logo left menu right

header

Logo center menu left and right

header

Logo top left and menu below

header

Logo top right and menu below

header

Logo center and menu below

header

Setting the menu

Change the menu type

To set the appropriate menu layout, you need to go to Appearance->Customize and expand the Navigation panel. The Menu Layout option sets the menu type:

header

Change the menu style

To set the appropriate menu style, you need to go to Appearance->Customize and expand the Navigation panel. The Menu Style option offers the options below:

  • Regular : Places the menu above the page content header

  • Floating : A unique style of menu that floats above the content header

  • Transparent : Creates a transparent menu that sits on top of the page content header

If you are using a transparent or floating menu style, make sure that you add some padding to the first section of your pages as those menu types overlap with the page content.

Change the menu positioning

To set the appropriate position for your menu, you need to go to Appearance->Customize and expand the Navigation panel. The Sticky Menu option offers the options below:

  • On : Makes the menu stick to the top of the page when you scroll
  • Off : The menu stays on the top of the page when you scroll

Change the menu click behavior

To set the appropriate menu click behavior for your menu, you need to go to Appearance->Customize and expand the Navigation panel. The Menu Items Click Type option offers the options below:

  • Menu links are activated on click : Submenus will open when you click
  • Menu links are activated on hover : Submenus will open when you hover
Mobile devices will always use click

Change the menu width

To set the appropriate menu width for your menu, you need to go to Appearance->Customize and expand the Navigation panel. The Menu Width option offers the options below:

  • Padded : Adds padding to the menu
  • Full width : Menu is full width

Split menus

If your Menu Layout is set to Logo center menu left & right, which means that your logo will split your menu in half, you need to create two separate menus, one to be rendered at left of the logo and one at the right. There are two locations for your menus that you can use, Primary Navigation and Secondary Navigation. You can see those locations when you edit a menu in Appearance->Menus, at the bottom of the screen.

You can set the logo width from the Logo Width option from your stack options.

header

Primary Navigation corresponds to the menu that will render on the left of the logo whereas Secondary Navigation will render to the right of the logo.

For the rest of the available menu types, only the Primary Navigation is required.

Layout

Set the default content padding

All pages can have default bottom and top padding. This affects Blog pages, Event pages and Sermon pages. Pages that the user has created with Visual Composer will not get the default padding.

To set the default content padding you should do the following:

  1. Go to Appearance->Customize and expand the Layout panel.
  2. To set the top padding use the Content Top Padding option.
  3. To set the bottom padding use the Content Bottom Padding option.
  4. Hit Save & Publish.

content padding

content padding

Blog

Blog List

To change the Blog List options you need to do the following:

  1. Go to the Blog List page.
  2. Open the customizer.

The following options are available

Change the blog list layout

To set the blog layout, you need to go to Appearance->Customize and expand the Blog - List Page panel. The Blog Layout option offers the options below:

  • Right Sidebar : Adds a sidebar to the right of your blog
  • Left Sidebar : Adds a sidebar to the left of your blog
  • Full Width Narrow : The blog list narrow view
  • Full Width Wide : The blog list full width view

Change the blog list style

To set the blog list style, you need to go to Appearance->Customize and expand the Blog - List Page panel. The Post Card Style option offers the options below:

  • Big Padding : Adds extra padding to the post cards on the Blog list page
  • Regular Padding : Renders the regular padding for the post cards

Set the blog background image

To set a background image for the blog you need to go to Appearance->Customize and expand the Blog - Background panel. Available options are:

  • Background Image : Upload an image to use as background image on all blog pages
  • Background Image Size - Mobile : Sets the height & width that your background image will take up on mobile
  • Background Image Size - Tablet : Sets the height & width that your background image will take up on tablet
  • Background Image Size - Desktop : Sets the height & width that your background image will take up on desktop
  • Background Image Position : Sets the position of the background image
  • Background Image Opacity : Sets the opacity of the background image
  • Background Image Parallax : Enables parallax scrolling effect for background image

More blog list options

To further customize your blog list page you need to go to Appearance->Customize and expand the Blog - List Page panel. Available options are:

  • Post Heading Size : Sets the font size of the title at the top of the post card in the blog list pages
  • Show Author : Shows/Hides the author name below post title on the blog list page
  • Show Categories : Shows/Hides the category text below post title on the blog list posts
  • Show Date : Shows/Hides the date text below post title on the blog list posts
  • Show Tags : Shows/Hides the tag list in post footer on the blog list posts
  • Read More Link : Choose where the read more link is displayed in the blog list posts

Blog Post

To change the Blog Post options you need to do the following:

  1. Go to a single post page.
  2. Open the customizer.

The following options are available

Change the single post layout

To set the single post layout, you need to go to Appearance->Customize and expand the Blog - Single Post panel. The Post Layout option offers the options below:

  • Right Sidebar : Adds a sidebar to the right of your blog
  • Left Sidebar : Adds a sidebar to the left of your blog
  • Full Width : The blog list full width view

Change the blog post style

To set the blog post style, you need to go to Appearance->Customize and expand the Blog - Single Post panel. The Post Card Style option offers the options below:

  • Big Padding : Adds extra padding to the post card
  • Regular Padding : Renders the regular padding for the post card

More blog list options

To further customize your single post page you need to go to Appearance->Customize and expand the Blog - Single Post panel. Available options are:

  • Post Heading Size : Sets the font size of the title at the top of the post card in the single post page
  • Show Author : Shows/Hides the author name below post title in the single post page
  • Show Categories : Shows/Hides the category text below post title in the single post page
  • Show Date : Shows/Hides the date text below post title in the single post page
  • Show Tags : Shows/Hides the tag list in post footer in the single post page
  • Show Social Sharing : Shows/Hides the social sharing options in post footer on the single post page
  • Social Networks : List of social networks to show in the post footer social sharing on the single post page
  • Show Next Previous Posts : Shows/hides the next and previous post lists after the post content on the single post page
  • Show Author Bio : Shows/hides the posts author biography details below the post content on the single post page
  • Show Author Bio Avatar : Shows/hides the authors avatar inside the author bio section on the single post page
  • Show Related Posts : Shows/hides the related posts below the post content on the single post page
  • Related Posts Columns : Sets the number of columns that the related posts are put into on the single post page
  • Related Posts Count : Sets the number of related posts to show on the single post page

Events

Divinity supports the Event custom post type originating from the The Events Calendar plugin. To enable events on your website, make sure that you install the above plugin from Appearance->Install Plugins

Install Events Plugin

To install The Events Calendar plugin you need to do the following:

  1. Go to Appearance->Install Plugins and locate the plugin from the list of plugins.
  2. Click on the Install link below the plugin name.
  3. Go to Appearance->Install Plugins and locate the plugin from the list of plugins.
  4. Click on the Activate link below the plugin name to activate.

Setup Events plugin

To make sure that the Events Calendar plugin runs smoothly with the theme you need to make sure that you do the following:

Set the default stylesheet

  1. Go to Events->Settings
  2. Hit the Display tab
  3. Look at the first option on that view. It should be Default stylesheet used for events templates. Make sure that it is set to Skeleton Styles. This minimizes the CSS loaded by the plugin and uses the theme CSS purposefully created for the plugin.

Load the Default Events Template

  1. Go to Events->Settings
  2. Hit the Display tab
  3. Look at the second option on that view. It should be Events template. Make sure that it is set to Default Events Template. This wraps the content around the necessary markup so that it matches the theme's look

Customizing events pages

To customize the Events pages you need to edit the related options from the customizer. For those options to appear, you need to be on the Events page(list or single) in the customizer view, as described in the Page Specific Options section.

Set the event pages background image

To set a background image for the event pages you need to go to Appearance->Customize and expand the Events - Background panel. Available options are:

  • Background Image : Upload an image to use as background image on all event pages
  • Background Image Size - Mobile : Sets the height & width that your background image will take up on mobile
  • Background Image Size - Tablet : Sets the height & width that your background image will take up on tablet
  • Background Image Size - Desktop : Sets the height & width that your background image will take up on desktop
  • Background Image Position : Sets the position of the background image
  • Background Image Opacity : Sets the opacity of the background image
  • Background Image Parallax : Enables parallax scrolling effect for background image

Events Management

The Events Calendar plugin is an external plugin that Divinity uses to create the events. There is a wide variety of settings that you can set to make the plugin function as you wish. To find out how the plugin works, you need to check out the plugin's documentation.

Visit The Events Calendar documentation here

Divinity is also compatible with the Events Calendar PRO plugin that offers more options and styles to show your events, such as the Week View, Map View and Photo View, Recurring Events, Location Search, Venue & Organizer View, Advanced Widgets and Additional Fields. The Events Calendar PRO plugin is a paid plugin that completes The Events Calendar plugin. To find out how the plugin works, you need to check out the plugin's documentation.

Visit The Events Calendar PRO documentation here
You can purchase The Events Calendar PRO documentation here

Sermons

Divinity supports the Sermon custom post type originating from the Divinity Sermons plugin. To enable sermons on your website, make sure that you install the above plugin from Appearance->Install Plugins

Install Sermons Plugin

To install Divinity Sermons plugin you need to do the following:

  1. Go to Appearance->Install Plugins and locate the plugin from the list of plugins.
  2. Click on the Install link below the plugin name.
  3. Go to Appearance->Install Plugins and locate the plugin from the list of plugins.
  4. Click on the Activate link below the plugin name to activate.

Creating a Sermon

The Sermons menu option on the left is where you add sermons. To add a new sermon, select the Sermons -> Add New option from the left hand WordPress menu. When you create a new sermon, you need to setup a few more options.

  • Sermon Media : Set the media that the sermon will show on the sermons list page and single sermon page. header

  • Featured Image : Set the featured image for the single sermon page

  • Sermon Preacher : Assign a preacher to the sermon. The featured image of the preacher will be used in the sermons list view. See Creating a Preacher section on how to create a preacher.
  • Topics : Set the topics for the sermon, think of topics as tags. Related sermons section on the single sermon page view makes use of topics.
  • Books : Set the books that the sermon will refer to in the subtitle of single sermon view header

Creating a Preacher

The Sermons->Preachers menu option on the left is where you add preachers. To add a new preacher, go to Sermons -> Preachers option from the left hand WordPress menu. Hit the Add New button at the top to add a new preacher. When you create a new preacher, you need to setup a few more options.

  • Preacher Social Links : Set the social links that will show at the footer of the preacher card on the single preacher page.
  • Featured Image : Set the featured image for the single preacher page. This image will also get used in the sermons list page for the sermons that have been assigned with the respective preacher.

Sermon URL Options

To set the urls used by the sermons plugin to create sermons, preachers, etc., go to Sermons -> Urls option from the left hand WordPress menu. Fill in the options on that page to set the url slug to use for your sermon related pages.

Stacks

About Stacks

Divinity allows you to create stacks that alter the look of your site. You can create unlimited stacks, and switch your site from one stack to another easily with the customizer. The stack will define all aspects of your site's looks.

Setting the Site Colors

Divinity allows you to create stacks that alter the look of your site. You can create unlimited stacks, and switch your site from one stack to another easily with the customizer. The stack will define all aspects of your site's looks.

In order to set the site colors, you need to edit your stack from Stacks->All Stacks. Check out all the color picker options that are available and set your own colors.

  • Body Background Color: Body tag background color.
  • Font Color: Body tag font color.
  • Muted Font Color: Site font color when text muted class used.
  • Light Font Color: Color to use for text when text-light class added.
  • Heading Font Color: Heading font color.
  • Link Color: Anchor link color.
  • Link Hover Color: Anchor link hover color.
  • Menu Background Color: Background color of the top menu.
  • Menu Link Color: Links in the menu will use this color.
  • Menu Link Hover Color: Links in the menu will use this color when hovered over.
  • Menu Link Active Color: Links in the menu will use this color when the page is active.
  • Menu Item Hover Border Color: Sets the color of the border that appears above a menu item when you hover on it.
  • Brand Text Color: Sets the color of the text logo.
  • Dropdown Menu Background Color: Sets the background color of the menu dropdowns.
  • Dropdown Link Text Color: Sets the text color of menu links in the dropdowns.
  • Dropdown Link Hover Color: Sets the color of the menu links in the dropdowns when you hover.
  • Dropdown Link Hover Text Color: Sets the color of the menu links in the dropdowns when you hover.
  • Dropdown Link Hover Background Color: Sets the background color of the menu links in the dropdowns when you hover.
  • Dropdown Link Active Text Color: Sets the color of the menu links in the dropdowns when page is active.
  • Dropdown Link Active Background Color: Sets the background color of the menu links in the dropdowns when page is active.
  • Transparent Text Color: Sets the color of the menu links when the menu is transparent at the top of the page.
  • Transparent Text Hover Color: Sets the hover color of the menu links when the menu is transparent at the top of the page.
  • Transparent Text Active Color: Sets the active color of the menu links when the menu is transparent at the top of the page.
  • Blockquote citation text color: Sets the color of the small citation text.
  • Buttons: A set of options where you set the colors for all the contextual buttons.
  • Forms: A set of options where you set the colors for all the form inputs.
  • Sub Footer: A set of options where you set the colors for the sub footer.
  • Footer: A set of options where you set the colors for the footer.
  • Widget Background Color: Sets the background color of widgets in the sidebar.
  • Widget Border Color: Sets the border color of widgets in the sidebar.
  • Card Background Color: Sets the background color of cards.
  • Card Border Color: Sets the border color of cards.
  • Card Footer Background Color: Sets the footer background color of cards.
  • Alerts: A set of options where you set the colors for all alert boxes.
  • List Group Background Color: Sets the background color of a bootstrap list group.
  • List Group Border Color: Sets the border color of a bootstrap list group.
  • List Group Hover Background Color: Sets the border color of a bootstrap list group.
  • Countdown: A set of options where you set the colors for the countdown shortcode.
  • Progress Bars: A set of options where you set the colors for the progress bars.
  • Pagination: A set of options where you set the colors for the pagination.
  • Popovers: A set of options where you set the colors for the popovers.
  • Tooltips: A set of options where you set the colors for the tooltips.
  • Tables: A set of options where you set the colors for the tables.
  • Panels: A set of options where you set the colors for the panels.
  • Tabs: A set of options where you set the colors for the tabs.
  • Magnific Popup: A set of options where you set the colors for the popups.
  • Go To Top Button: A set of options where you set the colors for the go to top button.
  • Horizontal Divider Color: Sets the horizontal divider color.

Default Stack

Divinity comes with a default styling that you can get started with right away which does not require creating a stack. If you want to change the look and feel of your website follow the instructions below to create your own stack.

Creating a Stack

To create a stack you should do the following:

  1. Go to the Stacks menu on the left hand WordPress menu and click on Add New.
  2. Modify the options of the stack.
  3. Save your stack.

Modifying a stack

To modify your stack you should do the following:

  1. Go to the Stacks menu on the left hand WordPress menu and click on All Stacks.
  2. Click on the stack that you want to modify.
  3. Modify the options of the stack.
  4. Save your stack.

Deleting a stack

To delete a stack you should do the following:

  1. Go to the Stacks menu on the left hand WordPress menu and click on All Stacks.
  2. Under the name of the stack, click on the Thrash link.
  3. To remove the stack permanently, go to Stacks -> All Stacks. Click on the Thrash link. Click on the Delete Permanently link below the name of the stack.

Setting the current site stack

To set the current site stack you should do the following:

  1. Go to the customizer from Appearance -> Customize.
  2. From the menu accordions on the left, click on Stack.
  3. Select a stack from the dropdown option Current Stack
  4. Hit Save. Current Skin

How the Stack Css gets loaded

To set how the stack CSS gets loaded you should do the following:

  1. Go to Stacks -> Options.
  2. If you want the stack CSS to get injected in the header(not recommended), set the Load CSS from option to Header. If you want to create a single file that will include all the stack CSS and load it in the header set the Load CSS from option to File.
  3. Hit Save Changes.

Pages

Visual Composer

Divinity uses WPBakery Visual Composer to easily allow you to create stunning sites. We recommend installing the Visual Composer plugin if you are creating complex pages like in our demo sites.

Creating a page

The Pages menu option on the left is where you add pages. To add a new page, select the Pages -> Add New option from the left hand WordPress menu. After typing your page's title you can select the page template and start adding your content.
Divinity comes bundled with Visual composer. Visual Composer is the most famous drag and drop page builder. You can take full control over your WordPress site, build any layout you can imagine without any programming knowledge required.

In order to enable visual composer, make sure you click on the button below the title, switching to backend editor mode.

Page options

Setting the Page Layout

To set the layout of a page, you need to do the following:

  1. Edit Page Edit the page from Pages->All Pages.
  2. Page Attributes Look at the Page Attributes metabox below the Update button.
  3. Template Pick the template that you wish from the Template dropdown option. Available options are
  • Default Template : The default page template without a sidebar
  • Right Sidebar : Adds a sidebar to the right of your page
  • Left Sidebar : Adds a sidebar to the left of your page

Setting a Page Header

To set a header for a page, the user needs to create a section at the top of the page and add the header contents inside. That way it is easier to customize the header as the user can use Visual Composer to create custom headers for his pages.

If you are using a transparent or floating menu style, make sure that you add some padding to the header section as those menu types overlap with the page content.

Creating a one page website

In Divinity theme it is easy to create a one page template version. All you have to do is create sections and assign a unique id to each.

To assign an id to a section you need to do the following:

  1. Edit your page Go to Pages->All Pages and edit the desired page.
  2. Edit section settings Edit your section settings and look for the Section ID field. Type the section id inside.
  3. Repeat Repeat step 2 for all the sections that you want your menu items to scroll to, assigning unique id's on each one.
  4. Save Save your page.

Now you need to create your menu using custom links that point to the sections you just created. To do so you need to do the following:

  1. Create a menu Create your menu from Appearance->Menus.
  2. Custom Links Add a custom link menu item to your menu and expand its options.
  3. URL The URL option should be the website url followed by #sectionid, where 'sectionid' should be the id of the section that you want to scroll to when you click on the item. .
  4. Repeat Repeat step 2 and step 3 to set all your menu items.
  5. Primary Menu Check the Primary Navigation checkbox at the bottom of that page to make your menu work as your primary menu.
  6. Save Save your menu.

Creating a section

To create a new section on a page you need to do the following:

  1. Edit your page Go to Pages->All Pages and edit the desired page.
  2. Add Element Click on the Add Element button if your page has no content , or the big plus button if you want to add a section to a page that already has content.
  3. Add section From the list of elements, select the Section element(important).
  4. Add row Click on the plus icon inside the added section and add a Row element. Notice that the row element is the only element that can be added in a section.
  5. Content Click on the plus icon inside the added row and add any elements that you want to create your section's content.
Pay extra attention to step 3 as if you don't add a section there but any another element, Visual Composer adds a Row by default, not a section, which will not apply the proper markup for the section, resulting in wrong styling.

Setting a background image to a section

To set a background image to a section you need to do the following:

  1. Edit your page Go to Pages->All Pages and edit the desired page.
  2. Edit section settings Edit your section settings and look for the Use Image Background? field. Click on the checkbox to enable it. New options will show once enabled.
  3. Background Image Set a background image for that section using the Background Image option
  4. Background image options Set the rest of the options for the background image. These are
  • Background Image Size - Mobile: Sets the height & width that your background image will take up on mobile.
  • Background Image Size - Tablet: Sets the height & width that your background image will take up on tablet.
  • Background Image Size - Desktop: Sets the height & width that your background image will take up on desktop.
  • Background Image Position: Sets the position of the background image.
  • Background Image Opacity: Sets the opacity of the background image (between 0 and 1).
  • Parallax Effect: If image background will use parallax effect.

Creating a page with a background image

To create a page with a background image you need to do the following:

  1. Edit your page Go to Pages->All Pages and edit the desired page.
  2. Create a section Create a section as described in the Creating a section section.
  3. Background Image Set a background image for that section as described in the Setting a background image to a section section.
  4. Add rows Add as many rows as you want to the added section and place the page content inside. Keep in mind that the background image is applied to the section so it will affect only the rows that are set inside that section.

Adding margins to elements

Divinity makes use of Visual Composer's Design Options tab to apply extra styling to all elements. To apply margins or paddings to an element you need to do the following:

  1. Edit your element Locate the element on your page and edit its settings.
  2. Design Options From the popup that will appear, click on the Design options tab. From there you can set several options that will only apply for that element.
  3. Set Margins/Paddings On the left side of the popup view, in the CSS Box, fill in the boxes with numbers representing the pixels that you want to set the margins and paddings to for that element.
  4. Save Save your changes and update the page for the changes to take effect.

Using the theme shortcodes

Divinity allows the user to use both the theme's and Visual Composer's shortcodes. To separate them we have created a Divinity tab when you view the list of shortcodes that lists only the theme shortcodes.

divinity shortcodes

How to create Cards

Divinity has two card elements that you can use, Vertical Card and Horizontal Card.

To create a card you need to do the following:

  1. Edit your page Go to Pages->All Pages and edit the desired page.
  2. Create a section Create a section as described in the Creating a section section.
  3. Add a row Add a row to your section in which you will add your card or add it in an existing row.
  4. Divinity elements Click on the icon in your row and from the popup click on the Divinity tab to get the list of the theme's shortcode.
  5. Select Card element From the list of available elements, pick either the vertical or the horizontal card, depending on the layout that you want to achieve.
  6. Add image To add an image to the card, edit the card settings and set the Image option from the list of options. Fill in the rest of the options to customize the card.
  7. To add content to your card, click on the icon in the card container as you would for a row.

Setting a 404 Page

In Divinity you can create a page and set it to be your 404 page. To do that go to Appearance->Divinity. Locate the 404 Page section and set the 404 Page option to use the page that you want to serve as your 404 page.

404

Footer

To set the site footer, you need to open the Customizer and expand the Footer panel. These options should now be visible:

  • Footer Columns: Select the number of columns for the footer.
  • Background Image: Upload an image to use as background image on the footer.
  • Background Image Parallax: Enables the parallax effect for the background image.
  • Footer Top Padding: Sets the amount of padding to add to the top of the footer.
  • Footer Bottom Padding: Sets the amount of padding to add to the bottom of the footer.
  • Extra Classes: Extra classes for the footer

To set the site sub footer, you need to open the Customizer and expand the Sub Footer panel. Set the single option:

  • Sub Footer Columns: Select the number of columns for the footer.

To add widgets to your footer, you need to open the Customizer and expand the Widgets panel. You can do so also from Appearance->Widgets.

Footer widgets

To add widgets to your footer, do the following

  1. Go to Appearance->Customize in the WordPress Administration Screens.
  2. Click the Widget menu in the Theme Customizer to access to the Widget Customize Screen.
  3. Click the down arrow of footer areas to list the already registered Widgets.
  4. Click a widget you want to add. The widgets should be added in the footer.
  5. Preview your site and you should see the content from your new Widget.
  6. To arrange the Widgets within the footer, drag and drop the widgets in the order you want or click Reorder link and click up arrow and down allow of each widget. Click Done after the arrange operation.
  7. To customize the Widget features, click the down arrow in the right to expand the Widget's interface.
  8. To remove the widget, click Remove from Widget's interface in above step.
For more info on WordPress widgets, visit the WordPress Codex here

Translation

In order for WordPress to recognize the language to which you want to translate the core WordPress, the theme or the plugins, you have to change a setting within the dashboard. Login to WP-admin dashboard and navigate to Settings -> General Settings page. Make sure Site Language option is set correctly.

Translating with POEdit

No matter if you are setting up a complete new language file or if you just want to edit a translation of one of the pre built language files, the steps to take are easy and more or less the same. There are many .po editors to choose from, but we suggest POEdit as it is easy to use, it is available for all platforms and it is freeware.

Download POEdit from POEdit download.

Translation files

Your translation files should be located inside the /languages folder in the root folder of the theme. When you first download the theme, there will be a divinity_front.pot file that you need to edit in order to setup you preferred language's translation.

Install POEdit

Visit the Translator Handbook for more info on how to Download & Install POEdit.

Download POEdit from POEdit download.

Translate the theme

In order to start a new translation follow these steps

  1. Open the divinity_front.pot in POEdit and you will find all English text strings in the left column (“Source Text”). Once you add translations those will show up in the right column (“Translation”).
  2. Choose the line you want to translate and then check the lower part of the POEdit window where you will find a textarea to add the correct translation.
  3. When you are done translating all needed strings save the file with your language code, for example: de_DE.po. The corresponding .mo file will be auto created. Make sure both are in divinity/languages folder. Everytime you update the .po file, make sure to upload both .po and the compiled .mo file in divinity/languages folder.

In order to edit a pre built language file follow these steps

  1. Open the .po file of your language in POEdit and search for the line you want to change. To do so select Edit > Find (windows) or Edit > Search (OSX) respectively from the menu.
  2. In the search window type the string you are looking for. Once it is selected, delete the text from the Translation textarea in the lower part of the window and enter your prefered translation.
  3. Save the file. The updated .mo file will be auto created. Make sure both are in Divinity/languages folder

Updating the translations

Updating your translations after a theme update is usually not required. If you want to keep your customized translations and add any new strings that have been added to a new version of the theme, you can update from the .pot file to get the new strings to your file. Follow these steps to do so

  1. Copy your existing custom language folder from your current theme version to the updated version’s language folder.
  2. Open it in POEdit. Choose Catalogue > Update from POT file and in the opening file dialog choose the divinity_front.pot file. The catalogue will be auto updated then with all new strings and your custom ones will be preserved.
  3. Don’t forget to save the file once you are done updating and adding translations.

Translating with WPML

Divinity is fully compatible with the WPML plugin. WPML consists of several modules. The basic module turns WordPress sites multilingual. Other modules help with an enhanced translation process, string translation, media translation and other functions.

Getting the WPML Plugin

You can download the WPML plugin from wpml.org.

It is advised to install WPML after importing the demo content

Translating theme text

When you want to translate a page or a post, go to your posts or page admin screen. You will see a list of pages. You see columns for each active language, with a pencil icon (for ‘edit translation’) or a ‘+’ icon (for ‘add translation’) next to each page.

translation

Once you click on the '+' or the pencil icon, you should be taken to page editing.

translation

Translating Strings in the theme

An important part of the translation process is translating the strings that exist inside the theme. Locate these strings from WPML->Theme and plugins localization. From the next page, you need to click on the Scan the theme for strings, which will scan the theme for strings that can be translated, and will create a table with the domains that hold translatable strings.

translation

Click on the View strings that need translation button of the domain that you want to translate. If you want to translate the frontend strings of Divinity, edit the divinity-td domain. From the next screen, clicking on the translations link should allow you to add translations for all the available languages.

translation

Translating Widgets

Widgets are translated from WPML->String Translation. Refer to How to Display Different Widgets Per Language for more info on how to translate your widgets.

Translating theme options

Theme strings are also translated from WPML->String Translation. If you filter through theme divinity-admin-td from the Select strings within context filter, you should have all the backend strings that can be translated. Alternatively, if you are searching for a specific string, you can use the Search form.

Advanced

Load Minified CSS

If you want to switch to loading the minified or unminified version of the theme CSS, you need to do the following

  1. Go to Appearance->Customize in the WordPress Administration Screens.
  2. Click the Asset Loading menu in the customizer.
  3. Locate the Load Minified CSS option and choose the desired option
  • Minified
  • Unminified

Load Minified JS

If you want to switch to loading the minified or unminified version of the theme javascript, you need to do the following

  1. Go to Appearance->Customize in the WordPress Administration Screens.
  2. Click the Asset Loading menu in the customizer.
  3. Locate the Load Minified JS option and choose the desired option
  • Minified
  • Unminified

Site Identity

Site Title

The Site Title is displayed in the title bar of a web browser and is displayed in the header for most themes. To set the site title, you need to open the Customizer and expand the Site Identity panel. Locate the Site Title option and fill in the title for your site.

Your site title can be anything you’d like; it doesn’t have to be the same as your blog’s URL or your username. You can use a cleaned-up version of your URL (e.g., myawesomeblog07 can become My Awesome Blog), or change it to whatever best reflects your site’s personality and topic. Note: No matter what you change your site’s title to, your address remains the same.

Tagline

To set the tagline for your website, you need to open the Customizer and expand the Site Identity panel. Locate the Tagline option and fill in the tagline for your site.

Tagline is a short description or catchy phrase to describe what your blog is about

Site Icon

The Site Icon is used as a browser and app icon for your site. To set the site icon for your website, you need to open the Customizer and expand the Site Identity panel. Locate the Site Icon option and upload your icon.

Icons must be square, and at least 512 pixels wide and tall.

Site identity

Google Maps API Key

Create an API Key

To use the Google Map shortcode you need to get an API Key which will activate the Google Maps JavaScript API and any related services automatically. To get the key, you need to do the following:

  1. Visit the Google Docs here. On that page click on the GET A KEY button page options

  2. If logged into your Google account, click on the Continue button with the Create a project option picked from the dropdown. page options

  3. Once the project is created, give a name to your key and click Create. A popup will show up with the key. Copy it and go to Divinity->General, scroll down to the Google Maps API key option and paste the key on that field. page options

Child theme

Using a Child Theme

Divinity comes bundled with a child theme. Once you unzip the .zip file that you have downloaded from Themeforest, you will see divinity-child-theme-ver.zip.

A child theme is a theme that inherits the functionality of another theme, called the parent theme. Child themes allow you to modify, or add to the functionality of that parent theme. A child theme is the best, safest, and easiest way to modify an existing theme, whether you want to make a few tiny changes or extensive changes. Instead of modifying the theme files directly, you can create a child theme and override within.

Significance of a Child Theme

Here are a few reasons why a child theme is important:

  • If you modify an existing theme and it is updated, your changes will be lost. With a child theme, you can update the parent theme (which might be important for security or functionality) and still keep your changes.
  • It can speed up development time.
  • It is a great way to get started if you are just learning WordPress theme development.
For more info on how to setup a child theme take a look at WordPress Codex.

Template Files

If you want to change more than just the stylesheet, your child theme can override any file in the parent theme: simply include a file of the same name in the child theme directory, and it will override the equivalent file in the parent theme directory when your site loads. For instance, if you want to change the PHP code for the site header, you can include a header.php in your child theme's directory, and that file will be used instead of the parent theme's header.php.
You can also include files in the child theme that are not included in the parent theme. For instance, you might want to create a more specific template than is found in your parent theme, such as a template for a specific page or category archive.

Using functions.php

Unlike style.css, the functions.php of a child theme does not override its counterpart from the parent. Instead, it is loaded in addition to the parent’s functions.php. (Specifically, it is loaded right before the parent’s file.)

In that way, the functions.php of a child theme provides a smart, trouble-free method of modifying the functionality of a parent theme. Say that you want to add a PHP function to your theme. The fastest way would be to open its functions.php file and put the function there. But that’s not smart: The next time your theme is updated, your function will disappear.
There is an alternative way which is the smart way: you can create a child theme, add a functions.php file in it, and add your function to that file. The function will do the exact same job from there too, with the advantage that it will not be affected by future updates of the parent theme. Do not copy the full content of functions.php of the parent theme into functions.php in the child theme.

The structure of functions.php is simple: An opening PHP tag at the top, and below it, your bits of PHP. In it you can put as many or as few functions as you wish. The example below shows an elementary functions.php file that does one simple thing: Adds a favicon link to the head element of HTML pages.

    <?php // Opening PHP tag - nothing should be before this, not even whitespace
    // Custom Function to Include
    function favicon_link() {
        echo '<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />' . "\n";
    }
    add_action( 'wp_head', 'favicon_link' );

TIP FOR THEME DEVELOPERS:

The fact that a child theme’s functions.php is loaded first means that you can make the user functions of your theme pluggable —that is, replaceable by a child theme— by declaring them conditionally.

E.g.:

    if ( ! function_exists( 'theme_special_nav' ) ) {
        function theme_special_nav() {
            //  Do something.
        }
    }

In that way, a child theme can replace a PHP function of the parent by simply declaring it beforehand.

Installing the child theme

We have provided a child theme in case you want to modify the theme while keeping it up to date. The child theme is included within the main download zip file.

To use the child theme upload it as the standard theme and then activate it in Appearance -> Themes from the WordPress menu.

Extra Information

WordPress

Here are some useful links to get you started with WordPress.

  • WordPress Codex Your first port of call for everything about how WordPress is coded.
  • WP Screencasts WP Screencasts is a collection of training videos for managing web based content using the WordPress publishing platform.
  • WP Lessons Lessons from the creators of WordPress from beginners to advanced
  • Tuts Plus Tutorials Join over 5 million people using Tuts+ each month to learn skills including code, illustration, photography, web design, and more.

Hosting

Some of the WordPress hosting options that we recommend

Digital Ocean
WP Engine
A Small Orange

We recommend using digital ocean hosting it has great support and you can be up and running quickly using one of their ready made WordPress instances. Check out this one click install tutorial.

If you aren't ok with running your own server. We also recommend WP Engine, which offers a full managed hosting solution.

Another full hosting solution we recommend is A Small Orange who provide top notch servers and customer service


Do it alone! You can always host and install WordPress yourself if you have the skills.

Troubleshooting

Problems installing the theme

Here are some solutions for common problems when installing a theme

Wrong zip file

Make sure that the .zip file that you are uploading is the correct one. You need to upload the divinity-theme-ver.zip file that was located inside the .zip file that you downloaded from Themeforest.

Are you sure you want to do this

If when installing the theme you see this error: Are you sure you want to do this?, you will need to change the following parameters in your php.ini file:

post_max_size
25M
upload_max_filesize
25M

If you don't have access to php.ini, please contact your host. Or try adding the following lines to your .htaccess file.

php_value  post_max_size  25M
php_value  upload_max_filesize  25M

Problems installing Demo Content

WP Memory Limit

Sometimes the demo content installer might cause your server to run out of memory during the installation. To combat this you can always up the memory limit that WordPress uses.

  • Edit wp-config.php and enter the following above the line that says / That's all, stop editing! Happy blogging. /
    define('WP_MEMORY_LIMIT', '96M');
  • If you can access your server's PHP.ini file, then find the following line and increase the memory limit ie:
    memory_limit = 96M
  • If you cant't have access PHP.ini try adding this to the bottom of the .htaccess file at the root of your WordPress site:
    php_value memory_limit 96M
  • If you don't feel confident to attempt the above please contact your host provider.

PHP cURL fsock

In order for the demo content installer to be able to download the demo content, you will need to have either PHP cURL or fsock enabled in your PHP settings.

cURL

Install cURL Instructions on how to install PHP cURL

fsock

To enable fsock you need to edit your php.ini and make sure you have the following config

allow_url_fopen = On