Looking to set up your site using TheFour? This document will walk you through the process.
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.
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
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:
- Create a page.
- Go to the Customizer’s Static Front Page panel and set Front page displays to A static page.
- 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
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.
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 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.
To edit the section title, go to Customize → Theme Options → Portfolio section title.
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
emtag, like this:
- 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:
<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.
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 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).
- 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.
- Add a few child pages. Learn more about creating child pages here.
- 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 More Options → Excerpt box: