Skip to content

TheFour Documentation

Thank you for using TheFour theme for your website. We hope you like it! In this documentation, we will show you how to install and setup the basic demo for your website. This takes you only 5 minutes to have the website ready!

#Installation

We have written a very detailed guide on how to download and install a WordPress theme, please follow the instruction in that article.

If you use Portfolio or Testimonial on your website (which is available in the Pro version only), you need to install the Jetpack plugin. Simply go to the Plugins → Add New, type the plugin name in the search box and press Enter. The plugin will appear in the list below, click Install Now button to install it. Then click Activate button to activate the plugin.

After installing Jetpack, you need to connect to WordPress.com to start using it. Simply click the green button on the top right that says Connect to WordPress.com. Login with your WordPress.com account (or create one) and click Authorize Jetpack.

After activating Jetpack, go to Jetpack → Settings → Writing tab, and activate Portfolio and Testimonial in the Custom Content Types module:

Enable portfolio and testimonial

#Demo Content

In case you want to quickly start with the theme, you can import the demo content.

First, please download the demo content.

Then go to Tools → Import to start importing the content.

#Setup

#Header Setup

Custom Logo:

You can add a custom logo by going to Customize → Site Identity and uploading your own logo image.

Navigation:

The main navigation appears at the top right of every page of your website. On tablet and mobile devices, it will be hidden behind a toggle button. To set it up, simply create a new menu via Customize → Menus and assign it to the Header location.

Header image:

Navigate to Customize → Header Image and upload your header image, which will appear as the background of the header section on your website.

On single posts and pages, the header image will be replaced by the featured image.

On single projects, the featured image is not used for the header by default. To enable that, please go to a single project first. Then go to Customize → Theme Options and tick the checkbox "Show Featured Image In The Header?".

The recommended size for the header image is 1920x500.

#Setting up your front page

When you first activate TheFour, your homepage will display posts in a traditional blog format. To set up your homepage, follow these steps:

  1. Create a page.
  2. Go to the Customizer’s Static Front Page panel and set Front page displays to A static page.
  3. Select the page you created in step one as the Front page, and, if you plan to have a blog as well, choose another page as the Posts page to display your blog posts.

#Front page sections

thefour wordpress business theme

Click to view the large version

 

Front page content

The Front Page content will be among the very first things a visitor arriving on your site sees. You can add any type of content here — on the demo site, we used an image.

If you want to use the same image as we did, you can download the Photoshop file here.

Features Section

The Features section displays the content of the page that you choose in the Customizer, by heading to Customize → Theme Options. To set it up, you’ll need to create a page named Features (or any name you prefer) first, and add the content you’d like to display in this section of your homepage.

Recent Work Section

This section shows the latest 8 projects from your portfolio. Remember to install the Jetpack plugin and enable the Portfolio in Custom Content Type module in Jetpack (please see the Installation section above for details).

To create new a Portfolio project, go to Portfolio → Add, add a new project title and the desired content, and set the Featured Image. Be sure to add Project Types too, which are used to filter the projects on the homepage.

To edit the section title, go to Customize → Theme Options → Portfolio section title.

To change the number of projects shown in this section, in the go to Customize → Theme Options → Number Of Projects In Portfolio Section.

Testimonials Section

This section shows the latest 3 Testimonials. Remember to install the Jetpack plugin and enable the Testimonial in Custom Content Type module in Jetpack (please see the Installation section above for details).

To create a Testimonial, go to Testimonials → Add and add a new one. Please note:

  • The post title should be the customer name. To add the title of the customer, wrap it in an em tag, like this: Customer Name<em>Title</em>
  • The customer image is the featured image.

To edit the section title (Testimonials), go to Customize → Theme Options → Testimonial Section Title.

Call To Action Section

This section can display the custom HTML content of your choice. It’s a good place to add some marketing text and a call-to-action button. To edit the content, go to Customize → Theme Options → Call to Action Section Content and add your content.

TheFour comes with two special CSS styles, button and button-minimal. You can add these classes to your links in the Text Editor, to create call-to-action buttons:

For example:

<a href="http://thefourdemo.wordpress.com/" class="button">Button</a>
<a href="http://thefourdemo.wordpress.com/" class="button-minimal">Button Minimal</a>

Recent Posts Section

This section displays the latest six posts from your blog. You can change the section title via Customize → Theme Options → Blog Section Title.

Image Section

This section is used to display client logos in the demo, but can be used to display any graphic, like a map or a marketing banner.

To change the image and the section title, go to Customize → Theme Options.

#Footer

TheFour includes one optional widget area in the footer. To add widgets to the footer, go to Customize → Widgets → Footer. The widgets will be arranged in up to four columns automatically.

#Grid Page Template

TheFour has a built-in Grid page template which can be used for listing your products or services (similar to the Services page on the demo). This template displays all child-pages of a page in a grid (note that they need to have Featured Images to be shown in the grid).

  1. Create or edit a page, and assign it to the “Grid” page template. Any content you can add to that page will be displayed above the grid.
  2. Add a few child pages (select the page you created above as the parent page from the Parent dropdown in Page Attributes box),
  3. Each grid item consists of the child page’s featured image, title, and content.

By default, each grid item displays an automatically generated post excerpt. You can manually change that text by entering the page excerpt in the Excerpt box.

#Customization

We recommend using a child theme to customize the theme. Here is the guide how to do that.

In addition, you can customize the theme CSS using Custom CSS by going to Customizer → Additional CSS.

If you want to customize the fonts, we have a powerful and easy-to-use plugin that can help you do that.

We hope you live TheFour. If you have any question, please send us a support ticket.

#FAQ

1. What is the size of the logo?

There's no restriction on the logo. You can upload any size you want. It will display as it is with the real size. You should resize it on your computer before uploading to the WordPress. In our demo, we use the size 50x56. You might want to use this size if you want your logo looks similar to the demo. We've seen some sites using large logo and it's totally fine.

2. How to remove the gray overlay in the header image?

Please go to Customize → Additional CSS and enter the following CSS:

.site-header:after { display: none; }

If you're using wordpress.com, please note that it requires you to have the Premium account to control the CSS.

3. How to hide blog posts on the homepage?

Please go to Customize → Additional CSS and enter the following CSS:

.home .blog { display: none; }

4. How to remove post date on single posts?

Please go to Customize → Additional CSS and enter the following CSS:

.entry-date-wrapper { display: none; }

5. How to remove author name on single posts?

Please go to Customize → Additional CSS and enter the following CSS:

.entry-meta { display: none; }

6. How to remove the term "All" in the Recent Projects section on the homepage?

Please go to Customize → Additional CSS and enter the following CSS:

.filter li:first-child,
.filter li:nth-child(2):before {
    display: none;
}

Table Of Content

Scroll To Top