A WordPress child theme takes the functionality of another theme, named parent theme. It gives you the possibility to customize an existing theme. Instead of modifying the theme files directly, you can activate the child theme and work within it.
All customizations are stored in the child theme and anything in the child takes priority over the parent. So if the same file exists in both child and parent, the file from the child will control that aspect of the theme.
Working with child themes, your customizations are safeguarded from future upgrades because you only upgrade the parent theme, which you never edit, while the customizations are protected in your child theme which you don’t upgrade.
Safe Updates. You can easily modify your website using child themes without ever changing the parent theme. When a new version of the parent theme appears, you can safely update it as all your modifications are saved in the child theme.
Easy to Extend. A child theme has a great flexibility. It does not require writing a lot of code. You can modify only those template files and functions that you need.
ATTENTION: When you install the theme you must upload both parent and child theme folders to /wp-content/themes/ but you should only activate the Child theme via Appearance > Themes.
While you should never edit files in your Parent theme, if you really must, the safest way to do it is to download a copy of the file you want to modify on your computer, make the changes, and then upload it into your child theme folder.
INFORMATION: This way of modifying the files can be used for any files from the parent theme — note that you must re-create the same folder structure in your child theme that exist in the parent theme in order for the modifications to take effect.
Once you purchased the theme, begin installation process:
Upon theme installation and activation you are redirected to the Auto Setup page. You are offered three options:
It is recommended to choose between 'Plugins & Demo Content' or 'Plugins Only' options.
Let's review complete demo setup. Click on the 'Plugins & Demo Content' button below it and wait a few moments until installation process is finished.
When installation process is finished, you're automatically redirected to the 'Demo Content Install' section. Click on the 'Install' button and wait a few moments.
By the end of the demo import process, you're automatically redirected to the home page.
To set up front page for your site go to Settings>Reading Settings
When you are done, please don't forget to Save changes
When setting up a WordPress site, we often use pre-made WordPress themes. Very often we rename themes in order to represent them as our own products. But it often leads to unpredictable issues. In this article we will tell you why you can't rename themes.
Be it a premium theme or a free one, like Twenty-Sixteen, they are getting updated by their creators providing some new features or fixing bugs. It is very important to keep your theme up-to-date for maximal compatibility with WordPress and other plugins you might use with your theme.
Most modern themes come with automated update function, that lets you get updates directly from your admin dashboard. If you renamed your theme, this function isn't available for you anymore, because updates are linked to the particular theme name. Of course, you can download the latest theme package and upload the files via your FTP client (for example via Filezilla program). But very often this option is ignored and you continue using an outdated theme for months until you realize it's time to update. But it is already too late, because of two possible reasons:
The one and only solution is to use a CHILD THEME. Each modern theme comes with a child theme. It fully inherits parent theme functionality, it serves for all possible code modifications and it doesn't require updates. Child theme can be renamed!
If you are going to rename your theme, it is recommended to install the child theme from the start of your work. Follow the next steps:
That's all! Now your theme is renamed. You can make any code modification in the child theme without touching the original code. You can update the parent theme without worrying for your changes. And the most important thing - automated update function is still available for you.
In order to update the theme manually, follow the next steps:
The Dashboard Update Screen provides information on available updates. The number of available updates appears as a notification bubble next to the Updates menu item.
From this page you can update:
Page is created under Pages>Add New tab. Create a new page, enter title and begin adding content.
Content can be added via:
In the 'Customize design' box you can customize the following options:
Header. In order to edit header section, switch 'Change settings?' toggle to 'Yes' and customize the following options:
Stunning header. In order to edit stunning header, switch 'Change settings?' toggle to 'Yes' and customize the following options:
You can control display and position of the sidebar on page in the 'Sidebar Picker' box.
The options are:
NOTE: If you choose Right sidebar or Left sidebar, you can also specify which if the existing sidebars to show.
King Composer plugin comes bundled with Seosight and is the main page builder in the theme. It provides backend and frontend editors. You can use one that is more convenient for you.
To start editing with Backend Editor you need to:
Start adding elements to your page. You can do it in two ways:
All KC elements are divided in tabs by functionality and have small thumbnails above titles to demonstrate their role in the theme.
Each KC element has a lot of customization option that are also divided into tabs:
Each section has a number of options that you can customize the way you want. Click on the 'PENCIL' icon on the top right corner of the section box to open row settings.
The row settings are:
There is number of options allowing to manage sections on page according your needs. They are:
There are 5 animation variants for sections in Seosight theme. They are located under 'Animate' tab in Row Settings and are represented by thumbnails.
If you want to enable one of them in your row, simply choose the desired animation type and save changes.
1. Install and activate Child Theme
2. Copy the folders 'images/animated' from the main theme to the Child theme
3. Upload your images to 'animated' folder naming them the same as default images.
Note: We recommend to upload images of the sizes equal to the default images dimensions.
Fullscreen slider is created under Appearance>Sliders section. Click on Add New button and configure general slider settings:
When you are done, hit Create button on the right hand side of the screen.
Now you are in the slides editor. Click on Add New button to add a new slide.
Configure the slide using the options below:
When you are done, hit Add Slide button to save changes and proceed creating new slides.
When the slider is ready, hit Save button on the right hand panel.
To add slider on your page, choose 'Slider' shortcode in King Composer editor and select required slider from the sliders list.
In order to make the slider fullwidth, edit row settings and choose 'Stretch all content & wrapper' option.
As alternative to the integrated contact form builder, forms can be created with Contact Form 7 plugin. It comes bundled with the theme and is fully supported by it.
With help of Contact Form 7 you can create any form you need. You can do the following:
NOTE: For creating a form minimal HTML knowledge is required.
Before creating a form make sure that Contact Form 7 plugin was installed and activated according to 'Theme installation' tutorial.
Begin creating a form:
If you think that default form layout is too simple, you can create custom layout with different columns, like in Seosight demo or other.
In order to create a form with several columns, you need to wrap your field shortcode into HTML <div></div> tags with bootstrap grid classes inside them.
NOTE: More information on bootstrap grid you will find in this tutorial.
First of all add <div></div> tags with bootstrap classes, put cursor between them and add required field from the top panel.
In the popped up window fill in 'Name' and 'Default value' fields. On demand check ' Use this text as the placeholder of the field' and 'Required field' checkboxes.
Hit 'Insert tag' button and continue adding fields by analogy.
IMPORTANT: If you want to add a form with square border on one side, like the one on the image below, you need to enter classes inline-first and inline-last into 'Class Attribute' field.
The above information describes the way to add form fields with placeholders. If you want your fields to have labels instead, you should wrap field shortcodes into <label></label> tags as in the example below.
If you want to make form fields required as shown in the form above, you need to do the following:
Once you've added all form fields, add Submit button shortcode without any HTML tags.
If you want to have custom layout for the Submit section, for example, like on Seosight contact page, HTML formatting is required.
TIP: All contact forms used in Seosight demo are included in demo import. You can use them as a basis for your own forms.
After you have finished adding form fields, switch to the 'Mail' tab and set up email submission and message template options.
By default Mail options look something like this
You need to customize the fields according to your website and form configuration.
In the To field enter email address which emails will be sent to.
In the fields From, Subject, Additional Headers, Message Body replace default shortcodes with ones used in your form. All of them are listed on the top of the Mail tab.
In the From field edit default <wordpress@example.com> code in accordance with your website URL.
For example, if my site is at http://seosight.local , the code must be <wordpress@seosight.local>
If some of the fields are not used in your contact form, for example Subject, you can replace [your-subject] shortcode with a plain text.
When you are done, send a test email and check the email template. If some fields are displayed as shortcodes or there is no text in your message body, then something is wrong in your settings. Check them once again and configure according to this tutorial.
When the form is ready, add it to your page via 'Contact Form 7' shortcode in King Composer editor.
Switch to 'Styling' tab and choose:
You can configure further options under Box Style, Input and Button tabs.
When you are done, save settings and view the form on page.
Starting with version 2.0. Seosight theme comes with integrated contact form builder. All forms are created and stored in Forms section of your admin dashboard.
IMPORTANT NOTE: If you have updated the theme, but the Forms section didn't appear on the left panel of your admin dashboard or you see an error in it, please refer to Contact form builder troubleshooting for futher instructions.
To create a new form go to Forms>Add new and type in the title of your form. Title is displayed only on the backend and is needed only for easier navigation through your forms.
Begin adding fields by using elements represented under Form fields tab.
Once you have added a field, click on it one time to open settings window. Each field type has its own settings. Configure each field and press "Save" button.
You can create almost any form layout you need. Control fields width with the arrows on the top left corner of the field.
On the top of the form, you can enter title and subtitle. They will be displayed on the frontend before the form itself.
As soon as the form is ready, switch to the Settings tab to set up email and form messages.
Under Settings>Mailer you can set up send method and test connection by sending a test message. You can also fill in the "From Name" and "From Address" fields, that will be displayed in all received emails.
You can add contact forms on pages with Form module of King Composer editor. You can use Backend as well as Frontend editor for this.
NOTE: If you want your form fields to have square border on one side, enter inline-form class into 'Extra Class' field.
Switch to Styling tab to configure styling options. There you can set color scheme for the form (White or Dark) and color of the submit button:
There are futher options that let you choose custom settings for each element in the form. They are:
Box style
When you are done, save changes.
IMPORTANT: Frontend Editor option was added in Seosight version 2.0.
The main advantage of the Frontend editor is that you can edit page directly on the frontend and view changes in real time.
To start editing with the frontend editor click on the 'Live editor with KC Pro!' button, if you stay in the backend...
.... or on the 'Live Edit with KC Pro!' link on the top admin bar, if you view page on the frontend.
When the editor mode is active, you can see the same editor box as in the backend editor.
To add element click on the 'Elements' button or select columns layout first and then add elements by clicking on the 'PLUS' icon.
Once you have added an element, configure its settings and save changes by clicking on the 'CHECK' icon or press CTRL+S .
In order to add more elements to the same column or row, click on the element with the right mouse button, hover over 'Add Element' option and choose one of the popped out options - Before or After.
There is a number of option allowing you to manage rows and element in the frontend editor. They are:
Edit/double/copy/delete options. If you need to edit, double, copy or delete the element, hover over its title on the top right corner of the element box. Below will appear navigation icons to choose.
The same is related to the row - if you need to edit row, hover over the 'Row' title to edit, copy, double or delete it.
Rows and elements reorder. If you need to move element to another row or you want to move row to another location, simply click and hold the row/element name and drag the row/element to the target location.
Columns width management. You can change width of the columns in the row with simple drag and drop function. Simply hover over the square between the columns, hold it with the left mouse button and drag the mouse to the left/right changing width of the columns.
Once you finished editing the page, clikc on the 'Save changes' button and then 'Exit Editor' on the top admin bar.
To create a single post you have to:
Or you can use tag Read More tag in your Visual or Text editor. The text written before this tag will be shown on your blog, category, archive pages.
OTHERWISE The entire post content will be displayed on your blog, category, archive page
You can control your post style with 'Post Format' option. Seosight theme supports most common WordPress post formats, you can read about them here: https://codex.wordpress.org/Post_Formats
To choose of what format will be your post, just select desired one from the radio-button list and start filling the content
Let's overview all post formats represented in the theme:
Use it to create a simple post with regular style. It is default post format and no ordinary options required.
More about a blog post creation you can read here:
Displays video player on your blog and post page.
Just add the link to YouTube or Vimeo video in appeared Video post options:
Displays audio player on your blog /category/ post page.
Enter link for audio that will be embedded
Displays a quote block on a blog archive page.
Add a quote in a visual/text editor and fill in the fields appeared after quote post activation
Allows to show post linked to another page/site.
To create link post, add the text you want to be displayed on blog into text editor and wrap it with the link
To create a blog page that will display all your blog posts go to admin panel Pages and click Add new.
Give a title to your page and after that choose Blog in Page Attributes>Template
If you want any content displaying before your posts you can put it into Visual/Text editor or add it with KingComposer.
When you are done, click Publish and get your blog page.
Now you can adjust your blog settings.
Blog options are located in Customize > 'Blog options' tab. They control display of the blog page, post categories and tags pages.
There are only two options for archive pages:
Once you have chosen required options, hit the 'Save & Publish' button.
To create portfolio post, please follow the instructions below:
Set desired sidebar position under Sidebar Picker tab.
NOTE: The sidebar will be applied to the additional content of the portfolio
Portfolio design options you can find under the tab Customize design. Let's observe them:
To create Portfolio page that will show all your portfolio posts go to your dashboard Pages tab>Add new. Type a page title and select Portfolio template in Page attributes
Click Publish button and see your portfolio
If you need some content shown before portfolio items, then add it into Text/Visual editor or use KingComposer page builder
Now you can work over portfolio design and options
Single portfolio options let you control display of the single portfolio items. They are localed under Customize>'Single Portfolio options' tab.
The options are as follows:
IMPORTANT NOTE: If you need custom settings on selected portfolio items, you can customize them in the page editor of the single portfolio item.
By default King Composer editor is enabled for pages. If you want to use it in portfolio projects and posts, it can be enabled for them too.
All you need to do is to go to King Composer > General Settings in your admin dashboard and check 'post' and 'fw-portfolio' checkboxes. When you are done, click Save Change button.
After that you can edit your posts and portfolio projects as described in King Composer - Backend Editor and Row animations in King Composer tutorials.
To add and style your content in sidebars and footer you can use widgets. Go to Appearance>Widgets.
There are default WordPress widgets that take the theme style though. More about WP widgets you can read here: https://codex.wordpress.org/WordPress_Widgets
And there are also additional theme widgets. To add a widget to your sidebar/footer, just choose it and drag to the right side inside needed area. Then start configure settings filling in needed fields and selecting desired options.
NOTE: To add an additional field in the widgets that allow it (like Follow us widget), you need first save previous options for to activate Add new button
BannerBanner with a background image, text, icon and button |
Category listshows taxonomy objects with number |
Contactsdisplays contact information with description and icon |
Follow usadds links to your social accounts |
Latest Newsshows the preset number of latest posts |
Loginadds login form |
Menusallows to display custom menus in two columns |
Tags cloudshows the preset number of tags |
Text with buttonadds a text block with title, short description and button |
Theme options panel lets you control general settings across the site. You can reach it via Appearance>Customize menu in the backend editor or by clicking on the 'Customize' link on the top black admin bar in the frontend. Options are divided by meaning and are represented by several tabs. Let's take a closer look at them.
In order to set favicon and site title go to Customize > 'Site Identity' tab. Fill in Site title and Tagline fields and upload favicon by clicking on the 'Select Image' button.
Once you are ready, hit the 'Save & Publish' button.
If you need to set/change home page on your site, go to Customize > 'Static front page' tab. There are two options:
Once you have activated 'A static page' option you can see another dropdown list called 'Posts page'. This option is required to enable posts page in default Wordpress themes. In Seosight it is not required. So you can leave this field empty.
Once you are ready, hit the 'Save & Publish' button.
Header options are configured under Customize > 'Header options' tab. There you can adjust settings for:
By default top bar is disabled. Go to Customize>Header options>Top bar and activate it by switching toggle to 'Show'. Below will appear all options available for the top bar.
Top bar options let you adustthe following pareameters:
You can show/hide sticky header on scroll:
When sticky header is activated you can also set the animation when it appears/hides on scroll or turn it off:
PS: The sticky header option is available from the v.2.1.
Logotype options are as follows:
Search options are as follows:
Aside panel is a hidden menu that is opened by clicking on the round red icon on the right side under the top menu.
Aside panel can be activated in Customize > Header options > Aside sidebar.
You can also activate logo and add some text that will be displayed on the top of the aside panel.
In order to add some widgets to the aside panel, go to Appearance>Widgets section and add any widgets you like into Hidden Widgets Area with drag-and-drop function.
Aside panel is a hidden menu that is opened by clicking on the round red icon on the right side under the top menu.
Aside panel can be activated in Customize > Header options > Aside sidebar.
You can also activate logo and add some text that will be displayed on the top of the aside panel.
In order to add some widgets to the aside panel, go to Appearance>Widgets section and add any widgets you like into Hidden Widgets Area with drag-and-drop function.
Page title section is called Stunning header and is represented by the page title text and background behind it.
By default stunning header is turned on. If you want to hide it, go to Customize>Stunning header and switch Show stunning header? toggle to 'Hide'.
In the same section you can control size of paddings on the top and bottom of the stunning header.
There is a number of options that let you customize look of your stunning header. Here are they:
When you are ready, hit the 'Save & Publish' button.
You can control primary and secondary colors of the theme in Customize>Design Customize section.
The elements that apply primary and secondary site colors are buttons, icons, hover elements, title delimiter and some other KC shortcodes.
NOTE: KC shortcodes won't apply settings from 'Design customize' section, if they have colors other than primary or secondary. In this case, you should edit the shortcode and choose custom color from its 'Styling' tab.
There is a list of words and phrases in the theme that can be translated into different languages.
You can translate them with different tools:
Seosight comes with a translation file seosight.pot that include translatable strings for the theme. It is located in wp-content/themes/seosight/languages/ folder.
1. Install POedit on your computer http://poedit.net/ .
2. Open seosight.pot file in it (located in wp-content/themes/seosight/languages/)
3. Begin translating all or some phrases into your language.
4. When all phrases are translated, save the file in the following format {theme_domain}-{ru_RU/en_GB}.{mo|po} .
5. After the .PO file is saved, a .MO file is created automatically.
6. Upload both files (.PO and .MO) via your FTP account into wp-content/languages/themes/ folder.
Translation will be applied automatically, if you have installed WordPress in corresponding language.
NOTE: It is highly recommended to save a copy of your .PO file on your computer location.
If demo import process fails on your installation and you get an error kind of cURL error 28: Connection timed out after 10001 milliseconds, we recommend an alternative way to import demo data.
1. Find demo-content.zip archive in 'etc' folder of Seosight package.
2. Unzip it and upload to the root folder of the theme ( wp-content/themes/seosight)
3. Go to Tools>Demo Content Install where you will see two demo options. You need to install Local Demo.
That's all!