To install your new theme, go to the Appearance > Themes page inside your WordPress admin area.
Click the Add New button at the top, and then the Upload Theme button on the following page.
Using the Choose file button, find the ZIP file you downloaded when you purchased the theme, then click the Install Now button.
If everything went well, you’ll see the following message – then just click the Activate link to activate the theme on your site.
Next, you’ll need to set up some pages and settings inside WordPress to set up your site.
Firstly, let’s create the pages you’ll need – you’ll need at the very least a home page. Go to the Pages section in your WordPress admin area and click Add New.
Call the page Home, and you can also add some content to it. This is displayed above the portfolio grid on your home page – here’s an example from the theme demo:
Here, we used the toolbar to make the first line a Heading 1 style – this gives it the larger font size and is also great for your website’s SEO.
When you’re done, hit the Publish or Update button on the right hand side to save your changes.
If you want to use the blog features of the theme, you’ll also need to add a page for that. Add another new page with the title Blog (or whatever you’d like to call it). You don’t need to add any content to this page, as it will get populated by your Posts.
Finally, you can add any extra pages you need – for example and About page or Contact page.
Next lets look at the Settings section inside your WordPress admin area.
On the General settings page, the main ones to look at are the Site Title and Tagline – these are used in various places throughout the theme, such as in the browser title, and the footer area.
On the Reading settings page, you need to change the Your homepage displays option to A static page – choose the Home page you set up for the Homepage option, and the Blog page you set up for the Posts page option:
You can also use the Blog pages show at most setting to control how many posts show on the portfolio and blog pages when you first load the page.
On the Media settings page, you can choose the main image sizes used by the theme. We have them set as follows which works well for most use cases:
On the Permalinks settings page, we selected the Post name option. This gives your pages a pretty URL that matches the title of the post/page, and is the most user-friendly option.
Next you’ll need to set up a menu to navigate your site. Go to the Appearance > Menus page in your WordPress admin area to do this.
On this page, you can add pages to your menu from the lists on the left. You can also add custom links to direct people to other websites. Add the pages you’d like to your menu and then click the Create Menu button.
Our themes support one level of nesting – just drag the pages you’d like to be nested to the right, below the page you’d like them to be nested inside. For example, you could use the technique to link to categories in your portfolio or blog:
The theme comes with lots of options to help you change how it looks. To access these, go the the Appearance > Customize section in your WordPress admin area. When you’re done changing settings, use the blue Publish button at the top to save your changes.
In this section, you can change the following:
Logo – upload a logo image for the header area.
Site Title – change the title of your site. This appears in the header if you don’t upload a logo, and also in the browser title.
Tagline – change the tagline for your site. This appears in the footer of the site, and also in the browser title.
Logo Width – this sets the size that your uploaded logo image displays at. We’d recommend setting it at half the size of your logo image, to support retina displays. So if you wanted your logo to be 200px wide, set that here, and upload an image that is 400px wide.
Site Icon – this lets you upload an icon image, which is used as the ‘favicon’ for web browsers.
This section lets you adjust all the colors used by the theme. Use the color pickers to select a color for each option – you’ll figure out the parts each one controls as the design updates on the right hand side. You can use the Default button inside each color picker to reset the color to the original.
This section lets you control fonts and typography used in the theme.
Use the Fonts sub-section to set up your fonts – add an embed code (from Google Fonts or Typekit, for example), and then add the font name/s for the Body Font and Title Font to set the font used.
The remaining sub-sections let you control the typography of each element. Each has a font size for Small (mobile phones), Medium (tablets) and Large (laptops/desktops) screens that you can set individually. You can also change the font weight, letter spacing and line height by adjusting the values.
This section let you add a background image to the site, if you don’t want to use a regular color. Once you upload an image, there are various settings you can use to control the position, size, and repetition of the background image.
This section lets you control the menu used in the header – the same as previously detailed, but from within the Customize section for convenience.
This section lets you change a few details of the portfolio area:
View Project Text – sets the text for the ‘view project’ link that appears when you hover over a portfolio item.
Load More Button Text – sets the text for the ‘load more’ button that appears if you have more posts to load.
Overlay Opacity – sets the transparency of the overlay color used on posts when you hover over them.
Grid Spacing – sets the amount of spacing (in pixels) between posts in the grid layout.
This section lets you set up widgets for your blog sidebar.
This section lets you add links to your social networks/external sites. These show up in the footer of the theme. Just add the relevant URL for each icon you’d like to display.
This section lets you control your site home page and posts page – the same as in the WordPress settings previously detailed, but from within the Customize section for convenience.
This section lets you add custom CSS code that you can use the tweak other details about the theme’s design.
Our themes come with a built-in custom post type for your portfolio items, so you can organize them separately from your blog posts.
To add a new portfolio item, go to the Portfolio section in the WordPress admin area, and click the Add New button:
You can add a title in the title field at the top – this shows up when you hover over a portfolio item in the grid layout, and in the browser title on the individual portfolio item page.
Next, use the Featured Image section on the right hand side to add a ‘cover image’ for your portfolio item. This is the image that shows up in the grid layout. The shape of the portfolio item in the grid layout will match the shape of the image you upload here.
You can use the Post Attributes section to order your portfolio posts – a lower number will show up first, a higher number later. If you don’t add anything here, the items will show up in date order, most recent at the top.
Then you can add content to your portfolio item using the main content editor area. This is the content that shows up on the individual portfolio item page. You can add anything you like here!
You can use tags to organize your portfolio into sections – add tags via the Portfolio Tags section on the right hand side.
Tags show up underneath the title on the individual portfolio item page, and can be clicked to go to a page showing only items that have that tag:
You can link directly to these pages too – in your menu for example – so you can direct your visitors to the sections of your portfolio. The theme creates a special link for each tag, for example: http://griddle.precrafted.com/portfolio/tagged/typography
When you’re done creating/editing your portfolio item, just hit the blue Publish/Update button to save your changes.
We’ve built in some clever features using the WordPress Gallery feature that you can use to show off images in your posts and portfolio items.
To add a new gallery, start a new line in your post and then hit the Add Media button at the top of the post editor.
Click to the Create Gallery tab, then upload or select the images you’d like to add from your Library. Then hit the blue Create a new gallery button in the bottom right corner.
After that, you can configure the options you’d like to use for the gallery:
You can choose from the following settings:
Link To – this controls what happens when you click an image in the gallery. The Attachment Page option links to a URL containing the image. The Media File option links directly to the image – the theme has a built-in ‘lightbox viewer’ that is used when this option is selected. It’s great if you’re creating a grid layout for your gallery. The None option removes any click action from the image – this is perfect if you’re using a single column gallery, as the image is already pretty large.
Columns – this controls the number of columns in your gallery. If you choose a single column, the theme will create a slideshow/carousel that spans the whole width of the page. If you choose 2 or more columns, the theme will create a masonry grid layout for your images.
Random order – you can use this option to randomize the order of images in the gallery. Otherwise, it’ll use the order you added the images. You can re-order these by dragging them around in the gallery editor screen.
Size – this controls the size of the image output to the page. We recommend using the Large size option so that the image can be zoomed in using the lightbox viewer.
When you’re done setting up your gallery, use the blue Insert gallery button at the bottom right to add it into your content.
Blog posts work in exactly the same way as portfolio items, but are displayed in the Blog section that you set up earlier.
You can use categories and/or tags to organize your blog posts – again this works in the same way as above, so you can link directly to categories/tags of specific posts.
The blog comes with a built-in sidebar for you to add widgets to. To do this, go to the Appearance > Widgets section in the WordPress admin area:
Here you can drag and drop widgets into the sidebar, and configure all the settings you prefer.
Send us a message for fast, friendly support.