Dinova
By: 3Forty Media | Follow me on Themeforest | Follow me on Twitter
Table of Contents
- Introduction
- Installation
- Plugins
- Customizer
- - Homepage Custom Post Blocks
- - Category Featured Posts
- Navigation
- Widgets
- Post Formats
- Theme Customizations
- Theme Classes and Hooks
- Sources and Credits
- Changelog
Introduction - top
Thankyou for purchasing Dinova, I really hope you enjoy using Dinova as much as I enjoy developing it.
This document will help you get your theme installed and setup and get the most out of your theme but if you do have questions please leave a comment or send me an email via my profile page.
If you love Dinova, or even if you don't please take a moment to rate it or leave a comment or review, it really helps. Thanks so much!
Installation - top
Once you have downloaded the zipped package to your computer, you will need to extract it to a location you choose. Then simply open that extracted folder and you will see Dinova.zip, this is your theme, and we just need to install it.
Option 1. Wordpress Admin (Easy Method)
Login to your WordPress Admin and go to: Appearance > Themes.
At the top of the screen click Install Theme. Next at the top of the screen click Add New and then click the Upload Theme button at the top of the screen. Click the browse button and locate Dinova.zip select it and press the Install Now button
Once installation is complete click Activate to activate the theme.
Option 2. FTP (Advanced Method)
Extract Dinova.zip and upload the extracted Dinova folder to your wordpress installation themes folder /wp-content/themes/
Finally you need to activate the theme. Go to: Apperance > Themes and click Activate on the Dinova theme
Demo Data
If this is a fresh or first time installation you may find it helpful to import the data from the demo. I have supplied an XML file in your download that contains posts, comments and pages with the option to download associated media. To import this file go to: Tools > Import and Click Run Importer
Click the Browse button and locate the demo-data.xml file inside your download folder. Next click Upload file and import. Once the import is complete you will be asked if you would like to import media, this will download all the associated media for the posts and pages. It may take a a couple of minutes to download all the media so be patient.
All post images are from Unsplash or Pexels and are licensed CC0.
You will now need to install the required plugins to complete installation
Plugins - top
To get the most out of Dinova I have created a few custom plugins that you will need to download. There are also optional plugins that you might want to install. Once you have installed your theme you will be prompted to download and install the Dinova required plugins and some recommended plugins.
Click begin installing plugins. This will take you to the Install required plugins page. To begin installing plugins, check each plugin you want to install and select Install from the drop down menu. This will install your plugins.
Required Plugins
Dinova Hero
This plugin displays static hero content (posts) of our choosing on the homepage.
Dinova Home Blocks
This plugin display confgurable post loop blocks on the homepage
Dinova Posts Widget
A highly customizable posts display widget.
Dinova Related Posts
Configurable related posts plugin
Dinova Social Plugin
A social media widget and content share plugin
Regenerate Thumbnails
This plugin enables you to batch resize all your thumbnails and feature images to the size used by Dinova. I highly recommend this plugin if you want to get the best out of Dinova.
All other plugins are supported by Dinova but it is your choice whether you install them or not
Once installed go to Plugins > Installed Plugins and click activate on each plugin you just installed.
To complete theme installation
Now your theme is installed and you have downloaded and activated at least the essential plugins. At this point I recommend regenerating your thumbnails which will create the sizes we need for your theme without changing or deleting any other sizes you already have. Click Tools > Regenerate Thumbnails
All you have to do is click Regenerate Thumbnails for All x Attachments, then wait as your new thumbails are generated. Once complete you can view your homepage and see all your existing post thumbnails resized for your theme. Now you can head on over to the customizer and start updating settings.
Customizer - top
Dinova comes with several theme specific customization options. These are located in the WordPress Customizer which can be located in Apperance > Customize. All Dinova options are labelled Dinova: Setting Name. These options allow you to configure your theme and turn on/off included features
Customization Options
- Colour Settings
- Theme Settings
- Homepage Custom Blocks *
* Install and activate the required Dinova Plugins if you do not see this option
We will go into more detail on some of these below, but before we do that lets look at the Site Identity setting and in particular choosing the correct logo for your blog.
Uploading your logo
Dinova is designed from the outset to support high resolution displays as standard. Whatever logo you upload Dinova will scale it down by 50%, this will then look great on high resolution displays. To ensure that your logo looks good across both standard and high resolution displays and at the size you want it to be, you need to upload a logo that is twice the size you want it displayed. Here's an example: Appearance > Customize > Site Identity
1. Let's say this is the size you want your logo on all displays
2. This is the size you will need to upload, it is twice the size of the above logo
3. Dinova will scale the large logo down to this size
You can upload any orientaion logo (vertical/horizontal) and Dinova will scale it down by 50% and centralize it both horizontally and vertically
Homepage Custom Post Blocks - top
Dinova has 6 custom post blocks. Appearance > Customize > Dinova: Homepage Custom Blocks
Short Video Guide
Detailed Guide
Each post block allows you to display posts of your choosing and a widget on the homepage. To create a block: click any of the 6 available blocks
Configure the block
Once you have enabled the block by checking Enable Block, you can begin configuring your posts.
- Title - An optional title for your block
- Sub title - An optional sub title or description
- Post Type
- Recent Posts - Your most recent blog posts
- Popular Posts - Posts with the highest comment count
- Specific Posts - Select this if you want to specify the posts ID's
- Post ID's - Enter a comma separated list of ID's
- Category - Display posts from a category. This can also be used with recent and Popular Posts to display recent Posts from your chosen category
- Number of posts to display - Enter as many as you require
- Offset - Number of posts to skip
- Number of Columns - Number of columns (min 1, max 3).
You can mix the number of posts with the number of columns to create alternative count rows. For example 5 posts > 3 rows will output 1 row of 3 and another row of 2
- Thumbnail Aspect ratio - Choose the thumbnail aspect ratio
- Toggle Meta data - You can toggle all meta data and thumbnail
- Date Style - Default or Custom
- Post Style - Choose from 3 post styles
- Allow Post Format Styling - Image format posts have a different style to all other posts. You can choose to allow image format styling in blocks or disable it. This allows you to create some interesting displays with mixed styles.
Display widgets in post blocks
You can choose to enable sidebars in blocks. each sidebar functions like any other sidebar. You can add any and as many widgets as you need.
- Check Display Widget
- Select the position in the block where you would like the widget. I.e. Position of 2 will display the widget after the first post of the loop (at position 2). Position 3 will display the widget after the 2nd post etc.
- Select Widget replaces Post of you would like the sidebar to replace the post rather than add it into the loop.
Now you will need to add your widgets to the sidebar for this loop
Appearance > Widgets Home: Custom Block Loop X. Add your widgets as normal
You can save time by adding all of your widgets to each block sidebar before you create your blocks on the customizer.
Category Featured Posts - top
Dinova allows you to feature posts in each category up to a maxium of 3 posts. In the new post/edit post page scroll down to Dinova: Featured Post. Check to display this post in the featured area for the category it is related to.
Configure the display
To confgure the settings for category featured posts
Appearance > Customize > Dinova: Theme Settings > Category Featured Post Settings
Navigation - top
Dinova has support for four menus: Appearance > Menus. At the very least you will need to create one Primary menu, other menus are optional
To create a new menu click create a new menu and save it. Once you have created your menu, assign it by checking the Display Location in Menu Settings and Save
Primary Menu
The primary menu is located in the site header and additionally within the slide out sidebar if you choose to which acts as your primary toggle menu on small devices. The primary menu supports 3 levels of hierarchy Parent > Child > Grandchild and the slide out sidebar supports unlimited levels.
Toggle Sidebar Primary Menu
Located in the slide out sidebar and supports unlimited levels
Secondary Menu
The secondary menu is located in the site header, above the primary menu
Aligning menu items
Menu items align left within the secondary menu. To align a menu item right you need to add the class alignright in the CSS Classes field for each item
Footer Menu
The footer menu is located on the right hand side of the footer
Widgets - top
Dinova has 11 widgetized sidebars supporting all standard WordPress widgets and also a widget area in the footer just for the WP Instagram Widget called Instagram Footer
To activate a widget go to: Appearance > Widgets and drag your widgets to the appropriate widget area. You can also manage your widgets inside the Customizer if you prefer.
Please note: The Instagram Footer widget area is designed only for the WP Instagram Widget, you may use a different Instagram Plugin but there will be no styling so may not look as intended.
Setting up Instagram Footer
One of the settings for the WP Instagram Widget is Number of Photos. Dinova supports a maximum of 6 per row but you can have as many rows as you need.
Dinova includes two custom widgets
- Dinova Posts Widget - Highly customizable posts display widget
- Social widget - Display icons and links to your social media channels
Supported Plugins & Widgets
Dinova includes styling for the following third party Plugins and Widgets.
- WP Instagram
- Contact Form 7
- Mail Chimp
Post Formats - top
Dinova supports 4 post formats
- Standard
- Gallery
- Video
- Audio
- Image
Depending on which format you select for your posts the content, images and embeded media is uniquely displayed. Lets look at them.
Standard
Select this format for standard posts, you can emebed media, galleries, images and video as normal.
Gallery
The gallery format is ideal for gallery posts where you have images you want to showcase. You should embed your galleries in the normal way and this post format will take your first gallery and display it at the top of your post in place of your featured image. It's worth noting that you can embed galleries in posts and display a featured image simply by using standad post format.
Video/Audio
Select this format when you want to feature your embeded video in the featured header area of posts. If selected this format will take the first video/audio in your post and display it in the featured header area. Your first video/audio embed will then be removed from the post leaving your formatted text and any other media you have embeded.
You should upload a featured image to video posts as this will be displayed in archive loops.
Image
The image format produces an alternative display style in archive type views. The entry header and meta data will overlay the post thumbnail. Image format works just like a standard post for single post view.
Theme customizations
I have included a child theme on your download package called Dinova-child.zip. If you would like to customize your theme you may prefer to install the child theme via the same method described in the Installation section and make any changes you require directly to the child theme. The child theme will inherit all the functions and styling of the parent theme and leave you free to make any changes you need without affecting your main theme.
Theme Classes & Hooks
Dinova features several custom hooks. You can use these hooks to further extend theme functionality or add your own functions or widget areas.
Hooks
- dinova_before_header - Before Header
- dinova_after_header - After Header
- dinova_after_content - After Content
- dinova_before_footer - Before Footer
- dinova_after_footer - After Footer
To use a hook you will need to use the add_action function; for example to use the dinova_after_header hook
function my_custom_function( ) {
$var = 'var';
echo esc_attr($var);
}
add_action('dinova_after_header', 'my_custom_function', 10 );
Custom Classes
Dinova uses one custom class in the Gutenberg editor:
has-quote-marks
This class adds quote marks to blockquotes and pullquotes. To add a class in the gutenberg editor. Click Advanced in the Settings Panel > Block Tab and add this class
Sources and Credits - top
I've used the following images, icons or other files as listed.
Changelog - top
Janurary 01, 2019
- Fixed sticky nav hiding share icons (style.css)
- Update version number
November 12, 2018 - Initial Release