#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!
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
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:
Settings > General to change the Site Title and Tagline.
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!
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:
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
- Simple Social Buttons
- No setup needed, just choose your social media buttons
#03 Page templates
You have 2 options for your homepage, if you wish for it to show the articles:
- Leave it as is
- 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.
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!
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.
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.
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>.
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:
- Under Date with year put
- Under Date without year put
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.
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.
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:
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!