TheFourby eLightUp

Looking to set up your site using TheFour? This document will walk you through the process.

Header Setup

Custom Logo

You can add a custom logo by going to Customize → Site Identity and uploading your own logo image. Detailed setup instructions can be found here.

thefour-logo

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 Customizer → 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.

The recommended size for the header image is 1920x500.

thefour-header-image

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.

thefour-homepage

Front Page Sections

TheFour WordPress Theme Annotation

Click to see full image

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.

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.

thefour-features-section

Recent Work Section

This section shows the latest eight projects from your portfolio. 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.

thefour-portfolio

To customize this section, go to Customize → Theme Options and there are 2 options you can customize:

  • Portfolio section title: the section title
  • Number Of Projects In Portfolio Section: select how many projects are displayed in this section or hide them completely.

Testimonials

This section shows the latest three Testimonials. 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.

thefour-testimonial

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-call-to-action

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.

thefour-flourish

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).

TheFour Grid Template

  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. Learn more about creating child pages here.
  3. Each grid item consists of the child page’s featured image, title, and content.

thefour-service-page

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

thefour-service-page-excerpt