TopClass Settings

Installation of TopClass WordPress Theme and necessary plugins is finished.

Now it’s time to configure the other necessary settings ūüôā TopClass has a fantastic pwoerfull Admin Panel

Go to the Top Class Settings  and start configure TopClass WordPress Theme !

TopClass comes with a fantastic powerful Admin Panel in where you can update almost every part of the Theme. Just go to your WordPress admin panel and click on Top Class Settings.

From the Global Management sections, you can manage/sort Section orders and overall color settings. Also you have options to put Custom CSS, Google Analytics Code and a big library of Google Fonts

Go to TopClass Settings > Customizable Section. In Customizable Section you can change your website Logo, Favicon, Admin Logo. Just upload your images and click save. Also you option to show or hide logo, favicon.

It looks like as follows.

Go to TopClass Settings > Slider Section. You have ability to control your website slider at Slider Section.
To Show Slide on your website, you have to Create Slide First what will be shown here below of this part.

But in this section you can,

  • Turn off or on the ¬†slider to display
  • Show Slider menu on menubar and also choose the text for menu bar.
  • Change or remove the Background parallax image

Add New Slider

You have to Create Slider Content to Show Slider. To create New Content for Slider Section,
Go to¬†Slider Menu > New Slider¬†on the admin panel’s left side bar which will be as follows

Let us explain a little about the above part. There are 3 part/heading of text in each slider. If any one of this part is empty, that part/heading will not be desolated,

              We are <span>Top</span> Class

You may add a span tan inside the heading text as above what will display the theme color for the embed text.

And in each Heading, you have option to add Animation which is integrated with animation.css!


There is a Button option on each slide, if you want to show it, put some text like Get Started and add the buttons URL but if you don’t what to show it, just make it empty!

The Slider will looks like as follows

Go to TopClass Settings > About Us Section.

There are three part on this section

  • About Us Section
  • Display Counter Section
  • ¬†Video Parallax Section

which will be described below.


About Us Section

In this section, you have options to

  • show or hide this section in Front Page
  • display or hide in Menu bar
  • Title in Menu bar
  • Section Image Update or Remove
  • Section Title
  • Section Sub-Title
  • Post Title and post text.

Put the Section Title as .

          <span>About</span> Us

The span is used to display the theme color in the embed text on Section Title.

Display Counter Section 

By default Display Counter Section is off, Turn it on and then put the Counter & Text as bellow.

There is a little format to set the Counter and text which is as below

4, Members

This will create a circle with the number 4 and text Members! what is looks like as below

Display Video Section

In this section, you have options to

  • Turn off or on this section
  • Video Button Title
  • Video URL
  • Parallax image update or remove
  • Video Button image update or remove

Here you can set Video and also play button image. Video will be taken form YouTube or Vimeo. Just upload a video on Vimeo and put the URL of that video here to play!

It will looks like on your site as below.

Don’t forget to Save Change ¬†ūüôā

Go to TopClass Setting > Team Section .Team Section is also a big section like About Us section which is as follows.

In this section, there are three part as follows

  • Team Part
  • Team Skills Part
  • Parallax Part

Team Part

The first part of Team section is Team Part from where you can turn off or on team section. you can add section title, section subtitle.

Add New Team Member

To add the Team member you have to go to Teams on the left side bar of admin panel and then choose, New Team Member . Put all necessary fields and then choose  the Team member Image as a Featured Image  See on the right bottom part for Fearuted Image.

Now Publish, You can add many team member accordingly as your requirements.

Team Skills Part

You can add Team skills part from here on the Team Section of the theme management part. You can either turn off or turn on accordingly.

Give a Skills Title, Now time to add skills! It has a format as follows

Clidk to Add More button and then follow the following format to add skills

Text, percentage, animation name, animation delay

Example :

JavaScript,75,fadeInRight, 0.3

Parallax Part

This is the Product quality section with parallax option. you have option or turn off or on it. Put data on this section accordingly as your requirements And then update.

Go to TopClass Settins > Service Section. This section looks like other section but you have to Add Service from the left sidebar which will be show after this part.

Add Services

Go to the Services from the left side bar and then click Add New Service and then add the necessary datas and icon. Then publish it. You can add more Service from here.

Go to TopClass Settins > Pricing Section. This section looks like other section but you have to Add Pricing tables from the left sidebar. See below of this image.

Add Pricing tables

Go to the Pricing Tables from the left side bar and then click New Pricing Table  and then add the necessary data like

  • Currency symbol
  • Price
  • Fraction Price
  • Duration
  • Table Elements
  • Buttons Text
  • Button link
  • background Color/Table Style
  • Animation style

Keep in mind that the Table Elements will be each in one line to display in a new line like following

              < span>5</span> Domain Uses
              14+ <span>WordPress</span> Theme
              32+ <span>HTML</span> Template
              Unlimited <span>Bandwidth</span>

Then publish it. You can add more Pricing tables from here. In the Pricing Duration, If you don’t want to show the Duration in Hour/Day/Month etc…Choose Don’t Show.

You can control Portfolio Section  from TopClass Settins > Portfolio Section.
There are tow part as follows

  • Portfolio Part
  • Our Client Part
  • Parallax Part

The portfolio section looks like as following image. the all necessay step of this part are shown below of this iamge.

Add New Portfolios

Go to the Portfoliose from the left side bar and then click New Portfolio  and then add the necessary data. Keep in mind that you have to add Featured Image as Portfolio Image and then publish.

Now, give a post name, write about the portfolio item. Than give a category of the post and also add a featured image. Then on the bottom of the text editor, Upload Portfolio Image, give Client name, Project end date and also Project URL

After putting all necessary data, publish it and add more following same way.

On the home page, only the featured image and project title will be displayed but on the portfolio details page everything will be shown.

To show Clients Logo Gallery you have to on it rom TopClass Settins > Portfolio Section and then Add/Edit Gallery Buttons and then Upload and select necessary logos. and then Add to Gallery.

Parallax Part

You can give here  some text  and change parallax background image.

Go to TopClass Settins > Blog Section. There are two part as follows

  • Blog Section
  • Blog Parallax Banner

Blog Section is for Front Page and Blog Parallax Banner is for Blog / Single page top Parallax Background banner.
This Parallax Banner is also for home page if you don’t change the default home page into Front ¬†Page from Reading of Settings.

Go to TopClass Settins > Twitter & Subscribe, there  are two part of this section as follows

  • Twitter Part
  • Subscribe Part


Twitter Part

To Display this part you need a Twitter account, API Key, API Secret, Access token and Auth Access Token Secret of that Twitter account. Create a twitter app on the twitter developer site fromDeveloper Site and put the necessary data into the following part.

Subscribe Part

We have used MailChimp for WordPress Plugin for Email Subscribe. Please make sure that the pluing is isntalled. (See at Plugins > Installed Plugins, If not installed, install it from  Appearance > Install Plugins, the list of  required plugins )
Now go to MailChimp for WP > MailChimp Settings, ¬†Put your API Key for MailChimp (If you don’t have, you will get a link to Get your API of MailChimp) and save it.
Then go to  MailChimp for WP > forms  and then put the following html markup on the

<input type=“email” id=“mc4wp_email” class=“form-control” name=“EMAIL” placeholder=“Your email address” required />

<input type=“submit” class=“subscribe-btn btn” value=“Subscribe Now” />

You do not neet load any Style Sheet, we have styled for the above form code, juse use this, and seve changes.

See there is a shotcode like [mc4wp_form], copy this and now create a new WordPress Page with this shotcode ( Page > New Page ) and give the name of this page as subscribe (or as you wish). And then Publish

Now go back to opClass Settins > Twitter & Subscribe and then select subscribe from Select Subscriber Page

Do’t forget to save ūüôā

Go to TopClass Settins > Testimonila Section. We have used a paid plugins known as All Around Content Slider which has been included with this Theme.

Add Testimonila Page

To add Testimonial you have to create a page using a plugins called All Around Content Slider,¬† if you don’t install the plugin yet, install it from Appearance > Install Plugins. ¬†and then the go to Installed Plugins from Plugins of left sidebar ¬†and Activete¬†

First go to¬†All Around Content Slider and create a new slider and then go to all around slider where you will get a shot code of the slider like¬†[all_around id=”1″] . See hole documentation of¬†All Around Content Slider at

Now crate a new page with the given shot code of the slider.
Now come to the Testimonial control section TopClass Settins > Testimonila Section and Select Testimonial page for the dropdown option. Select the page created for testimonial

Go to TopClass Settins > Contact Section. There are two section  inside Contact Section.

  • Contact Form Section
  • Contact Info Section

Contact Form Section

We have used a plugins known as Contact form 7 for contact form. If you don’t install this plugin, please install it, it’s free and you will get download details at Appearance > Install Plugins.

Now go to Contact > Add New and then click to Add New . 
Now put the following html on the Form box

  1. <div class=“col-md-6”>
  2. [text* your-name placeholder “Your name here”]
  3. [email* your-email placeholder “Your email here”]
  4. [text your-subject placeholder “Your subject here”]
  5. </div>
  6. <div class=“col-md-6”>
  7. [textarea* your-message placeholder “Your message here”]
  8. </div>
  9. <div class=“col-md-12”>
  10. <p class=“contact-form-elements”> [submit “Send”] </p>
  11. </div>

and then Save. After Saving you will get a shot code like

  1. [contact-form-7 id=”18″ title=”Untitled”]

Copy that shotcode and create a New Page with that shotcode and give name of that page as contact-form like subscribe. And the again come to  TopClass Settins > Contact Section. Then add contact-form  from Select contact page.

Contact Info Section

Here you can add contact info like location, thelephone number, fax, email etc… you have option to choose icon for each part but there is a format you have to follow for this.

  1. icon, title, text


  1. li_location, Address, Hamburg <br> Germany

Here, Fist come is separate the icon, second comma separate the title/heading and the rest is as details.

have a look on the icon list and use the class/icon at first shown as above and give the other details and save ūüôā

Go to TopClass Settins > Footer Section. Here you will find the Google Map configuration option and footer Social Buttons and also the copyright info.

Go to TopClass Settins > 404 Settings, set parallax image, 404 error title and sub title then save change.