For a professional web designer setting up a WordPress theme is relatively painless task. For other mere mortals, it can be fiddly and frustrating to say the least.
I’m posting this because I feel the documentation for the Sela theme lets it down a little, insofar, it doesn’t actually explain how to setup the Front Page so that it looks like the demo. The rest of the documentation pretty much explains how to set it up, so I’ll concentrate on the Front Page.
Danny Designs Portfolio Site
Getting Sela Front Page To Look Like the Demo
I setup a portfolio site to show what the theme’s front page should look like, you can find it here – dannydesigns.doncharisma.com Or have a look at the theme’s demo and homepage.
The main issue that’s not addressed in the documentation is how to do three previews of featured pages on the front page. These are created using widgets. To get it exactly the same, with the snippets of text underneath, we need to use a text widget and a little HTML code.
This will be a step by step, guide from A to B starting on a new site :
Step 1 : Create a page called “About” with a little blurb on it mine says – “Danny likes chocolate, lot’s of it. For fun you’ll often find him staring at the stars or expressing mindless platitudes. For work he’s a web designer extraordinaire” … put what’s suitable for your website ! Set Page Attributes to “Full Width template”. Publish it.
Step 2 : Create a page called “Blog” that is blank. Publish it.
Step 3 : Create your three pages. Mine are called “Coffee”, “Web Designer” and “The Trouble With Me”. Set a featured image that’s at least 1180 pixels wide on each page.
Step 3 : Setup your site to have a “static front page” in your dashboard in Settings -> Reading. It’s described in the WordPress.com help document – here.
Step 4 : Create a text widget in the “First Front Page Widget Area”. The code for which is :
<a href="/page-slug"><img src="/2015/04/image-name.jpg" /></a> <p>The fuel of motivated people, keeps the cogs turning ! <a href="/page-slug">Read more →</a><p>
Where :
1. /page-slug is the “slug” for the page. For example if you called your page “The Trouble With Me” then the slug would be /the-trouble-with-me
2. /2015/04/image-name.jpg is the name and location of your image file for the featured image for your page you’re linking to. The image URL can be found when you upload the image or from your dashboard via Media –> Library … help document for uploading images can be found – here. And a document which explains how to get the image URL is – here.
Text Widget
Step 5 : Repeat Step 4 – for “Second Front Page Widget Area” and “Third Front Page Widget Area”
Hopefully, if all worked well then you should have a site similar to mine !
TIP – As an alternative Step 4, you could use an image widget, the downside being that you can’t put text underneath your image, with the “Read more” link. Some people might prefer it that way, so a choice for you to decide. The documentation for the image widget is – here.
Cheers
Don Charisma
Resources & Sources
Support Forum thread I answered this question on – https://en.forums.wordpress.com/topic/model-sela-theme-after-demo-more
Unless otherwise stated everything here is (c) DonCharisma.com, all rights are reserved.