#01   Theme Installation

ℹ️ The necessary steps for the theme to work like the demo:

1. Install and activate the theme
2. Install and activate suggested plugins (Events Calendar, Simple Social Buttons)
3. Import the XML file for the demo content (this can take up to 20 minutes)
4. Add widgets to the footer
5. Select the logo in Customizer
6. You're done!

Let's start!

FTP installation

To install the theme, unpack the zip file you downloaded 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 (not the whole package, just 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.

⚠️ This step could take up to 20 minutes!

3. Go to Settings > Reading and set your front page and blog page, if you want any other pages as your home and blog page. If you want to emulate the demo, keep the "Your latest posts" radio button checked.

4. To display widgets in the footer area, go to Appearance > Widgets or Appearance > Customize > Widgets and check the widget area is empty. If there are no active widgets on your new site, the theme will automatically display default widgets in the Footer area, as in the demo.

✅ Remove all active widgets from the Footer area, if you want to display default demo widgets there.

More about footer widgets here.

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

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

Change the logo

If there is no logo you uploaded and selected in the Customizer, the theme will automatically show Insider's logo in the header.

To change the logo to your own:

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

Go to Appearance > Customise > 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 colour 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

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 /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.)

Events Calendar
Under Display, set the "Skeleton styles" option
Under Date with Year and Date without Year, write n.j
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


Visit this section to see how to change your logo.


Go to Appearance > Customize > Menus to re-order, add or remove 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.

Footer widgets content

If there are no active widgets on your new site, the theme will automatically display default widgets in the Footer area, as in the demo.

To add your own widgets, go to Appearance > Widgets or (as in the image above) Appearance > Customize > Widgets

If you want to manually add widgets from the demo, add 4 new Text widgets to the area and copy this code:

Here is the HTML for the footer widgets:

1. 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"

2-4. 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 2021. <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:

WP Smush
Smushes all your images in the Media folder
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 customise the theme and have it safely upgradable, use a child theme. It is included with the theme (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: 	Insider Child Theme
Author: 	Darinka Kostelnik
Description: 	Insider Child Theme
Template: 	insider
Version: 	1.0
Text Domain:	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. I’ll gladly help you.

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

Thanks for reading!