Creating your home page
By the end of this tutorial you’ll have built a homepage for your WordPress artist website using the Klasik theme from ThemeForest.net. The page you’ll create will display similarly to the homepage of DarenRedman.com, but with your own font choices, colours and, of course, your own artwork!
Again this tutorial is fairly long, but is broken down into the following manageable chunks:
[ezcol_1half]Preparing your images for the homepage
In order to achieve a similar homepage to DarenRedman.com, you’ll need to select 5 images of your work to resize for the homepage. I suggest you choose your most striking or most successful work; remember this is what visitors will be greeted with when they land on your site. Another consideration is that these pieces won’t necessarily be seen in full on the homepage, so select work that looks good in detail; you’ll be resizing and cropping the images to very specific dimensions.
First of all let’s prepare the image that will appear in this space on the homepage.
Cropping the images
The easiest way to crop images to specific dimensions is using Adobe Photoshop, but you can also do it with free online tools. I’ll take you through how to do it with both.
[ezcol_1quarter]
Using Photoshop to crop your images.
1. Open photoshop.
2. Go to File>New.
3. Enter a title for the image.
4. In the ‘Width’ field enter 285 and make sure the unit value is set to pixels. In the ‘Height’ field enter 340. Then click ‘OK’.
[/ezcol_1quarter] [ezcol_3quarter_end]
[/ezcol_3quarter_end]
5. Drag and drop the image you want to use into the Photoshop file. The image will automatically fit to the size but won’t necessarily fill the entire space.
6. Select the image you’ve just imported, hold down shift and alt (shift maintains dimensions, alt resizes from the centre of the image) and drag the bottom right corner until the image fills the space.
7. Move the image to wherever you want it, in order to show the most visually engaging detail of the artwork.
8. Go to File>Save as.
In the dialogue box that pops up, click on ‘Place’.
Then choose where to save the file and click ‘Save’.
9. Now, we need to convert the image to use on the web. Go to File>Save for web and devices.
10. In the window that opens, choose to save the image as a JPEG. Select ‘High’ as the image quality (anything above this will mean the image file will be too large to load quickly on your site). Make sure ‘Optimized’ is checked.
11. Click ‘Save’ and choose where to save the image on your computer.
Using pixlr.com (free online tool) to crop and resize images
1. Go to pixlr.com.
2. Click on Pixlr Editor.
3. Select ‘Open image from computer’.
4. Select the image you want to crop and click ‘Open’.
5. Click on the ‘Crop’ tool.
6. In the dropdown menu next to ‘Constraint’ (above your image) choose ‘Output size’. In the ‘Width’ field enter 285 and in the ‘Height’ field enter 340.
7. Click in the top left hand corner of the image and drag downwards.
The crop box that appears will be constrained to the dimensions entered, but not necessarily the exact sizes. You need to look at the Navigator on the right of the screen to make sure you only drag the box to 285 pixels wide and 340 pixels high. Once you have it at the correct size, take your finger off the tracking pad or mouse.
8. Click anywhere in the crop box to move it into the desired position. Once you have it framing the best part of the image, hit return on your keypad. The image will now appear cropped and at the correct size and dimensions.
9. Go to File>Save.
10. Name the file and choose JPEG as the format, then select where on your computer you want to save the image. Click ‘Save’.
Importing the image to a WordPress Gallery
The next stage is to create a new gallery in WordPress. This gallery will only be used to show this one particular image on the homepage. In the Klasik theme, each image you wish to display on the homepage needs its own gallery.
1. Log in to WordPress at YourSiteName/wp-admin/. In the right hand menu, hover over ‘Gallery’ and click ‘Add new’.
2. Enter the title of the piece in the top field along with any other information you’d like to display when the image is hovered over (for Daren’s site we chose to simply display the title and the year the piece was created).
3. Now scroll down and check the boxes next to ‘Disable URL’ and ‘Disable similar project’. This will ensure that the image stands alone; you don’t want the images on the homepage to be clickable as they will merely open the same image in a new window, which is pointless.
4. Now, click on ‘Set featured image’ on the right-hand side of the page.
5. Click on ‘Upload’ and drag and drop the image you’ve just cropped.
6. Add a title, some alternative text and a description. These should include pertinent information about the piece; apart from the title, this text won’t be seen by visitors. The words you choose are for the search engines to decipher what the site is about.
Leave the caption field blank.
Click on ‘Set featured image’.
Repeating the process
[ezcol_1half]
You now need to repeat this process with 4 more images. However, they each need to be cropped to different sizes, which are listed below.
- As a reminder, Image 1 (the one you’ve just uploaded) needs to be 285 pixels wide, 340 pixels tall.
- Image 2 needs to be 315 pixels wide, 217 pixels tall.
- Image 3 is the same size as image 2: 315 pixels wide, 217 pixels tall.
- Image 4 needs to be 651 pixels wide, 355 pixels tall.
- Image 5 needs to be 285 pixels wide, 227 pixels tall.
[/ezcol_1half] [ezcol_1half_end]
Here’s a reminder of the process.
- Crop the image in Photoshop or at Pixlr.com.
- Create a new gallery in WordPress.
- Upload the cropped image and set it as the ‘Featured image’ for the new gallery. Then publish the gallery.
At this stage, you still won’t see anything on your live homepage. You’ve uploaded all of the images, but you haven’t told WordPress to display them yet. That’s the next stage!
[/ezcol_1half_end]
Sending the images to your homepage
1. In your WordPress dashboard, hover over ‘Pages’ and click ‘Add New’. Name the new page ‘Home’.
2. From the ‘Template’ dropdown menu choose ‘Home 1’.
3. Some more fields will now appear at the bottom of the page.
Leave the fields for ‘Home title’ and ‘Home tagline’ blank.
In the ‘Gallery on home’ section, click on each gallery you’ve created in the order you created them (they won’t be in that order – they display in alphabetical order by default). It’s important to click on them so they appear in the list in the exact order you created them, as the images are specific sizes and fit specifically into the jigsaw of the homepage.
Leave all other fields as they are.
4. Now scroll back up to the main text area and enter any text you’d like to appear on the homepage. I suggest you keep this to a minimum – let the images of your work do the talking on this page – just a couple of sentences outlining your uniqueness as an artist is enough.
If you want to include a line to separate the images from the text as I have done on Daren’s site, click on the ‘Text’ tab and add this piece of code before any of your homepage text; <hr/>
If you want to include a heading that looks like ‘About textile artist Daren Redman’ select the heading text and choose h4 from the Format dropdown menu.
Please note: To preview your homepage, you need to click on the ‘Preview’ button. It won’t actually display as your live homepage until the final step.
Final Homepage tweaks
To put the finishing touches to your homepage, you’ll need to make a couple more tweaks. In order for us to do this, we need to know the page id. To get the page id, click on ‘Get shortlink’ under the title field of the page.
In the link that pops up, you’re looking for the number at the very end. It appears after ‘?p=’. For the homepage of DarenRedman.com the page id is 5.
We’re going to use this page id to set some specific styling just for the homepage using CSS (meaning it won’t affect the other pages on the site).
The first thing we want to do is remove the big HOME title that appears by default; visitors know it is the homepage as it is the first page they land on. This big title is distracting and takes our attention away from the most important aspect of the page; the images of your art.
To remove the title, subtitle and the large space allocated to it, go to Options>Main and scroll down to the Custom CSS box. We’re going to add some code to remove the title.
Underneath any other code that you’ve already adding (in the previous chapter) type in:
We also want to make sure that the image titles display clearly when the image is hovered over. To ensure this, we need to change the colour of the text (the default colour is too light to show up). By default, a link appears when you hover over the image. It is pointless and distracting, as it links straight through to exactly the same image in another window.
Go back to your colour list and find the Hex value for the colour you selected to use for headings.
Enter this code in the Custom CSS box replacing my colour with your own:
Setting your homepage in WordPress
Finally, for the page we’ve built to display as our homepage, we need to tell WordPress to show it whenever anyone navigates to your website address. To do this, in the right hand menu in your WordPress dashboard, go to Settings>Reading.
Under ‘Front page displays’ choose ‘A static page’. From the drop down menu, select the name of the page you created (Home).
Scroll down and click ‘Save changes’.
Good work! Now if you navigate to your main URL, you should be greeted with a homepage that looks something like this!
