Installation & Setup: Getting Started with Hawthorn
Please note: This FAQ Article is specifically for the Hawthorn theme.
Whether you're brand new to WordPress or would just like a quick lesson on basic Hawthorn theme features, you're in the right place! Below, we'll go through a number of how-tos regarding standard theme functions, from installing the theme to setting up your sidebar, the featured area slider, and more.
To skip directly to a specific section in the article, please use this index:
- Installing the theme
- Creating a post
- Creating a page
- Creating a category page
- Category Index Shortcode
- Homepage settings
- Adding a logo image
- Creating a main menu
- Adding a featured image
- Adding social icons
- Enabling the featured area
- Setting up your Instagram footer
- Setting up your promo box widgets
- Setting up your newsletter widget
- Setting up your sidebar
- Setting up the footer area
- Setting up your webshop
INSTALLING THE THEME
So you've purchased Hawthorn and you're ready to get started-- great!
When you purchase an Hawthorn license from ThemeForest & download the theme package, you will receive a zipped folder titled "themeforest-21361268-hawthorn-a-wordpress-blog-shop-theme".
Unzip this first folder.
Within the unzipped theme package, you will find a number of folders such as demo content, documentation, logo image files, etc. There is also 1 additional zipped folder within, titled "hawthorn.zip".
Important: DO NOT unzip this "hawthorn.zip" folder! This particular .zip folder should remain zipped.
"hawthorn.zip" is the main theme.
Within your WordPress Dashboard, navigate to Appearance > Themes.
Click the "Add New" button at the top-left of the page > Click the "Upload Theme" button at the top.
Click "Choose File" > find your zipped "hawthorn.zip" file > Click the "Install Now" button.
Once the theme is successfully installed on your WordPress, you can "Activate" it via the installation page or via Appearance > Themes to switch over and begin using your Alder theme!
Please note: If you try installing the entire zipped theme package or another incorrect file, you'll likely receive this error message:
"The package could not be installed. The theme is missing the style.css stylesheet. Theme install failed."
If you receive this error message, please be sure that you're installing the ZIPPED file titled "hawthorn.zip".
Hawthorn has the possibility to create 4 different types of posts: standard, gallery, video, and audio.
In order to activate these post options, you'll first want to ensure you've installed & activated the required Vafpress Post Formats UI plugin. This plugin comes included with the theme.
To install this plugin (among other bundled and recommended plugins), navigate to WP Dashboard > Appearance > Install Plugins.
Please remember to activate the plugins once they've been installed.
To create a new post, go to WordPress Dashboard > Posts > Add New.
Classic WordPress Editor (WP version prior to 5.0/Gutenberg):
Above the post editor toolbar, you'll see the different post format options listed: Standard, Gallery, Video, and Audio. Select whichever format you'd like. Each option will give you different input boxes depending on the content you'd like to add.
Gutenberg Editor (WP version 5.0+/Gutenberg):
On the right side of the screen is a sidebar element with various options. Toward the top of this sidebar is the "Post Format" option. Choose your preferred format from the drop-down menu. Scroll down the page to where you'll see a box titled "Post Format Content". Here, you can add images to your Gallery Post, an audio file to your Audio Post, etc.
A standard post is the default post type.
You can add text and images to your post using the tools and content box.
Example of a standard post: https://solopine.com/hawthorn/the-stunning-vistas-of-juneau/
A gallery post allows you to create a slideshow-type gallery at the top of your post.
After clicking the "Gallery" option to choose this post format, click the newly-visible "Pick Images" button within the box that has appeared. Select whatever images you'd like from your WordPress Media Library.
Example of a gallery post: https://solopine.com/hawthorn/latest-trends-in-scandinavian-design/
A video post displays a video at the top of your post.
You can share videos from nearly all video hosting sites, such as Vimeo or Youtube. Simply copy & paste the video's URL, oembed code, or embed code into the special input box titled "Video URL (Oembed) or Embed Code". When you preview or publish your post, the video will appear.
Example of a video post: https://solopine.com/hawthorn/exploring-the-columbia-river-gorge/
An audio post allows you to share a music or audio track and displays it at the top of the post.
Like the video post, simply copy & paste the track's URL, oembed code, or embed code into the special audio input box titled "Audio URL (Oembed) or Embed Code". When you preview or publish the post, the track will appear.
Example of an audio post: https://solopine.com/hawthorn/coachellas-stellar-star-lineup/
You can set your singular post pages' layout globally via WP Dashboard > Appearance > Customize > Post Settings > Set default post layout. Choose from "Sidebar" layout, "Full Width" layout (no sidebar), or "Full Width Narrow".
When you first create a new post, its layout will automatically be set to "Default template". This means that its layout will be set by whatever you've chosen via Post Settings > Set default post layout.
Additionally, you can change a post's layout on a post-by-post basis. To do so, open the post's edit screen. In the right-hand sidebar element, look for the drop-down titled "Post Attributes". Choose your desired layout option.
Once you've determined your desired post format and layout, entered your title, and added your content, remember to assign at least 1 category to your post. Additionally, also ensure you assign a featured image to the post. Featured Images will represent the post in your site's various thumbnails and when visitors share your post on social media.
Once you're finished preparing your post, you can click "Preview" to preview how your post will look once published onto your site, click "Publish" to have it appear on your site, or click "Save Draft" to save your post as it is, though not publish it yet.
CREATING A PAGE
A standard, static page is similar to creating a post in many ways and is ideal for creating an index page, About Me or Contact Me section to your website.
To create a new page, navigate to WP Dashboard > Pages > Add New.
Like a post, you can enter a page title, add content, and assign a featured image.
Additionally, you have the option of choosing between a number of page templates/layouts via the drop-down menu on the right titled "Template" within the "Page Attributes" section:
- Default Template (sidebar is enabled)
- Blog Template (includes your blog/post feed below page content area)
- Full Width Page(sidebar is disabled)
- Full Width Page w/ Slider (sidebar is disabled)
- Page w/ Slider (sidebar is enabled)
Once you've published your new page, it will not automatically appear in your main menu unless you've selected the option titled "Auto Add Pages" within your Menu setup screen.
For a tutorial on adding items to your main menu or enabling/disabling this "Auto Add Pages" option, please check out this FAQ article: How do I set up my navigation menu?
CREATING A CATEGORY PAGE
A category page is a dynamic page that pulls in all of your posts assigned with a particular category.
You do not create a category page like you would a standard static page (described above).
A category page is generated by WordPress after you add a category to a post, though it will not automatically appear as a menu item in your navigation menu. To make your category pages easily accessible to your visitors, you can add it to your menu yourself.
First, ensure you've assigned the category to at least 1 published post.
Then, navigate to WP Dashboard > Appearance > Menus and click the drop-down box heading titled "Categories" on the left of the page. Below, your categories will be listed. Check the box next to your desired category and click "Add to Menu". Be sure to save.
When you click on the newly-created menu item, it will take you to that category's page.
For more information on creating a category page, please check out: How do I set up my navigation menu?
ADJUSTING THE LAYOUT OF YOUR CATEGORY PAGES:
Category Pages which display all posts related to a particular category, Tag Pages which display all posts related to a particular tag, Author Pages which display all posts related to a particular author, etc., are called "Archive Pages".
To change the page layout of your Archive pages, head to Appearance > Customize > General Settings > and choose from the layout options within the "Archive Layout" section.
Here, you can also enable or disable the sidebar from displaying on Archive pages.
CATEGORY INDEX SHORTCODE
Hawthorn offers a unique feature called the Category Index Shortcode. This little bit of code allows you to display a grid of posts from a particular category within a page or post simply by pasting in the little shortcode and adding parameters to customize it.
This category index element can be a wonderful feature if you'd like to create a page that pulls in posts from multiple categories-- for example a Travel page that displays a selection of posts from your Asia category, followed by your South America category, your Europe category, etc.
NOTE: In order to activate this shortcode option, you'll first want to ensure you've installed & activated the required Hawthorn Meta Fields plugin. This plugin comes included with the theme package. When you first activate Hawthorn, you should notice a banner notification across the top of your dashboard advising you to install specific required & recommended plugins. If you no longer see this banner notification, be sure to check your Plugins page to see if Hawthorn Meta Fields is listed there. Activate the plugin to activate the shortcode.
For steps on how to implement and customize your Category Index feature, please refer to this article: .
HOMEPAGE/POST FEED SETTINGS
Your homepage is the first page visitors will see when they arrive at your website. By default, the homepage will be the page that also displays all of your published posts, beginning with the most recent. We call this feature the "post feed".
Not seeing your post feed on the homepage? Check out: Show post feed on homepage
To customize how your post feed looks, including its layout, colors, enabling/disabling the sidebar, etc., navigate to WordPress Dashboard > Appearance > Customize
Under the various drop-down tabs on the left of this screen, you'll find loads of ways to customize your homepage/post feed & website in general.
For example, within the "General Settings" tab, you can choose your homepage's post layout and enable/disable the sidebar.
Be sure to explore the various options within this Customizer section. The live preview on the right will show you a preview of how each adjustment will visually affect your site before you actively apply it.
If you'd like your homepage to instead be a static page and have your post feed display on another page entirely, please check out our tutorial here: How to create a static homepage & separate blog page.
ADDING A LOGO IMAGE
To add in your preferred logo image, navigate to WP Dashboard > Appearance > Customize > Header & Logo Settings > Upload Logo > and upload your desired logo image here. It will automatically replace Hawthorn's demo logo with your own.
Within this section, you can also adjust the padding/spacing above and below the logo image and choose to enable/disable the header area's social icons and search function.
TIP: Crop your logo image right up to the very edges of the design/text so that there isn't any blank white space around the image. This will prevent your image from appearing very small on mobile devices.
CREATING A MAIN MENU
Setting up Hawthorn's main menu is quite simple! For a walk-through on how to go about it as well as more specific how-to tutorials like having a "dummy" menu item that doesn't link anywhere, please check out: How do I set up my navigation menu?
ADDING A FEATURED IMAGE
Assigning a featured image to your posts is very important, as the featured image is what the theme & other web functions use to visually represent the post in various situations.
For a walk-through on where and how to assign a featured image, please take a look at: How do I add a Featured Image?
Additionally, even if you don't want the featured image to display at the top of your post, you should still assign a featured image. Once that's done, you can hide the featured image from the top of your posts by navigating to WP Dashboard > Appearance > Customize > Post Settings > and checking the box next to one of the 3 options:
- Display Featured Image
- Hide Featured Image
- Hide Featured Image only on single post pages
ADDING SOCIAL ICONS
First, please ensure you've installed and activated the bundled plugin called "Hawthorn Core". You should see a notification banner across the top of your WordPress Dashboard asking you to install required plugins, including this "Hawthorn Core" plugin. If you don't see this banner notification right away, you may need to navigate to WP Dashboard > Appearance > Install Plugins. Once the "Hawthorn Core" plugin is activated, the Social Media Settings section will appear within your Customizer.
SOCIAL ICONS IN TOP BAR & FOOTER:
Navigate to Appearance > Customize > Social Media Settings.
Here, you will see a list of social networks followed by a text input box. If you'd like to have a social icon for a particular social network, you can type in your username for that particular network.
Please note that you do not need to insert your profile's full URL into this box unless prompted to do so. Only your related username is required. The username you enter will be added into a pre-set URL for the network.
For example, if you enter the Instagram username "solopine" within Social Media Settings, your Instagram icon will automatically link to the URL: https://www.instagram.com/solopine
Below each social media field are 2 check boxes. One will add the icon to your header/top bar area and the other will allow you to add the icon to your footer area. Check or un-check the boxes depending on where you want the icons to appear.
If you leave a social network's box blank, the social icon will not appear in the top-bar or footer areas.
SOCIAL ICON WIDGET:
To add the social icon widget to your sidebar or footer, navigate to WP Dashboard > Appearance > Widgets.
Drag the widget titled "Hawthorn: Social Icons" into your sidebar's widget area or one of your footer's widget areas. Check the boxes for the social networks you'd like to display in the widget.
Please be sure you've also entered your related social networks' usernames within Appearance > Customize > Social Media Settings, otherwise the social widget's icons won't know where to link visitors.
You can give the widget a title, such as how we've entered "Subscribe & Follow" on our Hawthorn demo website. Or, you can leave the title field blank.
Don't see your desired social network? There are tons of social media sites out there and we're unfortunately not able to include built-in options for all of them in the theme. However, don't fret! We have a tutorial written up on how to add custom icons to your theme here: How do I add social media icons to Hawthorn?
ENABLING THE FEATURED AREA SLIDER
ENABLING YOUR FEATURED AREA:
To enable your featured area slider, you can navigate to WP Dashboard > Appearance > Customize > Featured Area Settings > and enable the element here.
Please ensure your posts have a Featured Image assigned to them.
Hawthorn gives you two options for assigning an image to represent a post or page in the featured area:
- Featured Image: One option is to simply assign a Featured Image to your post or page. By default, this is the image that the featured area (and many other sections around the theme) will pull in to represent your post.
For more information, check out: How do I add a Featured Image?
- Custom Featured Area Image: Hawthorn also allows you to assign an alternative image to represent the post or page specifically in the featured area slider, separate from your post's Featured Image.
To assign an alternate featured area image, navigate to your post's create/edit screen and look in the meta box titled "Post Options". Here, you can choose your "Custom Featured Area Image" which will only appear in the featured area to represent your post.
This can be ideal if you don't want duplicated post images on your homepage.
CHOOSING YOUR FEATURED AREA'S POSTS:
Within Appearance > Customize > Featured Area Settings, you have 3 options for choosing which posts appear in your featured area:
- Latest posts: By default, the area will display your 3 latest published posts. Leave it on the "-Select-" option.
- Posts from specific category: From the drop-down menu titled "Select Featured Category", you can also choose a particular post category to display in your featured area slider.
- Specific posts/pages: In the box beneath the title "Select featured post/page IDs", you can determine exact posts and/or pages to display in the featured area. To learn how to identify a post or page's ID, check out: How to determine a post, page, or category ID
Within your Featured Area Settings section, you can also customize the slider further by checking the boxes to hide things like the post categories, post titles, post excerpts, "Read More" button, and the pagination counter.
SETTING UP YOUR INSTAGRAM FOOTER
Hawthorn allows you to display your Instagram images in a full-width feed within the footer area.
First, ensure you've installed/activated the plugin called Smash Balloon Social Photo Feed. Once installed, it will be titled "Smash Balloon Instagram Feed". Then, go to WP Dashboard > Instagram Feed > and click the big blue button to connect your Instagram account.
To add the Instagram widget, navigate to Appearance > Widgets. On the right, you'll see the theme's different widget areas. One of which is the widget area titled "Footer Instagram".
Drag a "Custom HTML" widget from the left of this screen into the "Footer Instagram" widget area.
Then, copy & paste in the plugin's shortcode:
[instagram-feed num=8 cols=8 imagepadding=0 showheader=false showbutton=false showfollow=false disablemobile=true]
Please ensure that your Instagram account is set to be "Public" and not "Private".
SETTING UP YOUR PROMO BOX WIDGETS
Hawthorn offers a special widget called "Hawthorn: Promo Box" to be used in your sidebar or footer widget areas.
This widget can be given any image, any title, and hyperlink of your choosing as an eye-catching, beautiful way to link to posts, pages, or even external URLs. Insert the promo box widget into your sidebar area as a stand-alone widget, or, stack them high!
To set up your promo box widget, navigate to WP Dashboard > Appearance > Widgets > and drag & drop the "Hawthorn: Promo Box" widget into the sidebar area or one of your footer widget areas.
Give the widget a height, link in an image from your WP Media Library, insert a hyperlink, and add a title if you'd like. The widget also allows you to set how much spacing will be applied beneath the widget itself in case you'd like to stack several widgets close together or space them further apart.
Try stacking multiple promo box widgets with varying heights!
SETTING UP YOUR NEWSLETTER WIDGETS
Hawthorn includes custom stylings for the "MailChimp for WordPress" plugin which allows you to display a beautiful newsletter sign-up form. You can insert this form within the sidebar area or within one of your footer widget areas.
For steps on setting your newsletter form up, please check out this article: How to setup Hawthorn's newsletter widget
SETTING UP YOUR SIDEBAR
A sidebar is a vertical content area that displays to the right of your main content/post area. You customize your sidebar by stacking up different widgets that display a variety of things.
ENABLING/DISABLING THE SIDEBAR:
To enable/disable the sidebar on your homepage and/or your archive pages (category pages, tag pages, etc.) navigate to WP Dashboard > Appearance > Customize > General Settings.
Here, you can check or un-check the boxes next to "Disable Sidebar on Homepage" and "Disable Sidebar on Archive Pages".
To enable or disable the sidebar on your Posts, you can do so from 2 different places.
You can set a universal post layout (sidebar or no sidebar) via WP Dashboard > Appearance > Customize > Post Settings > Set default post layout. This option will apply itself to ALL of your posts' singular pages automatically whenever you create a new post.
Additionally, you can also set a post's layout on a post-by-post basis from within the post's create/edit screen. Within the post's create/edit screen, scroll down to the "Post Attributes" box which lets you choose a layout with or without sidebar.
To enable or disable the sidebar on your static Pages (pages created within WP Dashboard > Pages) you can do so within the page's create/edit screen using the "Template" drop-down menu on the right side.
ADDING WIDGETS TO YOUR SIDEBAR:
To add, remove, or edit your sidebar widgets, navigate to WP Dashboard > Appearance > Widgets.
On the left, you will see a list of the available widgets to choose from.
To add a widget to your sidebar, simply drag & drop a widget on the left into the widget area titled "Sidebar".
ADDING INSTAGRAM GRID TO SIDEBAR:
First, ensure you've installed/activated the plugin called Smash Balloon Social Photo Feed. Once installed, it will be titled "Smash Balloon Instagram Feed".
To add the Instagram widget, navigate to Appearance > Widgets. Drag a "Custom HTML" widget from the left of this screen into the "Sidebar" widget area.
Then, copy & paste in the plugin's shortcode:
[instagram-feed num=9 cols=3 showheader=false showbutton=false disablemobile=true]
EDIT WIDGETS IN YOUR SIDEBAR:
Once you've dropped a widget into the sidebar widget area, click on its heading. A drop-down will appear and you can make any necessary adjustments to the widget's settings. From this widget setting drop-down, you can also delete the widget.
To position widgets within the sidebar, drag and drop them above or below each other.
SETTING UP THE FOOTER AREA
The footer area is the lower portion of the theme that will appear on all pages of your site.
It can include:
- Instagram feed
- 4 widgetized sections
- Social icon bar
- Copyright text bar
INSTAGRAM FOOTER AREA:
Similar to the section above regarding "Setting up your Sidebar", the footer has a widget area titled "Instagram Footer" where you can add in a widget to display your Instagram images in a full-width feed.
First, ensure you've installed/activated the plugin called Smash Balloon Social Photo Feed. Once installed, it will be titled "Smash Balloon Instagram Feed". Once activated, be sure to go to WP Dashboard > Instagram Feed > and click the big blue button to connect your Instagram account.
To add the Instagram widget, navigate to Appearance > Widgets. On the right, you'll see the theme's different widget areas. One of which is the widget area titled "Instagram Footer".
Drag a "Custom HTML" widget from the left of this screen into the "Instagram Footer" widget area.
Then, copy & paste in the plugin's shortcode:
[instagram-feed num=8 cols=8 imagepadding=0 showheader=false showbutton=false showfollow=false disablemobile=true]
FOOTER WIDGET AREA:
Hawthorn's robust footer offers 3 or 4 widgetized areas where you can insert a widget of your choosing. For example, on Hawthorn's demo site, the 4 footer widgets include (from left to right) a Navigation Menu widget, the "Hawthorn: Latest Posts" widget, the "Hawthorn: Social Icons" widget, and the "Hawthorn: About Me" widget.
Pick and choose which widgets you'd like to place into each area. Via WP Dashboard > Appearance > Widgets, select your desired widget and drop it into "Footer 1", "Footer 2", "Footer 3", or "Footer 4".
Please note that adding multiple widgets into one footer widget area will cause them to stack vertically.
To choose 3 footer widget areas, navigate to WP Dashboard > Appearance > Customize > Footer Settings > Footer Columns > and select "3 columns".
To choose 4 footer widget areas, select the option "4 columns".
SOCIAL ICON AREA:
To choose which social icons you'd like to appear in the footer area, enter your username for each social network platform within Appearance > Customize > Social Media Settings. Ensure that the option "Show [your social media network] in Footer" is checked.
For more information, please reference the section above titled "Adding Social Icons".
COPYRIGHT TEXT AREA:
Below Hawthorn's social icon footer bar, there are 2 text areas where you can include copyright or disclaimer text. You are not required to include a copyright or disclaimer statement, though. In fact, you can type whatever you'd like in this area!
To edit the footer text areas, look within
WP Dashboard > Appearance > Customize > Footer Settings.
Setting up your webshop
Hawthorn is compatible with the popular WooCommerce plugin. For instructions on how to get your webshop up and running, check out our article here: Setting up your webshop.
For help troubleshooting issues in Hawthorn or to see some fun customization tutorials, check out all of Hawthorn's FAQ Articles here! Hawthorn Tutorial Articles
And, as always, if you have any theme-related questions you can't find the solution to in our FAQ article database, you're always welcome to open up a new support ticket.