Item Support

Support for this theme   Have questions? Talk to me via comments:

#01   Theme Installation


Tl;DR: The neccessery steps for the theme to work like the demo:
1. Install and activate
2. Install and activate required plugin (Lazy Load XT) and all other suggested plugins (Gutenberg, Events Calendar, Widgets Importer Exporter, Simple Social Buttons)
3. Import the demo content
4. Import the widgets for the footer
5. Select the logo in Customizer
6. You're done!

FTP installation

To install the theme, unpack the zip file you downloaded from ThemeForest somewhere on your computer. In the unpacked folder, locate the insider folder and upload it into your webspace.

You have to have WordPress already installed. Go to wp-content/themes and upload the insider folder with a smile!

Now, log in to your admin and go to Appearance > Themes.

Activate the theme!

Admin Panel Installation

Login to your admin panel, navigate to the Appearance > Themes section. Select the Add New button.

Upload the ZIP file of the WordPress theme that you downloaded from ThemeForest (download only the "installable ZIP file").

Now, go to Appearance > Themes.

Activate the theme!


#02   Demo Install & Plugin Setup


1. Once the theme is activated, install and activate the suggested plugins that pop up at the top of the admin panel. Now you can install all the demo content with the demo XML file provided in the /assets folder.

2. Go to Tools > Import. Click the "WordPress" link at the bottom, this will install the WordPress Importer plugin, if it hasn't been installed before. Upload the XML file from the /assets folder and run the importer. Don't forget to check the "Import Attachments" field.

3. Go to Settings > Reading and set your front page and blog page.

4. Set the permalinks (or change the URLs of links in the main menu). Go to Settings > Permalinks and select Post name.

5. Head over to the Theme Customizer (Appearance > Customize) and change the look of your website:

Change the logo

Go to Settings > General to change the Site Title and Tagline.

Go to Appearance > Customize > Site Identity and upload the logo. Use a PNG image with transparent background. Your logo should be dark and simple. On certain pages with background image, it is inverted with a little CSS magic to show as white. No need to create dark and white version of your logo!

Don't forget to specify the size of your logo (height in pixels). In the demo, we uploaded 2x bigger logo and specified the height to only 20px. This way we also provided for retina displays.

Choose your fonts and color scheme

In the admin, go to Appearance > Customize. Here, under the Colors tab, you can choose the color scheme for your website. No worries, you can always revert back to defaults. Go experiment!

Go to Appearance > Customize > Font to choose your font. The theme is integrated with: Google Fonts. Choose whatever suits you best. The demo uses "Nunito" and "Playfair Display", which are paired very pretty. You can find any other alternative on Google Fonts.

For your custom Google font, go to google.com/fonts and choose your font, then write their names to the input boxes, e.g. Open Sans. Divide weights with comma, for example: 400,700.

This site provides nice inspiration for your font pairings. Your first font can be sans-serif and the second one serif, like our demo.

Don’t forget to hit the top Save & Publish button to apply your changes!

Change your favicon

You can create a favicon out of an image here: http://favicon.co.uk/. Change the icon in Appearance > Customize > Site Identity.

There is a .psd file for your convenience in the /assets folder. Create a favicon.png file and upload via the Media uploader.

Or use the favicon.ico image provided in the /dk-insider/imgs folder.

Setting up plugins

Set up the activated plugins that this theme uses:
(No other extra setup is needed, but you can tinker with plugins at your will.)

Lazy Load XT
No setup needed
Gutenberg
No setup needed
Events Calendar
Under Display, set the "Skeleton styles" option
Under Date with Year and Date without Year, write n.j
Widgets Importer Exporter
No setup needed, just import the widgets file from the /assets folder
Simple Social Buttons
No setup needed, just choose your social media buttons

#03   Page templates


Home Page

You have 2 options for your homepage, if you wish for it to show the articles:

  1. Leave it as is
  2. Set a static front page and attribute a "Latest Posts" page template to it

The second option steps are as follows:

First create a static homepage. Create a page to call “Home” (or whatever). Go to Settings > Reading and under Front page displays, select static page and your home page.

Page Templates

On a page edit screen, under Page Attributes, select a Page template:

  • Latest Posts: Displays excerpts ordered by stickiness and date
  • Sticky Posts: Displays excerpts of sticky posts
  • Latest Events: Displays excerpts of events ordered by date of event

Note: Don't forget to install the "Events Calendar" plugin for your events!

Separate Blog Page

To create a separate blog page (that is not homepage), create a page called "Blog" (or similar, e.g. "Journal"), do not set it as your Posts page in Settings > Reading, just assign a Page Template that's called "Latest Posts" on the page edit screen under "Page Attributes".


#04   Editing with Gutenberg


Some of the pages for the Insider demo were created with the awesome new editor called Gutenberg.

If you remember, we installed and activated this plugin at the beginning, but this will soon not be neccessery. Gutenberg will become a part of default WordPress installation once new WordPress 5.0 is out. Get used to it! Classic editor will soon be replaced!

Pages in the demo created with Gutenberg include: About, Contact, Videos.


Try Yourself: Videos Page

In admin panel, go to Pages to edit the page called "Videos", or create a new page and call it "Videos" or similar.

Make sure the Gutenberg plugin is installed and activated and you can edit this page with Gutenberg. We are going to utilise its powers in order to create columns and insert Vimeo video URLs.

First, press the little + button to add a new block and create a new column. Under "Block" settings in the right column, select 3. Now write a title and some text into the first column.

We are going to insert a video embed above the title. Click the title, hit ENTER on your keyboard and a new block pops up inside the column. Hit the little + and search for Vimeo icon. Now insert your video URL. The editor automatically inserts a video.

We want the entire row of our 3 columns to take up as much space as possible on our page. Hover over the columns and when the entire row is highlighted, click it and select the "Wide width" icon.

Congratulation! You're done and you just got your masters in Gutenberg!


#05   Header & Footer


Logo

Visit this section to see how to change your logo.

Menu

Go to Appearance > Customize > Menus to re-order, add or remmove your pages from the menu (it can be called anything, in our case "Menu 1").

Make sure you that you check the checkbox under "Menu Location" to assign the menu to the Primary area for it to appear in the header.

Import Footer content from demo

Footer widgets appear above the copyright line on every page.

For your convenience, there is an import file in the /assets folder. Please install the "Widgets Importer & Exporter" plugin from the WordPress plugin repository.

Import the .insider-widgets.wie file.

These widgets are used for the "Footer" widget area:

Footer widgets content

Here is the HTML for the footer widgets:

Text widget

We are a happy bunch of web professionals working as designers and developers, bringing you the latest news from our community.

Check the "Automatically add paragraphs"

Text widget (all 3 are the same)

<a href="#">Latest Posts</a>
<a href="#">Popular Posts</a>
<a href="#">Buy Theme</a>

Check the "Automatically add paragraphs"

Social Icons in Footer

Add links to your social networks in Appearance > Customize > Footer. The icons will appear next to the footer widgets as seen in demo.

Don't forget to add your Facebook APP ID so that your visitors can share your articles.

Copyright Information

At the very bottom of your site, you can change the text with the copyright info. Go to Appearance > Customize > Footer in the admin panel and change the text to anything you'd like.

You can also use common HTML tags for links or lists. For example:

Insider © Copyright 2019. <a href="URL" target="_blank">My link</a>. 

#06   Events


Events Calendar Plugin

Install and activate the "Events Calendar" plugin. Go to the settings page under Events > Settings. Select the "Display" tab.

Under Events template, select "Default Events template".

Under Default stylesheet used for events templates, select "Skeleton Styles". Our theme is handling the style of the events.

Under Date Format Settings, let's change the way our date is displaying on the home page:

  1. Under Date with year put n.j
  2. Under Date without year put n.j

The year will not be displayed in both cases. This way the date of events is not taking too much space on the home page.

All of this is optional and you can change your date format to whatever you want.

You can keep all other settings intact, or change whatever feels right.

Create an Event

Create a page via Events > Add new.

Fill out the date, location, venue and event website. Feel free to use Gutenberg on the Events pages, or simply proceed adding your content in a standard way.

The event will be displayed in similar fashion as a blog post, with the extra info displayed within excerpt and at the end of the post.

Events Page

In admin panel, go to Pages to edit the page called "Events", or create an empty page and call it "Events" or similar. Under "Page Attributes", assign the "Latest Events" page template and hit Save.

Events Customisation

Everything the Events Calendar plugin offers is styled appropriately with the theme's CSS files. That is why, in the plugin's Settings page, we selected "Skeleton styles only" as our styling option. Insider Theme does most of the heavy lifting in the styling department.

The theme's CSS files for Events is located in the /css/events.css file.

Within the theme's folder, you'll find a /tribe-events folder with the files that slightly change the default markup to match the theme.

Follow the Themer's Guide for more information on those files.

#07   Site Performance


After you've finished customising and preparing your WordPress site and everything is tutti-frutti, it's time to make it all load in a lightning speed.

Here are some tips on how to improve your website's performance:

Install plugins

I advise to install and setup these plugins:

Lazy Laod XT
This should already be installed
WP Smush
Smushes all your images in the Media folder
Hummingbird
Run the test and follow the instructions

Make sure at least GZIP compression is activated on your server. The Hummingbird plugin will guide you on how to do it, but if you have no clue, contact your website hosting provider.

#08   Theme Customisation


To customize the theme and have it safely upgradable, use a child theme. It is included with the theme (dk-insider-child-theme folder).

For minor CSS changes, you don't have to bother with the child theme, just go to Appearance > Customize > Custom CSS and add your rules there.

You already have one such child theme pre-created for your convenience inside the theme's ZIP package.

/*
Theme Name: 	DK_insider Child Theme
Theme URI: 	http://darinka.design/insider
Author: 	Darinka Kostelnik
Author URI: 	http://darinka.design/
Description: 	DK_insider Child Theme
Template: 	dk-insider
Version: 	1.0
Text Domain:	dk_insider
*/

More on this topic here: https://codex.wordpress.org/Child_Themes


If you have any questions or require support, visit the Comments section of this theme on ThemeForest. I’ll gladly help you.

Please rate this theme if you like it, you will receive good karma.

Thanks for reading!