If you are installing the theme on a site with already existing content (like posts), you probably need to recreate all image thumbnails! Otherwise they won’t be displayed with the correct sizes on the new theme. The good news is that you don’t need to do it manually – there are plugins that can do the job for you. A good one is Regenerate Thumbnails. Just run it AFTER installing and activating the new theme and wait till it completes its job.
Images take central place in Hatch. So it’s best if you make sure to set a Featured Image for each post you create. It’s not a huge problem if you forget to do so – a default placeholder image would be used, acting as a reminder and preserving the layout consistency of your site.
The following guide will lead you through the steps needed to achieve the site structure of the Hatch Demo site:
- Open your site’s WordPress admin panel and then navigate to “Settings -> General” and fill in the site title and the tagline. For the demo I’ve chosen an example name “Joanna Doe” and profession “Photographer” as tagline.
- Go to “Settings -> Reading” and in the field “Blog pages show at most” set a number that is divisible by 4. On the demo site this value is set to “12”.
- Navigate to “Users -> Your Profile” and write a few words about yourself and what you do in the box labeled “Biographical Info” (located at the bottom of the page).
- Go to “Appearance -> Header” and upload your own header image. Probably one of your best photos? It’s up to you.
- Navigate to “Appearance -> Customizer” and upload logo and site icon images, you can hide the text site title and description here if required.
- Add some content to your site – write a few posts (don’t forget to set “Featured Image”!) and pages.
- Finally, go to “Appearance -> Menus” and create a new menu. Add the menu items/link you’d like displayed at the top of the site.
How to create a Photo Gallery post
Start a new post (“Posts ->Add New”), fill in a post title, and add a “Featured Image”. Then click inside the post editor box and click the “Add Media” button – located just above. The WordPress Media Uploader window will load, providing three different options to add images (and other files) to your post. Let’s say we just want to upload a few images from the local hard drive – click that “Upload Files” button in the middle and select the files you want to upload. Click “OK” and wait till the uploader does it’s job…
After all images are uploaded and processed (resized), click “Save all changes”. A new tab opens, where you will be asked to review the “Gallery Settings” and change them if needed. The first option – “Link thumbnails to:” deserves special attention:
- If you choose “Image File”, the resulting gallery will link the thumbnails to their larger versions. When a thumbnail is clicked, the larger image will be loaded in a lightbox overlay window.
- If you choose “Attachment Page”, the thumbnails will be linked to the image attachment page. The attachment page consists of a large version of the image (but not loaded in a lightbox window) plus the text info you may have added for that image in the image uploader – title, alternate text, caption , description.
Note: It’s best if you just try the two options and see the difference for yourself.
The next option in the “Gallery Settings” that you probably need to set manually is the “Gallery columns:” number. The recommended number of columns for the Hatch theme is 6.
When you are done, click “Insert gallery” and then “Publish” the post.
How to Customize the Hatch theme
Hatch uses the Customizer, to use this visit “Appearance” -> “Customizer” where you can set the logo, fonts, link color and more options.
If you aren’t completely satisfied with the way Hatch looks (and works), I have some good news for you – this theme is actually made to be customized. It’s a parent theme. You can always make your child theme (based on Hatch) and change whatever you want.
And if you aren’t quite familiar with the whole “Child Themes” and WordPress theme customization concepts, here is a nice and short tutorial.