How to Update Your Website with the Powerful Integral Theme

(Last Updated On: December 19, 2017)

Visitor sentiment

IntegralThe aesthetics of your website will often determine the visitors sentiment towards you. So, it is necessary to update your look once in a while. A good way is to use the Integral WordPress theme. I searched Google for the free Integral WordPress theme & downloaded it.

This website is built using Integral Pro.

Finding Integral documentation

I found it impossible to find documentation to solve every setup problem I was having. So, I decided to upgrade from the free to the Pro version of Integral so that I could get more help. Then I would take what I learned and make it into a step-by-step tutorial for you.

How to install Integral in 3 steps

1. Backup entire website

Backup your entire website to a cloud such as Google Drive. Use a WordPress plugin called UpdraftPlus. My website has well over a hundred posts & pages. It took me just a few minutes to backup the entire website to Google Drive.

2. Buy Integral Lite

Search Google for the free Integral WordPress theme & downloaded it.

3. Go to Themely support

You would have bought Integral Lite from a company called Themely. Go to Themely support. Search for something such as “How to upgrade Integral Lite to Pro version”.

IntegralIf you scroll down a bit, you will see a YouTube video. Expand to full screen & watch it. Pause frequently to write down each step. Use your notes to upgrade to the Pro version.

 

How to setup Integral in 9 steps

1. Open Themely Support

Go to Themely support again. Make sure you are logged in. Keep it open as you are going down the points below.

Different people have different learning styles. You may find a point below confusing. If so, go to the Knowledge Base section and search for your question.

If you cannot find the answer, you may have to go to the Support Forum and ask a question.

2. Log into your website

IntegralGo to your home page. Anytime you wish to edit your website, simply open your homepage & add “wp-login.php” to the end of the URL. Make sure there is a slash (/) before the “wp”.

3. Insert background image

IntegralClick Integral Options > Welcome.

You need a high resolution image a minimum of 1600 pixels wide. It must be an image with a “wow” factor and make visitors want to stay for more.

IntegralIf you do not have one, here are several sources of paid images:

  • Free images. They give away lower quality photos & charge for higher quality photos.
  • bit.ly/nocostimages. They give away lower quality photos & charge for higher quality photos and for very short video clips.
  • adobe.com. Click on Adobe Stock “St” link for photos, illustrations, graphics & videos. Cost is flat $30 (USD)/month for 10 images. What you do not use accumulates into the next month.

To insert image:

  • In background section, select a background colour that complements your image and upload your 1600 px (minimum) picture.
  • I recommend keeping your background overlay on so that your title lines & tagline will show up.
  • Save your changes.

4. Experiment with Integral Options

Open up Integral Options and, starting at the top, look at each option to see if it would be worth your while to use it. Use Themely support to get a better understanding of what each option is all about.

IntegralAfter you have experimented with all options and inserted some of them into your homepage, rearrange their order. Go to

  • General Settings
  • Homepage Layout.

You can drag and drop the various options to various locations to decide in what order you want them and whether you will use them or not. You definitely want Projects Grid to be enabled.

5. Projects Grid Section

The projects grid section is important to  the homepage of this website. So, I wish to devote a bit of space to that option.

IntegralIn your WordPress dashboard, go to

  • Pages
  • All Pages

IntegralHere you decide which of those pages should be summarized on your grid. Each cell in your grid will have a title and, optionally, a summary of that page along with a link to that page.

On scrap paper

  • Write names of pages you want represented on the grid
  • Group similar pages together
  • Jot names down in order of importance

You will end up with something that looks like a table. For example, you may have 3 columns across and 4 rows down having a total of 12 cells. Among other things, each cell could have a short description of a page along with a link to that page.

IntegralGo to

  • Integral Options
  • General Settings
  • Homepage Layout

Then drag everything except Hero  & Projects Grid into the Disabled column.

IntegralYou start by going to

  • Integral Options
  • Projects Grid
  • Projects Layout

Here you can choose whether or not you will have 1, 2, 3, 4 or 6 columns per row.

Then go to

  • Appearance
  • Widgets and locate
  • Homepage Project Grid Section
  • Drag and drop as many Integral Grid Project Widgets as you would like to this section.

IntegralNote that you keep dragging & dropping the Integral Grid Project Widgets into the bottom of the Homepage Project Grid Section. Let’s say you have 3 columns in a row and you have a total of 7 items to promote.

After a row is filled up, the next Grid Project automatically shows up in the left-hand column of the next row. So, the 7 items would show up like this image with the last item in the left-hand column.

Much of this is intuitive. Tip: It helps to use an image editor such as GIMP to make sure all images are the same height. The images on our home page grid were all exactly 300 pixels high.

This website was my first Integral Pro website. In my next website (growinglove.club):

  • I made every grid image exactly 600 x 300 pixels
  • I would not add any posts to a grid until there were exactly 3 new posts
  • To simplify adding new Grid Project Widgets, I made use of the dropdown arrow on the right. I always made sure the widget was closed unless I was working with it.

6. Tiny logo

To add a tiny logo to the top left-hand corner of every page, go to the WordPress Dashboard & click on Appearance > Customize.

Scroll down the left-hand menu & click Site Identity.

  • Read instructions under Logo heading
  • Add logo
  • Click Publish button at top

7. Horizontal menu

IntegralIn the WordPress Dashboard, click on Appearance > Menus. Here you clickIntegralon

  • Create a new menu
  • Create Menu (click after you name it)
  • Dropdown arrow to select menu name (Integral Menu in example above)
  • Select button
  • Check boxes beside Pages, Posts &/or Custom Links you want in your menu
  • Add to Menu

Under Menu Structure, drag & drop tabs in order you want them. In all likelihood Home will be a Custom Link and should be at the top. Submenus can be indented to the right.

Save menu and open a web page to check your work.

If you are still having trouble, make sure you are logged into Themely Support and then go to a Menu Knowledge Base page.

8. Install child theme

In all likelihood, you will want to go behind the scenes & update the look or functionality of your website once in a while. In my case, I wanted to insert some PHP code so that I would be able to add Featured Images to both pages & posts. Before I added the PHP code, I could add the Featured Images only to the posts.

Here’s the problem WordPress used to have: All themes are updated once in a while for security & other reasons. When a theme was updated, all of the little changes such as adding a snippet of PHP code would be lost.

WordPress solved that problem by introducing child themes. The upgrade used to happen only to the parent theme. The new parent can now access all changes from the child.

If you are going to take WordPress paid themes seriously, you really should learn about child themes. You should download & install a child theme now. Then do the exercise in section #8 below.

Downloading & installing child theme

    • In WordPress dashboard, go to Appearance > Setup Integral Pro
    • In the horizontal menu, click on Child Themes
    • Click Download button within Integral Pro Child Theme
    • In Downloads folder you will find integral-pro-child.zip
    • In WordPress dashboard, go to Appearance > Themes
    • Click Add New button in upper left-hand corner

Integral

  • Click Upload Theme button in upper left-hand corner
  • After clicking Choose File, select ZIP file and click Install Now
    • This will unzip the file & install it
  • Shortly you will be notified that child theme has been successfully installed

9. IntegralAdding feature images to pages

This website’s blog posts all have images such as this one at the top. It helps to tell the story & gets the reader more interested in reading the post.

With the Integral WordPress theme, it is possible to easily include a feature image to the top of a post.  However, it is not possible to add a featured image to the top of a page without changing the  website’s source code.

The example below tells how to add a PHP code snippet to a child theme so that Feature Images can be added to pages & not just posts.

Specifically you must paste the following code into line 27 of page.php in the child theme: <?php if(get_the_post_thumbnail()) { ?><figure class=”post-image”><?php the_post_thumbnail(‘large’,array(‘class’=>’img-responsive’)); ?></figure><?php } ?>.

Here’s how to do it if LiquidNet Hosting is your web host. If you have a different web host, you may have to use your intuition to change these instructions a bit:

  • Go to Files > File Manager
  • Double-click on domain name in question
  • Double-click on wp-content
  • Double-click on Themes
  • Double-click on Integral-pro
  • Right-click Copy/Duplicate on pages.php
  • Click on Browse folders
  • Domain name > wp-content > themes > integral-pro-child
  • Copy button
  • Cmd C to copy blue code above into clipboard
  • Back button in web host
  • Double-click integral-pro-child
  • Right click pages.php
  • Edit > with plain text editor
  • Go to line 27
  • Cmd V to paste code snippet
  • Save
  • Go to website with which you are working
  • Add a featured image to a page
  • Watch the YouTube video below to help you understand these instructions.

loading…
RSS
Follow by Email
Facebook
Facebook
Google+
Google+
https://kelownavirtualassistant.com/wordpress-integral/">
YouTube
LinkedIn
Instagram


Leave a Comment

Your email address will not be published. Required fields are marked *

0

Your Cart