Setting up your front page like the live demo site is what this tutorial is about and will apply to both the free version of Celestial as well the Pro version. This tutorial will be written with the assumption you have not setup a “Static Front Page” yet.
Step 1 – Create Two Pages for Home and Blog
- Go to Pages >> Add New
- Title your first page as “Home” or anything you want, and then assign the page template: Front Page Widgets Only
- Click “Publish”
- Make another page called “Blog” or whatever you want, but nothing else needs to be entered
- Click “Publish”
Step 2 – Setup the Static Front Page for WordPress
- Go to Settings >> Reading >> Then on the Front Page Display section, select the Static Front Page settings by choosing the pages for each of the Front Page and Posts Page (the blog)
- Click Save Changes
Step 3 – Get the Advanced Text Widget
We need a special widget for this called “Advanced Text Widget” because it offers additional features that the default WordPress text widget (or any default widget) offers, such as assigning the widget to a location, and also being able to disable the title. If you already have this installed, you can skip to the next step.
- Go to Plugins >> Add New
- Search for “Advanced Text Widget”
- When it shows up, click on Install and then Activate it.
Step 4 – Creating Your First Widget
- I recommend preparing your images first before uploading, but if you are going to publish 4 widgets to the front page, each with a thumbnail, your image should be about 260px wide, but I made the demo ones a bit larger at 270 x 125 pixels (your images will resize down to fit).
- Upload them to your Media Library and make note of the full path to the image and each image because we need these in a few moments.
- Go to Appearance >> Widgets
- Drag the Advanced Text Widget to the “Front Page Top 1” position and then add your content. To help you out, below is a snippet of html code that was used on the demo site, just update the path to your image (remember we copied the path earlier).
- Click Save
- Repeat the process for each new widget.
First Widget Code Snippet
<div class="post-thumbnail" style="margin-top:10px; padding:6px;">
<img class="center" src="your-image-path" alt="image description" /></div>
<h3>Fully Responsive</h3>
<p>Celestial is a fully responsive WordPress theme for you to enjoy viewing your website in your favourite mobile device. I've incorporated the popular Twitter Bootstrap framework to give you more flexibility whether you are on a desktop or an iPhone.</p>