Theme Archive

After you have purchased the theme, the archive downloaded from codentheme will look something like this:

(The theme itself is located in the Electron folder.)

Installation via WP

Login to your WordPress Dashboard (your-site.com/wp-admin/), and then navigate to Appearance > Themes.

Then click on the Add New button.

A new page will open. Click on the Upload Theme button.

Press the Choose File button.

A dialog box will show up, asking you to add a .zip archive.

ATTENTION: A common mistake that users make at this point, is that they try to upload the .zip archive with all the files that they have downloaded from codentheme. You must upload the .zip archive with only the theme itself, not the .zip archive with all files.

In order for this not to happen, be sure you have downloaded the Installable file only from codentheme.

That's the .zip you must upload.

The theme will now upload. After the upload is done, you need to click on Activate.

That's it. You're done.

Installation via FTP

Sometimes because of the quality of hosting providers or different aspects that may occur, WordPress native theme uploader may not work. In this case, you have to upload the theme via FTP.

To do that, open your FTP client, login, and navigate to public_html/wp-content/themes

Then, extract here the folder named "Electron" from the main .zip file you've downloaded from codentheme.

The INSIDE of the Electron folder should look like this:

Now that the theme is uploaded, you just need to activcate it from the WordPress Dashboard.

To do that, login into your WordPress Dashboard, and go to Appearance > Themes..

You should see Electron theme listed there. Click Activate.

That's it. The theme is now activated and ready to use.

Installing the required plugins

As soon as you install the theme you will be prompted with a message as follows:

This is because this theme recommends this plugin in order to work perfectly.

MailChimp for WordPress is a recommended plugin that allows this theme to display pretty Newsletter widget.

In order to install this plugin, you have to click on Begin installing plugins.

After the plugins are installed succesfully, Click on Return to Required Plugins Installer and click on Activate button.

That's it, now the plugin are activated.

General Style

There are some general styles customization.

You can hide preloader, change site font and color.

You just need to head over the Customizer, under the section General Style.

Theme Structure

Electron.zip
├── admin
│   ├── customcss.php
│   └── customizer.php
├── assets
│   └── css
│   │   ├── animate.min.css
│   │   ├── bootstrap.min.css
│   │   ├── custom.css
│   │   ├── flexslider.css
│   │   ├── font-materialdesign.css
│   │   ├── font-awesome.min.css
│   │   ├── magnific-popup.min.css
│   │   ├── owl.carousel.min.css
│   │   ├── slick.css
│   │   └── style.css
│   └── fonts
│   │   ├── flexslider-icon.eot
│   │   ├── flexslider-icon.svg
│   │   ├── flexslider-icon.ttf
│   │   ├── flexslider-icon.woff
│   │   ├── fontawesome-webfont.eot
│   │   ├── fontawesome-webfont.svg
│   │   ├── fontawesome-webfont.ttf
│   │   ├── fontawesome-webfont.woff
│   │   ├── fontawesome-webfont.woff2
│   │   ├── materialdesignicons-webfont.eot
│   │   ├── materialdesignicons-webfont.svg
│   │   ├── materialdesignicons-webfont.ttf
│   │   ├── materialdesignicons-webfont.woff
│   │   ├── materialdesignicons-webfont.woff2
│   │   ├── star.eot
│   │   ├── star.svg
│   │   ├── star.ttf
│   │   └── star.woff
│   └── img
│   │   ├── default.jpg
│   │   └── logo.png
│   └── js
│   │   ├── bootstrap.min.js
│   │   ├── facebook-widget.js
│   │   ├── html5shiv.min.js
│   │   ├── imagesloaded.pkgd.min.js
│   │   ├── isotope.pkgd.min.js
│   │   ├── jquery.countTo.js
│   │   ├── jquery.flexslider-min.js
│   │   ├── jquery.isotope.init.js
│   │   ├── jquery.magnific-popup.min.js
│   │   ├── owl.carousel.min.js
│   │   ├── respond.min.js
│   │   ├── script.js
│   │   ├── slick.js
│   │   ├── slicknav.js
│   │   ├── waypoints.min.js
│   │   └── wow.min.js
├── inc
│   ├── electron_comment.php
│   ├── electron_insta.php
│   ├── electron_tweet.php
│   └── OauthConnect.php
├── plugins
│   ├── kirki [Plugin folder]
│   └── class-tgm-plugin-activation.php
├── template-parts
│   └── layout
│   │   ├── layout-1.php
│   │   ├── layout-2.php
│   │   ├── layout-3.php
│   │   ├── layout-4.php
│   │   ├── layout-5.php
│   │   ├── layout-6.php
│   │   ├── layout-7.php
│   │   ├── layout-8.php
│   │   └── layout-9.php
│   ├── navigation-1.php
│   ├── navigation_page.php
│   ├── content-gallery.php
│   ├── content-video.php
│   ├── content-audio.php
│   ├── content-none.php
│   ├── instagram-feed.php
│   ├── slider.php
│   └── title-area.php
├── Widget
│   ├── about_author_widget.php
│   ├── electron_facebook_widget.php
│   ├── electron_insta.php
│   ├── electron_twitter_widget.php
│   ├── get_connected_sidebar.php
│   └── recent_post_sidebar.php
├── 404.php
├── archive.php
├── comments.php
├── footer.php
├── functions.php
├── header.php
├── index.php
├── index-featured-grid.php
├── index-full-1.php
├── index-full-2.php
├── index-grid.php
├── index-listing.php
├── masonry-2-column.png
├── masonry-3-column.php
├── page.php
├── screenshot.png
├── search.php
├── searchform.php
├── sidebar.php
├── single.php
├── standard-layout.php
└── style.css

Creating a Post

Creating a post in WordPress is very simple. In dashboard, just navigate to Posts > Add New. There you will find the editor which helps you create all your posts.

Adding a Thumbnail

The Electron WordPress theme is designed to work with & without posts thumbnails.

In order to add a thumbnail image to a post, you have to scroll down a little in the post editor, and click on Set featured image

After that, a dialog will pop up, indicating you to upload a picture. Press the Upload button and upload a picture from your machine. After the image is uploaded, it will appear in the gallery and will be automatically selected.

Press Set featured image and you are done.

There is no recommended thumbnail size, but keep in mind it is better to upload high resolution thumbnails, in order to look good on all visitors screens. If you upload a thumbnail image that is too small, it will look pixelated, but also if you upload a thumbnail with an exaggerated resolution, it will slow down the page loading time. The default thumbnail sizes that were used in the Demo Content were 1170x780px.

Post Style

Apart from creating posts, you can customize also the post style.

You just need to head over the Customizer, under the section Post Style, and there you will have a couple of options to customize the single post. In the picture attached below you will find a list of all the customization options for the single post.

Post Share

For post share icon you have to install Electron Social Share Plugin that is already packed with the theme.

Apart that by default all social icons are enabled. For disable any social icon just navigate to Appearance > Electron Social Share in admin dashboard.

Importing Demo Content

If you want to import to your blog the exact content you have seen on the demo, look in the downloaded archive for an .xml file in the Demo content folder.

Log in into your WordPress Dashboard, and navigate to Tools > Import. Under the name "WordPress" click on Install Now.

After the WordPress Importer is installed, you will have the option to run the importer.

Click on Run Importer.

After that, a dialog will show up, indicating you to upload the .xml file. Press Choose file, select the .xml file from your local machine, and then press Upload file and import.

That's it. All the posts from the demo content are now imported to your site.

Changing the Permalinks

Permalinks are the links of your single posts. By default, WordPress gives you a permalink structure that looks like this:

That link structure may be considered too long and bad for SEO. Basically, the majority of people want to change that to a more practical one. To do that, in the WordPress Dashboard, head over Settings > Permalinks.

There you will find a couple of options. By default, the option checked is the one shown below.

If you want to have a better permalink structure, the recommended option to check is the one called Post name.

Check it, and hit Save Changes. Now your URLs will look like this:

Way better.

Creating a Menu

When you first install Electron theme, you may see on the navigation area the message "Add a menu". That's because you haven't created any menus yet and there is nothing to display.

In order to create a menu, you need to go to your WordPress Dashboard, and navigate to Appearance > Menus.

Once you are there click on create a new menu, fill the box with a name for your menu, and then click on Create Menu button

.

A very important step after your menu is created, is to check Primary as a display location and then click on Save Menu

After that, you are free to add whatever you want to your menu, by dragging and dropping from the list on the left.

You can include to your menu links to posts, pages, categories, external sites, etc. However, always be sure Primary Menu is checked. In the example above we added to our menu a link to a post, and a page. Here is how it looks on the site:

You can also add submenus, by dragging items one over another.

Here is how it looks on the site:

Creating a Page

Creating a page in WordPress is very simple. In dashboard, just navigate to Pages > Add New. There you will find the editor which helps you create all your pages.

Page Setting

In order the customize the Page Setting, head over the Customizer > Page Style, and there you will have a couple of options to customize the Page. In the picture attached below you will find a list of all the customization options for the Page.

Site Identity

WordPress Customizer gives you a couple of options in customizing your site identity.

Under the Site Identity menu in the customizer you are given a couple of fields for your site title, description, and favicon. The recommended size for the favicon is 512px.

Home Style

In order the customize the Home Style, head over the Customizer > Home Style, and there you will have a couple of options to customize the Home. In the picture attached below you will find a list of all the customization options.

* Hiding the Sidebar on home page will not affect displaying it on posts and pages. If you want to hide it from there, you must go the respective sections in WordPress Customizer and disable it from there.

Home Layout

Electron theme gives you the possibility to choose between 9 home styles for displaying the posts, as follows:

The files necessary for the home layouts are stored in the template-parts/layout folder, and they are named as follows:

layout-1.php - for the basic layout

layout-2.php - for the standard layout

layout-3.php - for the listing layout

layout-4.php - for the grid layout

layout-5.php - for the featured grid layout

layout-6.php - for full basic layout

layout-7.php - for full standard layout

layout-8.php - for 2 column masonry layout

layout-9.php - for 3 column masonry layout

Static Homepage

If you want to display a static homepage instead of your latest blog posts, you can do that by going into your WordPress Dashboard, and then navigate to Settings > Reading.

By default, the option selected is Your latest posts, but you can always check for A static page and then select for what page you want to show up.

Number of Posts

You can also change the number of posts that show up on the homepage, by changing the number in the "Blog pages show at most" box.

The default number of posts is 10. You can put any number of posts you want.

Disabling the Navbar Search

In order to disable the search, head over the Customizer, and click on the Header section.

After that, click on search checkbox and then hit Save Changes.

Done.

Changing the Logo

In order to change the logo, head over the Customizer, and click on the Header section.

After that, a screen like this will appear:

For perfect view use 160x36 px size.

Social Icons

Electron theme supports 7 social icons that can be added in the header of your website.

When you first install the theme, there will be no icons, because you need to fill in some data in order for them to work.

To do that, in the theme Customizer, head over Header social icons submenu.

Once you are there, you will be given a couple of options.

The first one, is of course to disable the header social icons. If you want them to not display at all in the header, just check the box as shown below.

Moving on to the next options, cutomizing this icons is pretty simple.

Every icon needs a "type" and an "URL" for your profile.

After you fill the blanks, the icon will automatically update with the specified values.

Disable the Sidebar

Electron theme gives you the options to disable the Sidebar, in separate situations.

You can disable the Sidebar in the Homepage, Posts, Pages, Archive results and in Search results.

Disabling the Sidebar on Homepage

In order to disable the Sidebar on Homepage, in your WordPress Customizer, you have to navigate to Home Style and check for Hide home sidebar.

Disabling the Sidebar on Single Posts

In order to disable the Sidebar on Single page, in your WordPress Customizer, you have to navigate to Single Post Style and check for Hide single page sidebar.

Disabling the Sidebar on Pages

In order to disable the Sidebar on Pages, in your WordPress Customizer, you have to navigate to Page Style and check for Hide page Sidebar.

Disabling the Sidebar on Archive

In order to disable the Sidebar on Archive page, in your WordPress Customizer, you have to navigate to Archive Style and check for Hide archive Sidebar.

Disabling the Sidebar on Search results

In order to disable the Sidebar on Search page, in your WordPress Customizer, you have to navigate to Search Style and check for Hide search Sidebar.

About me Widget

Electron theme comes packed with a couple of pre-build widgets.

The first of them is the About me Widget. This widget allows you to display a little information about yourself, a picture and social icons.

In order to use this widget, you need to go to your WordPress Dashboard, and navigate to Sidebar > Widgets

Look for the widget named Electron About-me widget, click on it, select the Sidebar location, and then click on Add Widget.

Your new widget has now been added to the Sidebar, but needs to be customized.

In the first box you need to fill a Title for your widget.

In the second box you have to insert a profile picture.

In the third box you need to put your name.

The fourth box is for some bio about yourself.

And other boxes for social profiles.

That's it, your widget is there!

Recent Posts Widget

Electron theme comes packed with a couple of pre-build widgets.

One of them is the Recent Posts Widget. This widget allows you to display the recent posts in the sidebar.

In order to use this widget, you need to go to your WordPress Dashboard, and navigate to Sidebar > Widgets

Look for the widget named Electron Recent posts widget, click on it, select the Sidebar location, and then click on Add Widget.

After that, you must add a widget title and specify number of posts to show, click Save, and that's it, your widget is there!

Instagram Widget

Electron theme comes packed with a couple of pre-build widgets.

One of them is the Electron Instagram Widget. This widget allows you to display Instagram feed.

In order to use this widget, you need to go to your WordPress Dashboard, and navigate to Sidebar > Widgets

Click on the widget named Electron Instagram Widget, select the Sidebar location and then click on Add Widget.

The widget has now been added to your Sidebar. After that insert a widget title, Instagram username and number of images to show

After you are done with customizing, click Save and you are done.

FB page like Widget

Electron theme comes packed with a couple of pre-build widgets.

One of them is the Electron FB page like widget. This widget allows you to display your facebook page details with a pretty like button.

In order to use this widget, you need to go to your WordPress Dashboard, and navigate to Sidebar > Widgets

Look for the widget named Electron FB page like widget, click on it, select the Sidebar location, and then click on Add Widget.

After that, you must customize your widget a little. You can add a Title, Facebook application id, Facebook page title and Facebook page url.

After you are finished customizing, hit Save, and that's it, your widget is there!

Follow us Widget

Electron theme comes packed with a couple of pre-build widgets.

One of them is the Electron Follow us widget. This widget allows you to display follow us social icon you want in the Sidebar.

In order to use this widget, you need to go to your WordPress Dashboard, and navigate to Sidebar > Widgets

Look for the widget named Electron Follow us widget, click on it, select the Sidebar location, and then click on Add Widget.

After that, you must customize your widget a little. You can add a Title, and a target social link.

After you are finished customizing, hit Save, and that's it, your widget is there!

Twitter widget

Electron theme comes packed with a couple of pre-build widgets.

One of them is the Electron Twitter widget. This widget allows you to display your twitter feed on your website.

In order to use this widget, you need to go to your WordPress Dashboard, and navigate to Sidebar > Widgets

Look for the widget named Electron Twitter widget, click on it, select the Sidebar location, and then click on Add Widget.

After that, you must customize your widget a little. You can add a Title, username, consumer key, consumer secret, access token, access token, and number of tweets you want to show .

After you are finished customizing, hit Save, and that's it, your widget is there!

Newsletter Widget

In order to add an Newsletter widget to your Sidebar, you first need to download a plugin.

To do that, in your WordPress Dashboard, navigate to Plugins > Add New.

After that, search for MailChimp for WordPress, and hit enter. Press on the Install Now button.

Once the plugin is installed, click on Activate.

The plugin is now activated, but you still need to follow a few steps.

In the WordPress Dashboard left menu, click on MailChimp for WP.

You need to fill in your API key in order for the Plugin to work.

Login here with your MailChimp account and get the API key.

Paste the API key in the box and hit Save Changes.

Now, in order to get the Subscribe Widget look like in the demo, you need to go to MailChimp for WP > Forms.

Create a new form. The default code for your form, provided by the plugin, should look like this:

But, if you want the widget to look exactly like in the demo, you have to make the following modifications to the code:

You can copy-paste the code from below:

                                

                                    
Get latest news and updates delivered
                                        straight to your inbox.
                                    

                                        
                                    
                                  

                                    
                                  
                                
                            

After you pasted the new code, hit Save Changes.

Now, in the WordPress Dashboard, navigate to Appearance > Widgets.

Look for the widget named MailChimp Sing-Up Form, click on it, select the Sidebar location, and then click on Add Widget.

Your new widget has now been added to the Sidebar, it needs just a title.

After you filled the title, click on Save.

For further customization please reffer to the MailChimp documentation.

Archive Style

In order the customize the Archive Style, head over the Customizer > Archive Style, and there you will have a couple of options to customize the Archive. In the picture attached below you will find a list of all the customization options for the Archive.

Search Style

In order the customize the Search Style, head over the Customizer > Search Style, and there you will have a couple of options to customize the Search. In the picture attached below you will find a list of all the customization options.

Instagram Feed Setting

In order to add your Instagram Feed in the Footer, head over the Customizer > Instagram Feed Setting, and there you will find a couple of option to add Instagram feed.

First, you need to check the Show instagram feed checkbox. After that insert your Instagram username in the next text box. And as explained in the note please don't add any '@' symbol.

That's it, you are done.

Copyright Footer Text

By default Electron theme add a copyright text [Copyright © 2017 Electron, Designed and developed by Bylancer]. But you can change it.

In the WordPress Customizer, navigate to the Footer section.

Add the text you preffer in the box, and click Save. Your Copyright text will now appear in the footer.