Hawthorn - A WordPress Blog & Shop Theme

Contents

1. Installation & Setup: Getting Started with Hawthorn

2. Hawthorn's Category Index Shortcode

3. Setting up Hawthorn's newsletter widget

4. How to import Hawthorn's demo content

5. How do I add social media icons to Hawthorn?

6. Fonts used in demo logo images

7. Instagram feed isn't updating on the site

8. How do I create a Contact Me page?

9. How do I set up my navigation menu?

10. Changing Font Family in Hawthorn - CSS Code

11. Changing font size in Hawthorn - CSS Code

12. What are the ideal image dimensions to use in my theme?

13. How do I enable/disable comments on my posts and pages?

14. Add a "Continue Reading" button to Hawthorn

15. Creating additional WordPress Users

16. How to determine a post, page, or category ID

17. Why is Facebook pulling in the wrong image when I share my post?

18. How do I add a Featured Image?

19. How to find your purchase code

20. Error: Theme is missing the style.css stylesheet

21. How to update your theme

22. Setting up your webshop

23. Theme Support Coverage FAQs

24. Solo Pine Referrals & Affiliates // Share the love, earn some cash!

25. How do I change my theme's fonts?

26. How do I set up my Author Box?

27. Targeting text elements in Hawthorn - CSS Selectors

28. Show post feed on homepage

29. Add Category Index to the Homepage or Blog in Hawthorn

30. Default fonts used in each theme

31. Google Search Console: Mobile-Friendly Test Recommendations

32. Change how many posts display per page

33. How to configure "Smash Balloon Social Photo Feed" plugin

34. Add "Read More" links to Hawthorn's posts

35. Translate your theme using Loco Translate

1. 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


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".





Back to Top


POSTS


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.

------

Standard Post

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/



Gallery Post

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/


Video Post

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/


Audio Post

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/



POST LAYOUT


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.





Back to Top


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:


 

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?



Back to Top


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.






Back to Top


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:  .


 

Back to Top


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.



Back to Top


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. 



Back to Top


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?



Back to Top


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:





Back to Top


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? 



Back to Top


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:

  1. 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?
     
  2. 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:


  1. Latest posts: By default, the area will display your 3 latest published posts. Leave it on the "-Select-" option.
  2. 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.
  3. 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". 




Back to Top





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!






Back to Top



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 


Back to Top 


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]

Save changes.


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 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.






Back to Top


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.


Back to Top




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.



Back to Top

2. Hawthorn's Category Index Shortcode

Please note: This article is specifically for the Hawthorn theme. 



Hawthorn includes a unique shortcode which allows you to display a number of posts from a particular category in a grid layout of 3 - 4 columns. This feature can be helpful if you'd like to create an index page, for example, to display a sampling of your latest posts from a variety of categories. 


First, make sure you've installed the required "Hawthorn Meta Fields" plugin. This plugin comes bundled with the theme. If you don't see a banner notification at the top of your WordPress Dashboard area prompting you to install & activate this plugin, navigate to WP Dashboard > Appearance > and look for the banner notice here. Follow the link to install the plugin. Then, be sure to activate it.



THE CATEGORY INDEX SHORTCODE


Inserting a category index is as simple as copying and pasting a bit of shortcode in a post or page where you'd like the category grid to appear. 



The basic shortcode looks like:

 

[hawthorn_index]

 

Simply adding the above basic shortcode to a post or page will display your 3 most recently published posts (from all categories). 

To customize the index grid, you can apply special parameters to your category index shortcode. 

Please reference the section below for the necessary steps. 



SHORTCODE PARAMETERS


The following shortcode parameters are bits of text you can insert into the basic shortcode (above) to apply specific characteristics to what your category index grid displays and how it displays it.

Below, we'll share the parameter options. In the next section, we'll demonstrate how the various parameters alter the category index grid.

Here are a list of the parameters (descriptions appear to the right of each parameter):

title=""                  // custom title above grid
cat=""                    // slug name of category. leave blank to get all posts.
amount="3"                // # of posts to show
cols="3"                  // number of columns. 2, 3 or 4
display_title="yes"       // yes/no to display post titles
display_cat="no"          // yes/no to display post cat above post title
display_image="yes"       // yes/no to display post images
cat_link="yes"            // yes/no to display cat link
cat_link_text="View All"  // use custom cat link text
offset="3"                // begin displaying the 3rd most recently publish post



EXAMPLES OF SHORTCODE PARAMETERS IN ACTION



TITLE

[hawthorn_index title="travel"]


We've inserted the parameter title="" into the standard [hawthorn_index] shortcode. 
In this example, I've given the category index grid a title of "check this out". 
This will apply the title of "check this out" above the category index grid. 






CATEGORY

[hawthorn_index cat="travels"]


We've inserted the parameter cat="" into the standard [hawthorn_index] shortcode. 
In this example, I've given the category index grid a category of "travels". 
This will have the category index grid only pull in the 3 latest posts from my category titled "travels". 

When you use this category parameter, it will automatically add a "VIEW ALL" link to the right of your index grid's title. Further below, we will go over the ways you can customize or disable this "VIEW ALL" link. 

You are very welcome to apply multiple parameters to the shortcode. 
For example, if you would like to apply the category AND title parameters together, it would look like:


[hawthorn_index title="check this out" cat="travels"]



 


AMOUNT OF POSTS

[hawthorn_index amount="4"]


We've inserted the parameter amount="" into the standard [hawthorn_index] shortcode. 
"Amount" refers to how many posts to display within this category index grid. 
In this example, I've given the category index grid a post amount of "4". 

You can apply multiple parameters to the shortcode.  For example, if you would like to apply the category AND title AND post amount parameters together, it would look like:

[hawthorn_index title="check this out" cat="travels" amount="4"]






COLUMNS

[hawthorn_index cols="4"]


We've inserted the parameter cols="" into the standard [hawthorn_index] shortcode.  
"Cols" refers to how many columns the category index grid will display your posts in. 
Hawthorn's index can display 3 or 4 columns. 
In this example, I've given the category index grid a column count of "4".  

You can apply multiple parameters to the shortcode.  For example, if you would like to apply the category AND title AND post amount AND column count parameters together, it would look like:

[hawthorn_index title="check this out" cat="travels" amount="4" cols="4"]

 





DISPLAY POST TITLE?

[hawthorn_index display_title="no"]


We've inserted the parameter display_title="no" into the standard [hawthorn_index] shortcode.   
This will disable your post titles from appearing in the category index grid. By default, the post titles will display.
In this example, I've hidden the post titles. 

You can apply multiple parameters to the shortcode.  For example, if you would like to apply the category AND title AND post amount AND column count AND post title parameters together, it would look like:

[hawthorn_index title="check this out" cat="travels" amount="4" cols="4" display_title="no"]





DISPLAY POST CATEGORIES?

[hawthorn_index display_cat="yes"]


We've inserted the parameter display_cat="" into the standard [hawthorn_index] shortcode. 
This will disable your post categories above the post titles. By default, the post categories will not show. 
In this example, I've chosen to show my posts' categories. 

You can apply multiple parameters to the shortcode.  For example, if you would like to apply the category AND title AND post amount AND column count AND post categories parameters together, it would look like:

[hawthorn_index title="check this out" cat="travels" amount="3" cols="3" display_cat="yes"]






DISPLAY POST IMAGE?

[hawthorn_index display_image="no"]


We've inserted the parameter display_image="" into the standard [hawthorn_index] shortcode. 
This will disable your post images. By default, the post images will be displayed. 
In this example, I've chosen to hide my posts' images. 

You can apply multiple parameters to the shortcode.   For example, if you would like to apply the category AND title AND post amount AND column count AND post image parameters together, it would look like:

[hawthorn_index title="check this out" cat="travels" amount="4" cols="4" display_image="no"]






DISPLAY CATEGORY/VIEW ALL LINK?

[hawthorn_index cat_link="no"]


We've inserted the parameter cat_link="" into the standard [hawthorn_index] shortcode. 
This will disable the "VIEW ALL" category link. By default, if the category index grid has a category assigned to it, the "VIEW ALL" link will be displayed. It will link to the related category page. 
In this example, I've chosen to hide my "VIEW ALL" category link. 

You can apply multiple parameters to the shortcode.  
For example, if you would like to apply the category AND title AND category link parameters together, it would look like:

[hawthorn_index title="check this out" cat="travels" cat_link="no"]






CUSTOM CATEGORY LINK TEXT

[hawthorn_index cat_link_text="all destinations"]


We've inserted the parameter cat_link_text="" into the standard [hawthorn_index] shortcode. 
This allows you to change the category link text to whatever you prefer. By default, it will say "VIEW ALL". 
In this example, I've chosen to have my category link say "ALL DESTINATIONS" instead. 

You can apply multiple parameters to the shortcode. For example, if you would like to apply the category AND title AND category link text parameters together, it would look like:

[hawthorn_index title="check this out" cat="travels" cat_link_text="all destinations"]






SET POST OFFSET

[hawthorn_index offset="3"]

By default, the shortcode will pull in your most recently published post in general or within a given category. If you would like to offset this so that the first post displayed is not the most recent post, you can use the [offset=""] parameter. 

Insert the parameter offset="" into the standard [hawthorn_index] shortcode. To offset the post feed by 2 posts (display the 3rd most recently published post), user an offset of "3". 

This would look like: 

[hawthorn_index offset="3"]

To display your 2nd most recently published post, set the offset to be "1". 



Mix and match your shortcodes to be 3 or 4 columns wide or multiple rows! Insert them into posts or pages! Stack your shortcodes upon each other to create dynamic pages of content! Be creative!

3. Setting up Hawthorn's newsletter widget

Please note: This article is specifically for the Hawthorn theme. 



Hawthorn comes with custom CSS stylings for the "MailChimp for WordPress" plugin. This plugin allows you to insert a newsletter sign-up form in your Sidebar area or Footer area. 

When a visitor adds their email via the form, it is saved to your chosen MailChimp mailing list/audience. When you're ready, you can use MailChimp's easy interface to create and send personalized newsletters to your hoards of fans! 

If you would like to apply the same stylings to your newsletter form as seen on Hawthorn's demo site, you can follow the steps below. 






1. SIGN-UP FOR MAILCHIMP

First, please ensure you have signed up and created an account with MailChimp ( http://mailchimp.com ). 

The first step you'll want to do is to create an "Audience" within your MailChimp account. This is where all of your subscribers' information will be kept. 

To create a MailChimp Audience:  Log into your MailChimp account > In the top menu area, click "Audience" > Click the "Current audience" drop-down > Click the "View audiences" option > and click the "Create Audience" button. Fill in the requested information like List name & the email address you will be sending your newsletter from, etc. > finalize creating your Audience. 

Next you will need to have your MailChimp account generate a unique "API Key" number. This API Key is used to link your MailChimp account to your WordPress "MailChimp for WordPress" plugin which is collecting your newsletter sign-ups.

To find your MailChimp API Key:   Log into your MailChimp account > Your Account Page > Extras > API Keys > Create a key.


2. INSTALL THE PLUGIN

Next, you'll need to install the "MailChimp for WordPress" ( http://wordpress.org/plugins/mailchimp-for-wp ) plugin onto your WordPress.

Installing the Mailchimp for WordPress plugin:   Log into your WordPress Dashboard > Plugins > Add New > Search for term "MailChimp for WordPress" > Install Now > Activate Plugin.

Once installed, navigate to the plugin's Settings page.  Here, you'll want to copy and paste your MailChimp account's API Key into the form and click "Save changes".

Want your newsletter sign-up form to look just like the Hawthorn demo?

Navigate to WP Dashboard > MailChimp for WP > Forms.

Here, you will see the HTML code that "builds" your newsletter form. We will want to replace this HTML code with the following code instead in order to have your form resemble Hawthorn's demo site. 

You can simply delete the code within the text box and replace it with the following instead:


<div class="subscribe-box">
 
    <div class="subscribe-text">
      <h4>Join the Family!</h4>
      <p>Receive the latest tips via email.</p>
    </div>
    <div class="subscribe-form">
      <input type="email" name="EMAIL" placeholder="Your email address" required="">
      <input type="submit" value="Subscribe">
    </div>
    <div class="email-icon"></div>
</div>


Note: If you'd like to change the text from "Join the Family!" to something else, you can do so on the 4th line of the above code. You can change the "Receive the latest tips via email" to your preferred text on the 5th line of code.

Be sure to save changes to the form when finished. 


3. ADDING THE NEWSLETTER WIDGET TO YOUR SITE

To then add your newsletter sign-up form to your site, you can navigate to WP Dashboard > Appearance > Widgets and add the "MailChimp Sign-up Form" widget to your Sidebar widget area or one of your Footer widget areas on the right side of the screen.


Be sure to test your newsletter form when finished to make sure everything's working correctly on the email-side of things!


4. How to import Hawthorn's demo content

With Hawthorn, you can quickly and easily import its demo site content and Customizer settings. Doing so will import the images, posts, pages, categories, menu items, widgets, layout settings, and more that we've used on its demo website here: Hawthorn's demo site

Many find this helpful if they're starting their site from scratch and would like to see it pre-populated with content in order to learn how the theme works. 

Please note: If your site already has content on it, you may want to reconsider importing Hawthorn's demo content. It will inject the demo site's content among your own. 


1) Install & activate the recommended plugin called One Click Demo Import

2) Make sure that all other Hawthorn required & recommended plugins are installed and activated

When you first install Hawthorn, there will be a notification banner across the top of your WP Dashboard. Follow the prompts to install and then activate the plugins. 

You can also navigate to WP Dashboard > Plugins > to ensure the required & recommended plugins are installed & activated. 

3) Navigate to WP Dashboard > Appearance > Import Demo Data > and click the "Import Demo Data" button 


And, voila! You're all set to go! 


5. How do I add social media icons to Hawthorn?

Please note: This FAQ Article is specifically for the Hawthorn theme.



How do I add social media icons to my top-bar, footer & social widget?


Navigate to WordPress Dashboard > Appearance > Customize > Social Media Settings

Here, you can type in your username for whichever social media network you'd like. Once entered, the social media icons will appear in your site's header and the footer area automatically. If you leave the text box blank for a social media network, the icon will not appear.

Beneath each social media option are 2 check box options:

Check or un-check these boxes to customize where that particular social icon appears on the site. 

Please note: you only need to enter your username, not your social media account's full URL. 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




For your social media widget, please ensure you have navigated to WP Dashboard > Appearance > Widgets > and added the "Hawthorn: Social Icons" widget to your sidebar area or footer widget area. 

Once the widget is added to your desired widget area, click the widget's heading to access the widget's settings. Check the boxes next to the social media networks you'd like to display in the widget. 

Please remember that you will have needed to enter that network's username within Appearance > Customize > Social Media Settings, otherwise Hawthorn won't know where to link your social icon to. 






What if the social media network icon I want to add isn't listed within Social Media Settings?

It's possible to manually add a custom social media icon if the one you'd like isn't available within Hawthorn's default settings. A bit of adjustment to the theme's code will be required.

Solo Pine uses Font Awesome's icons for social media icons. They offer a huge variety of icons to choose from. You'll first want to find the social icon via Font Awesome that you'd like to add.

Font Awesome's Icon Directory

In this example, we'll be adding a VK icon to Hawthorn.
On Font Awesome's icon page, you can see that the code for the VK icon is "vk".




ADDING THE CUSTOM ICON TO HAWTHORN'S TOP-BAR:


First, ensure you have the bundled plugin called "Hawthorn Core" installed and activated. If you don't have this installed yet, you should see a banner notification across the top of your Dashboard when you view your WP Dashboard > Appearance page. Use the hyperlink in this banner to install and then activate the "Hawthorn Core" plugin. 

Navigate to WP Dashboard > Plugins > Plugin Editor > from the drop-down menu in the top-right, select the "Hawthorn Core" plugin > and click the "Select" button. 

On the right, click the "inc" folder > then click the file titled "social_follow.php".

On line 40, you'll see a line of code for "solopine_rss". BELOW this code, create a new, blank line. 

On what is now line 41, copy and paste the following code:

<a href="YOUR VK PROFILE URL HERE" target="_blank"><i class="fa fa-vk"></i></a>

Note: If you're adding another icon that is NOT for VK, we'll need to make some adjustments to the above code. For example, if you are adding the icon called "vimeo-square", you would delete the "fa-vk" text above and instead type "fa-vimeo-square". Reference what title the Font Awesome directory gives its icons in order to pull in the correct one. 

Then, be sure to replace the dummy "YOUR VK PROFILE URL HERE" in the above code with the URL you want this icon to link to. 

Further down, on line 61, you'll again see another line of code for the "solopine_rss". This is for your Footer area. As before, create a new, blank line. On this new line, what is now line 62, copy and paste the icon code. Again, please remember to replace the dummy YOUR VK PROFILE URL HERE with the URL you want your footer icon to link to and change the "fa-vk" Font Awesome ID with whatever social icon you're adding (if not the VK icon as in this tutorial). 

Save changes to the file when finished. 




ADD THE ICON TO HAWTHORN'S SOCIAL WIDGET:


As before, you can navigate to WP Dashboard > Plugins > Plugin Editor > from the drop-down menu in the top-right, select the "Hawthorn Core" plugin > and click the "Select" button. 

This time, however, on the right, click the "inc" folder > then "widgets" folder > and click the file titled "social_widget.php". 

On line 75, you'll again see a line of code for the "rss" feed. Create a new, blank line beneath this RSS feed code. On what is now line 76, paste in your code as before. Remember to replace the dummy YOUR VK PROFILE URL HERE with the URL you want the icon to link to and to replace the "fa-vk" with your own Font Awesome social icon ID.

<a href="YOUR VK PROFILE URL HERE" target="_blank"><i class="fa fa-vk"></i></a>

Be sure to save the file when you're done making changes. 

You should be all set now!

As always, if you have any questions about this or if you'd like a hand, please don't hesitate to reach out to us via a support ticket! We'd be happy to help!

6. Fonts used in demo logo images


Your theme will have a default logo image which appears at the top of the site. You can replace this logo image by navigating to your theme's Customizer area and uploading your preferred image to the "Logo & Header" settings section. it will automatically override the default logo with your own image. 

Each theme will also include the PSD-format file for the demo logo image in the package you download from the marketplace. You are very welcome to edit the image using Photoshop or a similar image-editing program to say or look however you wish. 

Below, we've noted the fonts used in each theme's default logo image in case you would simply like to start from scratch but maintain a similar text look. 


OLEANDER

Main font: "Existence Light" available for free here: http://www.dafont.com/existence.font
Minor font: "Montserrat" available for free here: https://fonts.google.com/specimen/Montserrat


REDWOOD

Main font: "Dolce Vita" available for free here: http://www.dafont.com/dolce-vita.font
Minor font: "Montserrat" available for free here: https://fonts.google.com/specimen/Montserrat?query=montserrat
The "for" word: "Crimson Text" available for free here: https://fonts.google.com/specimen/Crimson+Text?query=crimson+tex


ROSEMARY

Main font: "Josefin Sans" available for free here: https://fonts.google.com/specimen/Josefin+Sans?query=josefin
Minor font: "Jenna Sue" available for free here: http://www.dafont.com/jenna-sue.font


HEMLOCK

Main font: "Champagne & Limousines" available for free here: http://www.dafont.com/champagne-limousines.font
Minor font: "Crimson Text" available for free here: https://fonts.google.com/specimen/Crimson+Text?query=crimson+tex


FLORENCE

Main font: "Beginning Yoga" available for free here: http://www.dafont.com/beginning-yoga.font
Watercolor texture overlay: "Add Me Some Watercolour Quick" available for purchase here: https://creativemarket.com/Nickylaatz/77899-Add-me-some-Watercolour-Quick


CASSIA

Main font: "Yesteryear" available for free here: https://fonts.google.com/specimen/Yesteryear?query=yesteryear


SPROUT & SPOON

Main & minor font: "Champagne & Limousines" available for free here: http://www.dafont.com/champagne-limousines.font


LAUREL

Main font: "Autumn Chant" available for free here: http://www.dafont.com/autumnchant.font


ALDER

Main font: "Playfair Display" available for free here: https://fonts.google.com/specimen/Playfair+Display
Minor font: "Notera" available for free here: http://www.dafont.com/notera.font


HAWTHORN

Main font: "Beauty" by PremiereGraphics available for free here: https://www.dafont.com/beauty-2.font
Minor font: "Montserrat" available for free here: https://fonts.google.com/specimen/Montserrat

7. Instagram feed isn't updating on the site

Sometimes, though not common, you may notice that your Instagram feed hasn't updated despite you adding new photos to your actual Instagram account. More often than not, this is related to transient data on your WordPress getting backed up.

To clean out your WP transient data, we recommend installing the plugin called "Delete Expired Transients" ( https://wordpress.org/plugins/delete-expired-transients/). 

Once activated, navigate to WP Dashboard > Tools > Delete Transients > and delete the "Expired Transients".

If you have a cache tool running on your WordPress and/or on your web browser, it may be best to clear the cache afterward as well. 

If this still doesn't help, feel free to reach out to us via a new support ticket! We'd be happy to take a look. 

8. How do I create a Contact Me page?

First, please be sure that you have installed and activated the Contact Form 7 plugin.


Creating the form

Along the top of the contact form's settings box, there are 4 tabs: Form, Mail, Messages, and Additional Settings.

"Form" tab: you can choose how your contact form will display with some simple HTML code.
"Mail" tab: you can set up who your messages are sent to and how they will be displayed.

IMPORTANT!
Please be sure to navigate to the "Mail" tab and insert your own email address within the "To:" form.

"Messages" tab: Adjust default messages visitors will receive in various situations.
"Additional Settings" tab: Option to add custom code snippets if desired.

Creating the page




*Note for the Hemlock theme:


To have your contact form appear as it does on Hemlock's demo site, we have included some pre-styling within the theme. When you create your contact form, use the following mark-up:

<p class="sp_input">Your Name (required)
[text* your-name] </p>
<p class="sp_input">Your Email (required)
[email* your-email] </p>
<p class="sp_input">Subject
[text your-subject] </p>
<p class="sp_message">Your Message
[textarea your-message] </p>
<p>[submit "Send"]</p>

9. How do I set up my navigation menu?

HOW TO CREATE A NAVIGATION MENU:




The basics:



  

Adding Pages, Categories, etc. to your menu

On the left side of this screen are a number of drop-down boxes titled "Pages", "Links" and "Categories". Each heading will list available items you can add to your menu.

For example, to add a Page to your menu, please ensure you've first created the desired page (within WP Dashboard > Pages > Add New). Click the "Pages" drop-down heading. The pages you've created will be listed below (see screenshot above). Check the box next to the page you'd like to add to your menu and click "Add to menu". The selected item should now appear under "Menu Structure" column. Here, you can drag and drop the item you've added to adjust its location in the menu. You can also create sub-menus by dragging and dropping a menu item underneath another so that it's indented.



TUTORIAL: Adding a "Home" link to your menu

To add a link to your navigation menu that will direct users back to your homepage, select the "Link" drop-down menu. Enter your homepage's URL into the appropriate box and then give it a title, such as "Home". Click "Add to Menu" and drag and drop the menu item to where you'd like it to be placed.






  

TUTORIAL: Adding a Category page to your menu

Once you've created a post category (within a post's create/edit screen) and assigned it to at least one post, when you look within Appearance > Menus > Categories, you will see this category listed. Check the box next to your desired category and select "Add to Menu". WordPress will automatically generate a page and pull in all posts that have this particular category assigned to it.







 

TUTORIAL: Creating an empty parent menu item
 

 In some situations, it's preferable to have a "parent" menu item which, when clicked, leads nowhere. Nested beneath the item, there may be a variety of related "child" menu items. 

For example, a parent menu item titled "Categories" which is not hyperlinked, and child menu items of your various category options. 

To create a menu item that doesn't link anywhere, you can navigate to WP Dashboard > Appearance > Menus. Select the drop-down on the left titled "Custom Links". 

For its "URL" field, you can simply use a hashtag ( # ) character. 
For its "Link Text" field, you can enter whatever you'd like the menu item to be named. 
When finished, click "Add to Menu".  

Next, nest your other regular menu items beneath this un-hyperlinked parent item. 
Save changes when finished.






Sub Menus

Once you've populated your menu with items, you can create sub-menus by dragging and dropping the items "within" other menu items. When you drag one item beneath the "parent" menu item, it will indent a bit to the right. This indicates that the "child" menu item is now nested beneath the "parent" menu item. 

  



Editing Menu Items

If you wish to edit or remove a menu item, click the little arrow on the right-side of the menu item name. A selection of options will drop down, including editing the navigation label as well as removing the item altogether.

  

Additional Menu Item Features

For additional menu features, click on the "Screen Options" tab in the top-right corner of the Menu page.
Here, you can add the option of linking directly to a Post or specific Tag within your navigation menu. You can also check the box next to "Link Target" to give yourself the option of having menu items open in an entirely new tab when clicked.





For more information on menus in WordPress, check out:

http://codex.wordpress.org/WordPress_Menu_User_Guide

10. Changing Font Family in Hawthorn - CSS Code

Please note: This article is specifically for the Hawthorn theme



Below, we've noted nearly all of Hawthorn's text elements and how to target them with CSS in order to change their font family

If you're looking for a list of Hawthorn's text element CSS in order to change font size, please reference this article instead: Changing font size in Hawthorn - CSS code.

This list of Hawthorn's text element CSS is in coordination with this article: How do I change my theme's fonts?

Should you have any questions regarding the below elements, want any clarification, or would like a hand adjusting the font of elements within Hawthorn, please don't hesitate to open up a new support ticket and let us know!




/* ----- GENERAL SITE BODY TEXT ----- */
p {font-family: 'your-font-name-here';}
   
   
/* ----- HEADER AREA ----- */
/* Navigation menu items */ #nav-wrapper .menu li a {font-family: 'your-font-name-here';}
/* Mobile menu items */ .slicknav_nav a {font-family: 'your-font-name-here';}
/* Top-bar search text */ .desk-show-search input, .mobile-show-search input {font-family: 'your-font-name-here';}
  
  
/* ----- FEATURED AREA SLIDER ----- */
/* Category */ .feat-content .cat a {font-family: 'your-font-name-here';} 
/* Post title */ .feat-content h2 a {font-family: 'your-font-name-here';}
/* Post excerpt text */ .feat-content p {font-family: 'your-font-name-here';}
/* Slider "read more" button */ .feat-item a.feat-more {font-family: 'your-font-name-here';}
/* Previous & next post buttons */ #featured-area .bx-controls a {font-family: 'your-font-name-here';}
/* Pagination counter */ #featured-area .bx-pager.bx-default-pager {font-family: 'your-font-name-here';}
  
  
/* ----- POST HEADER ----- */
/* Post header title */ .post-header h2 a, .post-header h1 {font-family: 'your-font-name-here';}
/* Post header category */ .post-header .cat a {font-family: 'your-font-name-here';}
/* Post date */ .post-header .sp-date a {font-family: 'your-font-name-here';}
 
 
/* ----- POST & PAGE CONTENT ----- */
/* Post/Page body text */ .post-entry p {font-family: 'your-font-name-here';}
/* Post/Page blockquotes */ .post-entry blockquote p {font-family: 'your-font-name-here';}
/* Post/Page numbered lists & bulletted lists */ .post-entry ul li, .post-entry ol li {font-family: 'your-font-name-here';}
 
/* Post/Page Body H-tags */
.post-entry h1 {font-family: 'your-font-name-here';}
.post-entry h2 {font-family: 'your-font-name-here';}
.post-entry h3 {font-family: 'your-font-name-here';}
.post-entry h4 {font-family: 'your-font-name-here';}
.post-entry h5 {font-family: 'your-font-name-here';}
.post-entry h6 {font-family: 'your-font-name-here';}
  
  
/* ----- INDEX SHORTCODE ROWS ----- */
/* Section title */ .post-entry .index-heading>span {font-family: 'your-font-name-here';}
/* "View All" link */ .post-entry .index-heading a {font-family: 'your-font-name-here';}
/* Index post titles */ .short-header h2 a, .short-header h2 {font-family: 'your-font-name-here';}
/* Index post category */ .short-header .cat a {font-family: 'your-font-name-here';}
  
  
/* ----- CONTACT FORM 7  ----- */
/* Name, email, subject, message, etc. labels */ .wpcf7 label {font-family: 'your-font-name-here';}
/* Input fields */ .wpcf7 input, .wpcf7 select, .wpcf7 textarea {font-family: 'your-font-name-here';}
/* Submit button */ .wpcf7 .wpcf7-submit {font-family: 'your-font-name-here';}
  
  
/* ----- ARCHIVE PAGE ----- */
/* "Browsing Category" text */ .archive-box span {font-family: 'your-font-name-here';}
/* Category, tag, etc. heading */ .archive-box h1 {font-family: 'your-font-name-here';}
  
  
/* ----- POST & PAGE FOOTER AREA ----- */ 
/* Post/page "By" text */ .by {font-family: 'your-font-name-here';}
/* Post author */ .meta-author a {font-family: 'your-font-name-here';}
/* Comment link */ .meta-comments a, .meta-comments a .by {font-family: 'your-font-name-here';}
/* Post tags */ .post-tags a {font-family: 'your-font-name-here';}
/* ----- PAGINATION ----- */
/* Previous Post / Next Post */  .pagination-text {font-family: 'your-font-name-here';}
/* Previous Post / Next Post post titles */ .pagination-item h3 a {font-family: 'your-font-name-here';}
  
  
/* ----- YOU MIGHT ALSO LIKE ----- */
/* Section's title */ .post-related h4.block-heading {font-family: 'your-font-name-here';}
/* Post titles */ .item-related h4 a {font-family: 'your-font-name-here';}
/* Post dates */ .item-related .sp-date {font-family: 'your-font-name-here';}
  
  
/* ----- POST COMMENTS ----- */
/* Section's title */ .post-comments .block-heading {font-family: 'your-font-name-here';}
/* "Reply" button */ .post-comments span.reply a {font-family: 'your-font-name-here';}
/* "Leave a Reply" Text */ #respond  h3 {font-family: 'your-font-name-here';}
/* Name, email, website, etc. */ #respond .comment-form-author input, #respond .comment-form-email input, #respond .comment-form-url input {font-family: 'your-font-name-here';}
/* Post comment button */ #respond #submit {font-family: 'your-font-name-here';}
/* Commentator's name */ .thecomment .comment-text h6.author, .thecomment .comment-text h6.author a {font-family: 'your-font-name-here';}
/* Comment's date & time */ .thecomment .comment-text span.date {font-family: 'your-font-name-here';}
/* Comment's text */ .comment-text p {font-family: 'your-font-name-here';}
  
  
/* ----- HOMEPAGE POST PAGINATION ----- */
/* Homepage Older Posts/Newer Posts */ .hawthorn-pagination a {font-family: 'your-font-name-here';}
  
  
/* ----- WIDGETS ----- */
/* Widget titles */ .widget h4.widget-title {font-family: 'your-font-name-here';}
/* Solo Pine's latest posts widget post titles */ .side-pop.list .side-pop-content h4 a {font-family: 'your-font-name-here';}
/* Solo Pine's latest posts widget date */ .side-pop.list .side-pop-content span.date {font-family: 'your-font-name-here';}
/* WP's recent posts widget items */ .widget_recent_entries ul li a {font-family: 'your-font-name-here';}
/* WP's archive widget items */ .widget_archive ul li a {font-family: 'your-font-name-here';}
/* WP's category widget items */ .widget_categories ul li a {font-family: 'your-font-name-here';}
/* Solo Pine's About widget text */ .about-widget p {font-family: 'your-font-name-here';}
/* Newsletter widget headline */ .subscribe-box h4 {font-family: 'your-font-name-here';}
/* Newsletter widget text */ .subscribe-box p {font-family: 'your-font-name-here';}
/* Newsletter "Your email address" text */ .home-widget .subscribe-box input {font-family: 'your-font-name-here';}
/* Newsletter widget "Subscribe" button */ .subscribe-box input[type=submit] {font-family: 'your-font-name-here';}
/* Solo Pine's Promo widget title */ .promo-overlay  h4 {font-family: 'your-font-name-here';}
  
  
/* ----- FOOTER AREA ----- */
/* Footer text */ .footer-text {font-family: 'your-font-name-here';}
/* Instagram feed text */ #ig-footer h4 {font-family: 'your-font-name-here';}
/* Footer social text */ .footer-social a {font-family: 'your-font-name-here';}

11. Changing font size in Hawthorn - CSS Code

Please note: This article is specifically for the Hawthorn theme. 



Would you like to change the font size of any of Hawthorn's text elements? Below, we've noted nearly all of the theme's text elements and how to target them with CSS in order to change their font-size.  

Simply locate the text element in the list below you'd like to alter, copy the whole line of code, and paste it into WordPress Dashboard > Appearance > Customize > Additional CSS.  

We've listed each item with its default font size, so feel free to adjust it to whatever pixel size you prefer instead.  


Should you have any questions regarding the below elements, want any clarifications, or would like a hand adjusting font-size, please don't hesitate to open up a new support ticket and let us know!



/* ----- GENERAL BODY TEXT ----- */
p {font-size: 15px;}
  
  
/* ----- HEADER AREA ----- */
/* Navigation menu items */ #nav-wrapper .menu li a {font-size: 14px;}
/* Navigation sub-menu items */ #nav-wrapper ul.menu ul a, #nav-wrapper .menu ul ul a {font-size: 11px;}
/* Mobile menu "Menu" text */ .slicknav_menu .slicknav_menutxt {font-size: 12px;}
/* Mobile menu items */ .slicknav_nav .slicknav_item a {font-size: 11px;}
/* Top-bar search text */ .desk-show-search input, .mobile-show-search input {font-size: 14px;}
/* Top-bar social icons */ #top-social a i {font-size: 16px;}
  
   
/* ----- FEATURED AREA SLIDER ----- */
/* Category */ .feat-content .cat a {font-size: 13px;}
/* Post/Page title */ .feat-content h2 a {font-size: 38px;}
/* Excerpt text */ .feat-content p {font-size: 15px;}
/* Read More button */ .feat-more {font-size: 11px;}
/* Prev/Next buttons */ .bx-wrapper .bx-controls-direction a {font-size: 14px;}
/* Slider pagination counter */ .bx-wrapper .bx-pager {font-size: 18px;}  
   
/* ----- POST HEADER ----- */
/* Standard post/page header title */ .post-header h2 a, .post-header h1 {font-size: 31px;}
/* Grid post header title */ .grid-item .post-header h2 a {font-size: 21px;}
/* Full-width List post header title */ #main.fullwidth .list-item .post-header h2 a {font-size: 31px;}
/* Sidebar enabled List post header title */ .list-item .post-header h2 a {font-size: 25px;}
/* Post header category */ .post-header .cat a {font-size: 12px;}
/* Post date */ .sp-date a, .sp-date {font-size: 14px;}
  
   
/* ----- POST & PAGE CONTENT ----- */
/* Theme's body text */ .post-entry p {font-size: 15px;}
/* Post/Page blockquotes */ .post-entry blockquote p {font-size: 20px;}
/* Post/Page numbered lists & bulletted lists */ .post-entry ul li, .post-entry ol li {font-size: 15px;}
  
    
/* Post/Page Body H-tags */
.post-entry h1 {font-size: 30px;}
.post-entry h2 {font-size: 27px;}
.post-entry h3 {font-size: 24px;}
.post-entry h4 {font-size: 21px;}
.post-entry h5 {font-size: 18px;}
.post-entry h6 {font-size: 16px;}
 
  
/* ----- INDEX SHORTCODE GRIDS ----- */
/* Section title */ .post-entry .index-heading > span {font-size: 16px;}
/* "View All" link */ .post-entry .index-heading a {font-size: 11px;}
/* Index post titles */ index-item .grid-item .post-header h2 a {font-size: 16px;}
/* Index categories */ .short-header .cat a {font-size: 12px;}
  
  
/* ----- CONTACT FORM 7  ----- */
/* Name, email, subject, message, etc. labels */ .wpcf7 label {font-size: 15px;}
/* Input fields */ .wpcf7 input, .wpcf7 select, .wpcf7 textarea {font-size: 12px;}
/* Submit button */ .wpcf7-submit {font-size: 12px;}
  
  
/* ----- ARCHIVE PAGE ----- */
/* "Browsing Category" text */ .archive-box span {font-size: 16px;}
/* Category, tag, etc. title */ .archive-box h1 {font-size: 36px;}
  
  
/* ----- POST & PAGE FOOTER ----- */ 
/* "By" */ .meta-author .by {font-size: 13px;}
/* Post author */ .meta-author a {font-size: 13px;}
/* Social share icons */ .post-share a i {font-size: 14px;}
/* Comment counter */ .meta-comments a, .meta-comments a .by {font-size: 13px;}
/* Previous Post / Next Post */  .pagination-text {font-size: 12px;}
/* Previous Post / Next Post post titles */  .pagination-item h3 a {font-size: 15px;}
  
  
/* ----- YOU MIGHT ALSO LIKE ----- */
/* Section's title */ .block-heading {font-size: 13px;}
/* Post titles */ .item-related h4 a {font-size: 16px;}
/* Post date */ .item-related .sp-date {font-size: 12px;}
 
   
/* ----- POST COMMENTS ----- */
/* Section's title */ .post-comments .block-heading {font-size: 13px;}
/* "Reply" button */ .post-comments span.reply a {font-size: 10px;}
/* "Leave a Reply" Text */ #respond  h3 {font-size: 13px;}
/* Name, email, website, etc. */ #respond .comment-form-author input, #respond .comment-form-email input, #respond .comment-form-url input {font-size: 11px;}
/* "Post Comment" button */ #respond #submit {font-size: 11px;}
/* Commentator's name */ .thecomment .comment-text h6.author, .thecomment .comment-text h6.author a {font-size: 14px;}
/* Comment's date & time */ .thecomment .comment-text span.date {font-size: 12px;}
/* Comment's text */ .comment-text p {font-size: 15px;}
  
  
/* ----- HOMEPAGE POST PAGINATION ----- */
/* Homepage Older Posts/Newer Posts */ .hawthorn-pagination a {font-size: 10px;}
  
  
/* ----- WIDGETS ----- */
/* Widget titles */ .widget-title {font-size: 12px;}
/* Solo Pine's Latest posts list widget post titles */ .side-pop.list .side-pop-content h4 a {font-size: 15px;}
/* Solo Pine's Latest posts list widget date */ .side-pop.list .side-pop-content span.date {font-size: 13px;}
/* Solo Pine's Featured Post single widget title */ .side-pop-content h4 a {font-size: 17px;}
/* Solo Pine's About widget text */ .about-widget p {font-size: 15px;}
/* Solo Pine's Promo widget title */ #sidebar .promo-overlay  h4 {font-size: 11px;}
/* Newsletter widget headline */ .subscribe-box h4 {font-size: 16px;}
/* Newsletter widget text */ .subscribe-box p {font-size: 14px;}
/* Newsletter "Your email address" text */ .subscribe-box input {font-size: 13px;}
/* Social widget's icons */ .social-widget a {font-size: 16px;}
/* General WP list widgets (category, useful links, etc.) */ .widget ul li a {font-size: 14px;}
  
  
/* ----- FOOTER AREA ----- */
/* Footer widget headings */ .footer-widgets .widget-title {font-size: 13px;}
/* Footer social icons */ .footer-social a i {font-size: 18px;}
/* Footer social icon text */ .footer-social a span {font-size: 13px;}
/* "Made with love" footer text */ .footer-text p.madewidth {font-size: 18px;}
/* Copyright text */ .footer-text p {font-size: 13px;}

12. What are the ideal image dimensions to use in my theme?

It's hard to define exact image dimensions for each theme as different people have different preferences for how their content will look. 

Based on each theme's demo site, we've tried to note the recommended image dimensions, often with the minimum recommended width/height noted. 

You're very welcome to use images that are larger than noted below, as WP will crop/re-size the images to fit their respective containers nicely (logo images may be a different case). 

Please note that using very large images where it is not necessary can affect your site's loading speed and may even cause image uploading errors.

Should you have any questions, please feel free to open up a new support ticket and let us know!



// FLORENCE //

Logo image: Width no greater than 1080px. Theme will adjust to accommodate logo image's height automatically. Florence's demo logo image is 428px wide and 123px in height. To use a logo image that is wider than 1080px, please check out this article.
Full-width: Image width should be at least 1080px.
Standard post w/ sidebar: Image width should be at least 740px.
Thumbnail images: Smaller images such as grid layout, related posts, etc., will take your post's featured image and automatically crop it so that the image fits nicely within the smaller container.


// HEMLOCK //

Logo image: Width no greater than 940px. Theme will adjust to accommodate logo image's height automatically. Hemlock's demo logo image is 360px wide and 163px in height. To use a logo image with a width greater than 940px, please check out this article.
Full-width: Image width should be at least 940px.
Featured area slides: Featured image should be at least 650px wide & 440px in height, otherwise WP cannot upscale them. More info on the Featured Area Slider here.
Standard post w/ sidebar: Image width should be at least 650px.
Thumbnail images: Smaller images such as grid layout, related posts, etc., will take your post's featured image and automatically crop it so that the image fits nicely within the smaller container.


// ROSEMARY //

Slider image: Image width should be at least 1080px and height should be at least 660px.
Logo image: Width no greater than 1080px. Theme will adjust to accommodate logo image's height. To use a logo image with width greater than 1080px, please check out this article.
Rosemary's demo logo is precisely 407px in width and 113px in height.
Full-width post image: Image width at least 1080px.
Standard post image w/ sidebar: Image width at least 760px and image height at least 510px.
Thumbnail images: Smaller images such as grid layout, list layout, related posts, etc., will take your post's featured image and automatically crop it so that the image fits nicely within the smaller container.


// REDWOOD //

Slider image: Image width should be at least 1080px and height should be at least 530px.
Logo image: Width no greater than 1080px. Theme will adjust to accommodate logo image's height. To use a logo image with width greater than 1080px, please check out this article.
Redwood's demo logo is precisely 367px in width and 87px in height.
Promo Box image: Width at least 340px and a height of at least 200px.
Full-width post image: Image width at least 1080px.
Standard post image w/ sidebar: Image width at least 740px.
Thumbnail images: Smaller images such as grid layout, list layout, related posts, etc., will take your post's featured image and automatically crop it so that the image fits nicely within the smaller container.


// OLEANDER //

Slider image: Image width recommended at 1900px in width and height should be at least 645px. 
Logo image: Width no greater than 1140px. Theme will adjust to accommodate logo image's height. To use a logo image with width greater than 1140px, please check out this article
Oleander's demo logo is precisely 378px in width and 124px in height.
Promo Box image: Width at least 360px and a height of at least 240px. 
Full-width post image: Image width at least 1140px. 
Standard post image w/ sidebar: Image width at least 780px.
Thumbnail images: Smaller images such as grid layout, list layout, related posts, etc., will take your post's featured image and automatically crop it so that the image fits nicely within the smaller container.


// SPROUT & SPOON //

Logo image: Width no greater than 1080px. Theme will adjust to accommodate logo image's height. To use a logo image with width greater than 1080px, please check out this article.  
Sprout & Spoon's demo site logo is precisely 436px in width and 96px in height. 
Full-width post image: Image width at least 1080px.  
Standard post image w/ sidebar: Image width at least 740px. 
Thumbnail images: Smaller images such as grid layout, list layout, related posts, etc., will take your post's featured image and automatically crop it so that the image fits nicely within the smaller container.


// LAUREL //

Slider image: Image width recommended at 1900px in width and height should be at least 660px.  
Logo image for Header 1 Option: Adjustable via Customize > Header & Logo Settings
Logo Image for Header 2 Option: Any size. 
Laurel's demo logo in the top-bar is precisely 156px in width and 30px in height. 
Promo Box image: Width at least 360px and a height of at least 240px.  
Full-width post image: Image width at least 1140px.
Full-width post w/ full-width image: Width of at least 1600px and height of at least  660px. Height is adjustable.
Standard post image w/ sidebar: Image width at least 810px. 
Thumbnail images: Smaller images such as grid layout, list layout, related posts, etc., will take your post's featured image and automatically crop it so that the image fits nicely within the smaller container.


// ALDER //

Full-width post image: Image width at least 1080px. 
Standard post image w/ sidebar: Image width at least 790px.
Thumbnail images: Smaller images such as grid layout, list layout, related posts, etc., will take your post's featured image and automatically crop it so that the image fits nicely within the smaller container.


// HAWTHORN //

Featured Area Slider: Image width of at least 1080px. Desktop image height is 640px.
Full-width post image
: Image width at least 1180px. 
Standard post image w/ sidebar: Image width at least 850px.
Grid and List thumbnail images: Image width of at least 520px and height of at least 400px.



13. How do I enable/disable comments on my posts and pages?

Our themes hook into WordPress's comment system. To enable/disable the ability for your visitors to post comments, you can follow these steps. The procedure is the same for both Pages and individual Posts.

  

  

Enabling/disabling comments in published Posts/Pages

Open up your page's or posts's create/edit screen. On the right, you'll see a little section titled "Discussion". 

To enable comments on this particular Page or Post, check both option boxes. To disable comments, you can un-check these boxes. Be sure to click the "Update" button in order to save these changes.







Enable/disable comments for all future Posts/Pages

To set whether or not your future posts have comments automatically enabled/disabled by default, you can go to WP Dashboard > Settings > Discussion > And look under the "Default article settings" section. 

Here, you'll see the option to "Allow people to post comments on new articles". Check or un-check the box depending on your preference. Be sure to click "Save Changes" at the bottom of the page when you're finished.






Comments STILL not showing?

If your comment section is still not appearing even after enabling it, check to make sure the option to automatically close comments after a set time period isn't enabled by default. 

Navigate to WP Dashboard > Settings > Discussion > and look for the option "Automatically close comments on posts older than -- days". If this option is checked, un-check the box, save changes, and see if this helps!



14. Add a "Continue Reading" button to Hawthorn

Please note: This article is specifically for the Hawthorn theme. 


ADDING "CONTINUE READING" BUTTON TO STANDARD POSTS

To add a "Continue Reading" button beneath your standard layout posts, you can follow these steps:

Navigate to WP Dashboard > Appearance > Editor > and open the file titled "content.php". 

On line 110, you'll see this line of code:

<?php the_content('', false); ?>

Change that line of code to the following instead:

<?php the_content(__('Continue Reading', 'hawthorn')); ?>

If you'd like to have the button say something other than "Continue Reading", you're welcome to change the text at this point in time. 

Next, on lines 114-118, you'll see this block of code:

<?php if(get_theme_mod('hawthorn_sidebar_homepage') == true) : ?>
<p><?php echo hawthorn_string_limit_words(get_the_excerpt(), 42); ?>…</p>
<?php else : ?>
<p><?php echo hawthorn_string_limit_words(get_the_excerpt(), 26); ?>…</p>
<?php endif; ?>

Change that block of code to instead be:

<?php if(get_theme_mod('hawthorn_sidebar_homepage') == true) : ?>
<p><?php echo hawthorn_string_limit_words(get_the_excerpt(), 42); ?>…</p>
<p><a href="<?php echo get_permalink() ?>" class="more-link"><span class="more-button"><?php _e( 'Continue Reading<span class="more-line"></span>', 'hawthorn' ); ?></span></a></p>
<?php else : ?>
<p><?php echo hawthorn_string_limit_words(get_the_excerpt(), 26); ?>…</p>
<p><a href="<?php echo get_permalink() ?>" class="more-link"><span class="more-button"><?php _e( 'Continue Reading<span class="more-line"></span>', 'hawthorn' ); ?></span></a></p>
<?php endif; ?>

Save changes to the file when finished. 

Lastly, navigate to WP Dashboard > Appearance > Customize > Additional CSS > and enter this styling code:

.more-link {
    text-align:center;
    display:block;
    margin:40px auto;
    text-transform:uppercase;
    letter-spacing:3px;
    font-size:11px;
        font-weight: 700;
    color:#000;
        background-color: #fff;
        border: 1px solid #000;
        padding: 10px 0;
        max-width: 200px;
    -o-transition:.3s;
    -ms-transition:.3s;
    -moz-transition:.3s;
    -webkit-transition:.3s;
    transition:.3s;
}
a.more-link:hover {
    text-decoration:none;
    color:#fff;
        background: #000;
}


Save changes to the file when finished. 



15. Creating additional WordPress Users

You may find that you'd like to create additional WordPress Users which can log into your WordPress Dashboard for a variety of reasons. For example, to contribute in writing posts or to troubleshoot technical issues you're experiencing. 

Creating a new WP User and adjusting their permissions (or "Role") can allow you to not only ensure your own personal login details are kept safe, but help control what sort of changes the secondary user can make within your dashboard. 



CREATING A NEW USER

1 ) Navigate to WP Dashboard > Users 

2 ) To create a new user, click the "Add New" button at the top of the page. 

3 ) Enter the new Username and Email Address (required).
**You can either use our email [solopinedesigns @ gmail.com] or use your own email address here.  

4 ) Fill in the user's personal details like Name and Website, if wanted (not required). 

5 ) Click the "Show Password" button. 

This will automatically generate a random password. 
If you are creating a password for a colleague, you can change it to whatever you wish. 

If you are creating a new WP User for a technical support representative to log in and troubleshoot an issue, it's fine to leave the temporary password as-is. Though please copy & paste it into the support ticket rather than taking a screenshot -- the complicated passwords can take us ages to hand-type out!
 

6 ) Choose if you'd like to email this person a notification (not required). 

7 ) Select the user's Role

There are 5 different WordPress User roles to choose from.
Each role will affect what areas of the dashboard this person can access or control. 

If you are creating a new WP User for a technical support representative, you will want to provide them with an "Administrator" role. 

8 ) When finished, click the "Add New User" button.

If the User has been created for technical support purposes, you can then copy and paste the new guest user's username and password into the support ticket. Please be sure to also share your site's URL if you haven't already. 
 
 


To edit your WP Users, you can always navigate back to the WP Dashboard > Users screen and select the user you would like to manage. Here, you can change a variety of personal details about the user, including their name, adding biographical author text, social media usernames, change passwords, and more. 

16. How to determine a post, page, or category ID

Every time a post, page, or category is created, WordPress assigns it a unique ID number. Identifying an ID is quite simple. In this tutorial, we will be determining a post's ID, though the steps are the same for pages and categories as well.



Navigate to your WordPress Dashboard > Posts page.
Here, all of the posts you've created should be listed beginning with the most recent.




To find a specific post's ID number, hover your mouse over its post title.

As you hover, you'll notice a little box appears in the bottom-left corner of your screen displaying the link's complete URL. Your post's ID number is hidden within this URL.

For example, my post's URL looks like this:


http://......../redwood/wp-admin/post.php?post=116&action=edit


Toward the end of the URL, you can see a bit of text that says "post=116".
This tells us the post ID number. This particular post has a unique ID number of "116".


That's it! The same steps can be used to determine a page or category ID as well.
Simply navigate to WP Dashboard > Pages and hover over a page's title URL to see its page ID.
Or, navigate to WP Dashboard > Posts > Categories and hover over a category title to see its category ID.



Don't see the URL appearing at the bottom of your screen when you hover over the post?


For some, the URL at the bottom-left corner of your screen may not appear. No worries! There's another way to determine a post, page, or category's ID. 

Within the WP Dashboard > Posts screen where all of your posts are listed, simply click through to the edit screen of your post you'd like to find the ID of. Now, look up in your web browser's URL bar. Here, you should see the post's full URL which will include the "post=" text. Whatever number follows the "post=" text will be your post's ID number. 

This is the same process for determining a page's ID (WP Dashboard > Pages) and determining a category ID (WP Dashboard > Posts > Categories). 


17. Why is Facebook pulling in the wrong image when I share my post?

If the wrong image (or no image at all) is being pulled in when your post is shared on Facebook, it's often an easy fix!

First, please ensure you've assigned a Featured Image to your post. A Featured Image is a representative picture for your post which is used in a number of areas & functions. To assign a Featured Image, open up your post's create/edit screen and look to the bottom-right. Here, you'll see a box where you can add your desired image.


Assign Featured Image Screenshot


If you have a Featured Image assigned to your post and are still experiencing the issue, we recommend using the plugin called WP Open Graph.

When you share a post to your Facebook account, Facebook's crawlers go through and 'scrape' the post's HTML to grab the relevant information to share. Sometimes, these crawlers need a bit of help. To give them a hand, you can use the WP Open Graph plugin which adds additional meta fields to each of your posts. This better helps FB's crawlers to identify the pertinent information to ensure your users share the correct details each and every time.


Open Graph Meta Screenshot


Please note: Once you've installed/activated the plugin and ensured your post's Open Graph meta details are correct, it can take up to 24 hours for Facebook's crawlers to come around and scrape your page again.


18. How do I add a Featured Image?

What is a Featured Image?

A Featured Image is a representative picture for your post which is used in a number of areas & functions, like on the homepage, post page, related post areas, recent post widgets, featured area sliders, etc..


Assign Featured Image Screenshot #1


How do I assign a Featured Image?

To assign a Featured Image to a post, navigate to your post's create/edit screen and look to the bottom-right. Here, you'll see a box titled "Featured Image" where you can add your desired image. Be sure to update your post when you're finished.


Assign Featured Image Screenshot #2


19. How to find your purchase code

How do I find my theme's ThemeForest purchase code?


You will need your ThemeForest purchase code in order to open up a support ticket. Each purchase code is a unique string of letters and numbers to verify that your theme license purchase is valid. The purchase code will never expire. 

To find your purchase code, follow these steps:





20. Error: Theme is missing the style.css stylesheet

When attempting to install a theme on WordPress for the first time, you may experience an error message stating:

"The package could not be installed. The theme is missing the style.css stylesheet. Theme install failed."

No worries! This is quite a common mistake and simple to remedy.


When you purchase a theme license from ThemeForest or Creative Market & download the theme package, you will receive a zipped folder titled something like "themeforest-8253073-hemlock-a-responsive-wordpress-blog-theme".
Unzip this first theme package folder.

Within the unzipped theme package, you will find an additional zipped file with the theme's name as the title ( for example: "hemlock.zip" ).

THIS zipped file is what you will install onto WordPress. 




21. How to update your theme

Occasionally we'll release theme updates which may include bug fixes or even additional features. You may receive an email notification that an update is ready to install. If you're interested in knowing what exactly the update includes/remedies, you're welcome to reference your theme's item page on ThemeForest where we'll add a "changelog" noting each update point. 

FIND YOUR SOLO PINE THEME ITEM PAGE HERE

Below, we'll go over 2 different methods of updating your theme-- via plugin or manually.  
*The Oleander theme must be updated via the "Manual" method. 

Please read through the following instructions carefully and let us know via a support ticket if you have any questions! 



IMPORTANT ITEMS TO NOTE PRIOR TO UPDATING

BACKUP YOUR DATABASE: By default, WordPress should save your content to your database. This is why your content appears on whatever theme you have activated within your WP Dashboard. However, it's always a good idea to create a database backup before deleting a theme, just in case.

CHANGES IN THEME FILES: If you've modified any of the theme files yourself, you'll need to note these changes prior to updating in order to re-implement them once you've installed the latest version of the theme.
The update will replace your previous version's theme files with new ones. 

Any Custom CSS additions placed within your Appearance > Customize > Additional CSS box or theme settings within your Appearance > Customize section should remain safe and sound. 




METHOD 1: ENVATO MARKET PLUGIN

Note: This option will not work with our Oleander theme.

The Envato Market Plugin takes a moment to setup, however once connected to their API updating your theme via the WP Dashboard couldn't be easier!


Step 1. Download & install the Envato Market Plugin

 Step 2. Connect to the Envato API

Step 3. Updating the theme

If a theme update is available, a notification banner will appear over the theme image. Click the "Update Available" link to update your theme. 

Step 4. Updating bundled plugins

Our themes come with bundled plugins. If we've updated the plugin's code, you'll see a notification banner appear at the top of your WordPress Dashboard prompting you to update this plugin. Click through the banner's link to update the plugin. If you don't see a banner, you can also navigate to WP Dashboard > Appearance > Install Plugins. However, if you don't see the "Install Plugins" option noted, it means you're good to go! No need to install or update any plugins.

You're all set!




METHOD 2: MANUALLY UPDATING THE THEME

Step 1. Download the updated theme

Step 2. Install the updated theme

Remember! It's important to install the theme's ZIP file, and not the entire theme package you download from ThemeForest or Creative Market. Otherwise you will receive a "missing 'style.css' file" error message. For a refresher on how to install a theme correctly, reference your theme's "Getting Started" article here: Solo Pine Tutorials & FAQ Articles

Step 3. Updating bundled plugins

Our themes come with bundled plugins. If we've updated a plugin's code, you'll see a notification banner appear at the top of your WordPress Dashboard prompting you to update this plugin. Click through the banner's link to update the plugin. If you don't see a banner notification, navigate to WP Dashboard > Appearance > Install Plugins and look for update notifications. 

You're all set!


22. Setting up your webshop


Currently, our themes which support the WooCommerce shop plugin are Oleander, Rosemary, Redwood, Hemlock, Laurel, Alder, Florence, Hawthorn and Sitka.

When you first install these themes, the shop options (such as "Shopping cart", "Check out", etc.) won't be visible. This is because the shop features will be activated once you install and activated the free WooCommerce plugin. 

Below, we'll give you a general overview of how to setup your webshop. We'll also link to WooCommerce's great documentation/tutorial articles as well if you need more in-depth explanation. At the bottom of the article, you'll find additional WooCommerce resources to answer any questions which may arise unanswered. 


 

Installing the WooCommerce plugin

If you're ready to begin setting up your webshop, you can install the WooCommerce plugin. 

Navigate to WP Dashboard > Plugins > "Add New" button in the top-left. Search the WordPress Plugin Directory for the term "WooCommerce". 

"Install" the WooCommerce plugin. 
When it's finished installing, you can either "Activate" the plugin directly where you are on the WordPress Plugin Directory page, or, navigate back to WP Dashboard > Plugins > and click the "Activate" button next to the WooCommerce plugin. 



WooCommerce Setup Wizard

If you haven't installed WooCommerce on your WordPress before, you will be greeted with a screen asking you if you'd like to run the WooCommerce Setup Wizard. 



We highly recommended doing so!
It can save lots of time and effort. Click "Let's Go!" to get started. 

The Setup Wizard will explain that it will automatically create a number of shop-related pages for you, including pages for the "Shop", "Cart", "Checkout", and "My Account". 



Click "Continue" to have WooCommerce create these pages for you. 

The next few screens will ask you questions about your shop location, preferred units of measurement, currency, whether or not you'll be shipping items, if you'll be charging tax, and what kind of customer payments you'd like to accept. 

If you aren't sure of a question, you can always skip that particular screen and edit the setting later within the WooCommerce plugin's settings. 

When finished, you'll be taken to a final screen. 



From this screen, you can choose to continue setting up your shop by creating your first product. To do so, click the "Create your first product!" button. 

Otherwise, you can click the little link at the bottom which says "Return to the WordPress Dashboard" to exit out of the wizard. You can always create your first store product later by navigating to WP Dashboard > Products > Add Product.  

  

**For more information regarding the WooCommerce Setup Wizard, including how to return to the Wizard if you skipped it the first time around, please reference WooCommerce's article here: WooCommerce OnBoard Wizard



WooCommerce Settings

You should now see 2 new menu items within your WordPress Dashboard on the left-side. One is titled "WooCommerce" and the other is titled "Products". 

You can always access and edit your WooCommerce's settings via WP Dashboard > WooCommerce

Here, you'll see there are numerous setting sections listed within your WP Dashboard's left-side menu nested beneath the "WooCommerce" item. There are also a number of tabs at the top where you can edit your webshop. 



Before launching your webshop, please be sure to spend some time getting acquainted with these various settings to ensure you have your shop options exactly as you please. 

You will also find a few options for Customizing how your shop elements display by navigating to WP Dashboard > Appearance > Customize > WooCommerce Settings

 

***For more details on WooCommerce's numerous settings and options, please reference their article here: Settings & Options



Creating products

To begin creating new products for your shop, you can navigate to WP Dashboard > Products > Add Product

As with the "WooCommerce" Dashboard menu item, you'll notice that there are additional Product settings nested within your Dashboard menu on the left. 


To create your first product, give it a title and enter the item's description in the big text field. 

Further below, you can give the item a price. If you'd like to place the item on sale at any point, you can edit this product page and give it a sale price in addition to the regular price. You can also schedule a sale price to appear at a certain date or time of your choosing. 



Use the tabs on the left to edit information about the product such as how much is in inventory, how much it weighs in order to calculate shipping charges, and more. 



In the field for "Product Short Description", enter a more boiled-down summary of your product. 



On the right side are additional settings for your product:

Product Gallery:
In the meta box titled "Product Gallery", select images of your product to appear in a thumbnail gallery on your product's page to give your customer the best possible visual of your product. 

Product Image:
In the box titled "Product Image", you can assign what is essentially your Product's Featured Image. Select a single image which will represent your product in a variety of places. 

Product Tags:
Like in a regular WordPress post, you can create and assign Tags to your products. 

Product Categories:
Again, as with WordPress posts, you can create and assign one or more categories to your products. 



To preview your product's page prior to publishing, you can click the "Preview" button in the top-right. 
To save a draft of your product to be edited or published at a later time, you can click the "Save Draft" button. 
And to publish your product, you can click the "Publish" button. 

 

***For more details on how to setup your Products, please reference WooCommerce's article here: Set Up Products



WooCommerce Widgets & Sidebar

WooCommerce comes with some custom widgets which you can add to the theme's default sidebar area, or, which you can add strictly to your "shop" sidebar area. To view and edit them, navigate to WP Dashboard > Appearance > Widgets

On the left you'll see all of your available widgets listed. If you scroll down, you'll notice that there are lots of new WooCommerce-related widgets that have appeared. We recommend testing each widget out and seeing if it's something you'd be interested in incorporating into your site. 

On the right, you'll see that a new widgetized area titled "WooCommerce Sidebar" has appeared. You can drag & drop any widgets into this sidebar area that you'd like to appear on your shop-related pages  when the shop's sidebar is enabled. 



Enabling/Disabling the Shop's Sidebar

To enable or disable the sidebar area on your shop and product pages, you can navigate to WP Dashboard > Appearance > Customize

Depending on your theme, you may see a section titled "Shop Settings". Within, you should see an option for "Shop Layout". Here, choose to enable or disable the sidebar.


 

Alternatively, if you do NOT see a "Shop Settings" section within your Customizer section, your webshop Sidebar will appear or disappear depending on whether or not you've added widgets to your "WooCommerce" sidebar area. If there are no widgets placed within the WooCommerce sidebar, then your webshop pages will display full-width. If you DO place widgets within the WooCommerce sidebar, then the sidebar will automatically activate. 





LAUNCHING YOUR SHOP

When you've created your products, setup your WooCommerce options as you'd like, chosen whether or not you'd like to use the sidebar/widgets, and are ready to make your shop accessible to your visitors, all you need to do is add your "Shop" page and related pages to your navigation menu. 

To do so, navigate to WP Dashboard > Appearance > Menus

If you haven't yet setup your navigation menu for your theme, please be sure to reference our article here on how to do so: How do I set up my navigation menu?

On the left, you'll notice that you now have additional menu sections for WooCommerce, such as "Products", "Product Categories", and "Product Tags". 

However to simply add a "Shop" link in your menu that directs visitors to your shop page, you can look within the "Pages" tab. If you ran the WooCommerce Setup Wizard, there should automatically be pages titled "Shop", "Cart", "Checkout", and "My Account". 

Check the boxes next to the menu items you'd like to add to your menu and then click the "Add to Menu" button. Drag & drop the items to position them exactly where you'd like within the menu. 

We recommend also including the "Cart" and "Checkout" menu options so they're accessible for your customers. To save space, you can always nest the "Cart" and "Checkout" options beneath your main "Shop" menu item. To do so, drag and drop them beneath the "Shop" item. When they indent a bit to the right, they are successfully nested and will display as a drop-down menu. 



  

MORE WOOCOMMERCE RESOURCES

Still have questions or are interested and learning about the variety of things WooCommerce is capable of? We highly recommend checking out WooCommerce's collection of tutorial articles and videos! 

WooCommerce Documentation Articles:
https://docs.woocommerce.com/documentation/plugins/woocommerce/getting-started/

WooCommerce Video Tutorials*
https://woocommerce.com/videos/

*For the video tutorials, please scroll down the page a bit to where you'll begin seeing "WooCommerce 101" videos appear. 


And, as always, if you find yourself with any questions, please feel free to log into your Ticksy account at https://solopine.ticksy.com and open up a new support ticket. We'd be happy to help!


23. Theme Support Coverage FAQs

Purchasing one of our theme licenses from ThemeForest provides you with six months free technical support included in the price. This is to ensure you have a helping hand while getting started with your Solo Pine theme and so that we can assist you with any questions that may pop up during that long time period.
After six months from theme purchase, the support coverage expires.

Below are some frequently asked questions regarding Envato/ThemeForest's support policy and how it affects your Solo Pine theme.




What does theme support include?

As stated by Envato's Item Support Policy, theme support includes:




Will the FAQ article database & theme updates expire with my support coverage?

Nope! You will always be welcome to use the tutorial articles found within our support database, regardless of your support coverage status. And theme updates are always available to you at no extra cost.



How do I know if my support coverage has expired?

To check if your support coverage has expired or to find out how much time you have left in your support coverage window, you can log into your Envato account. Navigate to your "Downloads" page and find your Solo Pine theme in the list. Here, you can see the remaining coverage time for support.



Do I HAVE to renew my support coverage?

Not at all. Support coverage is totally optional! If you find that you never needed to open up a support ticket or if you haven't in a long time, it probably isn't necessary to renew your support coverage.
However, if you find yourself relying on our support services quite often or if you like knowing you can reach out to us at any time, it may be a good investment.



What if my support coverage expires and I decide I want to renew after-the-fact?

Not a problem! You can always renew your Solo Pine theme support coverage even after it has expired.



Is there a benefit to renewing support coverage before it expires?

If you renew your theme's support coverage prior to expiration, Envato offers a discounted price.



How much does renewing or extending my support coverage cost?

The support coverage renewal/extension pricing is set by the ThemeForest Marketplace. According to their pricing guide:



How do I renew my theme support coverage?

To renew your theme's support coverage, you can log into your Envato account. If you see a number of linked images on the left for Envato's various marketplaces, click the one for ThemeForest. Then, navigate to your "Downloads" page (via your user icon in the top-right of the screen) and find your Solo Pine theme in the list. Here, you can click the link to extend or renew your support coverage.


24. Solo Pine Referrals & Affiliates // Share the love, earn some cash!


Did you know you can earn money each time you refer someone to Solo Pine?


Sign up for Creative Market's Partner Program and/or Envato's Affiliate Program.
They'll provide you with a unique URL which acts as a tracker so the marketplace can track your earnings. If a person who clicks through your link purchases a Solo Pine theme, the marketplace will credit your account with your earnings! 



SOLO PINE & ENVATO



The majority of our Solo Pine themes are available via Envato's ThemeForest marketplace. Envato has partnered with Impact Radius to track and credit you for any referred sales.

To get started, visit the Envato Affiliate Program to begin the application process.  Once approved, you'll be provided with instructions on how to start earning some dough by referring others to Solo Pine themes!  


SOLO PINE & CREATIVE MARKET



Solo Pine currently has 1 theme, Oleander, for sale via Creative Market. 

Sign up for Creative Market's Partner Program and receive your unique Creative Market Partner code which you can add to the end of our Oleander theme's page URL. 


For example, Oleander's regular theme URL is:

https://creativemarket.com/SoloPine/499272-Oleander-A-Blog-Shop-Theme


With the addition of your Partner code, the URL would look something like this:

https://creativemarket.com/SoloPine/499272-Oleander-A-Blog-Shop-Theme?u=SoloPine


If someone clicks through your special link and purchases the theme, or any other items via Creative Market, you will be the lucky recipient of 10% of all that person's Creative Market purchases for 1 FULL YEAR
The more people you refer, the more cash in your pocket!

To learn more and to sign up, check out Creative Market's Partner Program


25. How do I change my theme's fonts?

To change the theme's default fonts (and other stylings), we highly recommend using the Easy Google Fonts plugin, which allows you to easily take advantage of the scores of type options provided by Google Fonts. It also provides many ways to further customize your text beyond just fonts.

To see all of the font options provided, check out Google's Font Directory.

To search for and install this plugin in WordPress:

In this example, we will be changing the Redwood theme's body font from the default 'Lora' (image below) to the 'Playfair Display' font.





Navigate to the Easy Google Fonts settings page by going to WordPress Dashboard > Settings > Google Fonts.


STEP 1. CREATE A CONTROL

We'll first need to create a "Control". 
This is essentially just a title that will help you recognize this particular font change later on. It's especially helpful if you end up make multiple changes. You can choose any control title you want!

We'll give our control a name of "Body Text" because we're going to be changing the font-family of our theme's body text. Enter your chosen control title in the field that says "Enter control name here". Click the button titled "Create Font Control" afterward. 


STEP 2: ADD YOUR CSS SELECTORS

A white section will appear below your newly-created control requesting you add CSS selectors. 
CSS selectors are the CSS code related to the text element you want to change. This will help the plugin target and apply your desired changes specifically to your chosen element and nothing else. 

Don't know CSS code? Don't worry! 
We've created a big list of each theme's text elements and their related CSS selectors for you.
All you need to do is click through to your theme's article below, find your text element you want to change in the list, and use the related CSS selectors noted.


TEXT ELEMENTS & SELECTORS BY THEME

Hemlock - CSS Selectors
Rosemary - CSS Selectors
Redwood - CSS Selectors
Florence - CSS Selectors
Oleander - CSS Selectors
Sprout & Spoon - CSS Selectors
Laurel - CSS Selectors
Alder - CSS Selectors
Hawthorn - CSS Selectors


For our example, I'm changing Redwood's body text font.
I've gone to the "Redwood - targeting text elements" article above and found the section in the list titled "General Body Text". 



The "General Body Text" section has 3 separate CSS selectors I need to use (underlined in red above).
Please don't insert the "[SPACER]" text into the plugin field as it is not a selector, simply a way of separating different bits of code.


Note: Unless there's a "[SPACER]" text separating the multiple bits of code you need, please enter the entire string into the plugin's field as 1 complete selector.

In the Easy Google Fonts plugin field titled "Add CSS Selectors", I will add the 3 selectors underlined in red above. For multiples like this, add each one at a time, hitting your "enter" or "return" keyboard key after each. 


 


When finished, click the button titled "Save Font Control". 


STEP 3: APPLY YOUR FONT & STYLINGS

Now that we've created our control and added our CSS selectors for that control, it's time to apply the new font! 

Navigate to WP Dashboard > Appearance > Customize > Typography > Theme Typography

The font controls you've created will be listed here. 

Click the control name to have its settings drop-down beneath. 



I want to change my Redwood theme's body text from "Lora" to instead be "Playfair Display". I click on the "Font Family" drop-down and type/search for the desired font name. Instantly, the new font I've chosen will apply itself to the theme preview on the right. 




You can use the other styling drop-down options to adjust font-sizing, font-weight, apply additional scripts/subsets (if your language's characters require it), and more. 

Don't forget to check out the other 2 tabs, "Appearance" and "Position", for additional customization options as well!




Save changes by clicking the "Publish" button at the top of the Customizer screen when finished to apply these new stylings to your site. 

Want to change even more text elements in the theme? Simply repeat the above steps for each different text element.


Let us know if you have any questions about this by opening up a new support ticket!


26. How do I set up my Author Box?

If the feature is enabled within the Customizer, an Author Box will appear at the bottom of your posts to give credit to whoever penned the article. Author Boxes feature a little biographic blurb about the author as well as an avatar image and optional social media icons.


Author Box Screenshot #1




To create the Author Box biographic text

 

Within WP Dashboard > Users > select the user you'd like to add the biographical text for. Scroll down the page until you see the text form for "Biographical Info". Enter your desired author text and save changes when finished.

    

Author Box Screenshot #2

To insert the Author Box social icons

Within WP Dasboard > Users > selct the user you'd like to add social icons for. Scroll down the page until you see the various social media network options WP offers. To have a social network's icon appear within the Author Box, enter the necessary usernames for each desired social network. Be sure to save changes when finished.

   

Author Box Screenshot #3

To change the author name

Within WP Dashboard > Users > Select the user you'd like to change the display name for.
A short way down the page is a section titled "Name". In the "Nickname" option's field, you can enter the name that you'd like to be displayed within your Author Box. Next, look to where it says "Display name publicly as" and choose your Nickname from the drop-down menu. Be sure to save changes when you're finished.

   




To insert the Author Box avatar image

You'll want to visit the Gravatar website and create an account. Here, you can upload the image that will be pulled in to represent you wherever the Gravatar avatar platform is used.

Please note! It is important that you sign up for your Gravatar account using the same email address associated with your WordPress user. This is how WP knows which image to pull in.

If you've followed all steps correctly though your avatar image is still not appearing in your Author Box, please navigate to Settings > Discussion > Avatar Display > and ensure that the box next to "Show Avatars" is checked.

  

Author Box Screenshot #4

27. Targeting text elements in Hawthorn - CSS Selectors

Please note: This article is specifically for the Hawthorn theme



This list of Hawthorn's text element CSS is in coordination with this article: How do I change my theme's fonts?

Below, we've noted nearly all of Hawthorn's text elements and how to target them with CSS in order to change their font-family. 

Should you have any questions regarding the below elements, want any clarification, or would like a hand adjusting the font of elements within Hawthorn, please don't hesitate to open up a new support ticket and let us know!




/* ----- GENERAL BODY TEXT ----- */
p   [SPACER]   .post-entry   [SPACER]   .post-entry p
   
   
/* ----- HEADER AREA ----- */
/* Navigation menu items */    #nav-wrapper .menu li a
/* Mobile menu items */    .slicknav_nav a 
/* Top-bar search text */    #top-search input 
/* 'Menu' mobile menu text */    .slicknav_menu .slicknav_menutxt 
  
  
/* ----- FEATURED AREA ----- */
/* Category */    .feat-content .cat a
/* Post title */    .feat-content h2 a
/* Excerpt */    .feat-content p
/* "Read More" button */    .feat-more
/* Prev/Next buttons */   .bx-wrapper .bx-controls-direction a
/* Pagination numbers */   .bx-wrapper .bx-pager
  
  
/* ----- POST HEADER ----- */
/* Post header title */    .post-header h2 a   [SPACER]   .post-header h1 
/* Post header category */    .post-header .cat a 
/* Post date */    .sp-date a

/* Grid item post title */   .grid-item .post-header h2 a
/* List item post title */   .list-item .post-header h2 a
 
 
/* ----- POST & PAGE CONTENT ----- */
/* Theme's body text */    .post-entry p 
/* List item's excerpt text */   .list-item .post-entry p
/* Post/Page blockquotes */   .post-entry blockquote p 
/* Post/Page numbered lists & bulletted lists */   .post-entry ul li   [SPACER]   .post-entry ol li 
 
/* Post/Page Body H-tags */
.post-entry h1 
.post-entry h2 
.post-entry h3 
.post-entry h4 
.post-entry h5 
.post-entry h6 
  
  
/* ----- INDEX SHORTCODE ROWS ----- */
/* Section title */    .post-entry .index-heading>span 
/* "View All" link */    .post-entry .index-heading a 
/* Index post titles */    .short-header h2 a   [SPACER]   .short-header h2 
/* Index post category */   .short-header .cat a 
  
  
/* ----- CONTACT FORM 7  ----- */
/* Name, email, subject, message, etc. labels */ .wpcf7 label 
/* Input fields */ .wpcf7 input   [SPACER]   .wpcf7 select   [SPACER]   .wpcf7 textarea 
/* Submit button */ .wpcf7 .wpcf7-submit 
  
  
/* ----- ARCHIVE PAGE ----- */
/* "Browsing category/tag/etc." text */ .archive-box span 
/* Category/tag/ etc. title */ .archive-box h1 
  
  
/* ----- POST & PAGE FOOTER AREA ----- */ 
/* "By" */   .meta-author .by
/* Author name */   .meta-author a
/* Comment counter number */   .meta-comments a .by
/* "Comments" word */   .meta-comments a
/* Post tags */   .post-tags a 
/* Previous Post / Next Post */    .pagination-text 
/* Previous Post / Next Post post titles */   .pagination-item h3 a 
  
  
/* ----- YOU MIGHT ALSO LIKE ----- */
/* Section's title */   .post-related .block-heading
/* Post titles */   .item-related h4 a
/* Post date */    .item-related .sp-date 
  
  
/* ----- POST COMMENTS ----- */
/* Section's title */   .post-comments .block-heading
/* "Reply" button */   .post-comments span.reply a 
/* "Leave a Reply" Text */   #respond  h3 
/* Name, email, website, etc. */   #respond .comment-form-author input   [SPACER]   #respond .comment-form-email input   [SPACER]   #respond .comment-form-url input 
/* Post comment button */   #respond #submit 
/* Commentator's name */   .thecomment .comment-text h6.author   [SPACER]   .thecomment .comment-text h6.author a 
/* Comment's date & time */   .thecomment .comment-text span.date 
/* Comment's text */   .comment-text p 
  
  
/* ----- HOMEPAGE POST PAGINATION ----- */
/* Homepage Older Posts/Newer Posts */   .hawthorn-pagination a
  
/* ----- WIDGETS ----- */
/* Sidebar widget titles */   .widget h4.widget-title 

/* Solo Pine's Post Widget - Small thumbnail - post titles */ .side-pop.list .side-pop-content h4 a
/* Solo Pine's Post Widget - Small thumbnail - post date */ .side-pop.list .side-pop-content span.sp-date 

/* Solo Pine's Post Widget - Large thumbnail - post titles */   .side-pop.overlay .side-pop-content h4 a
/* Solo Pine's Post Widget - Large thumbnail - post date */   .side-pop.overlay .side-pop-content span.sp-date

/* WP's recent posts widget items */ .widget_recent_entries ul li a 
/* WP's archive widget items */ .widget_archive ul li a 
/* WP's category widget items */ .widget_categories ul li a 

/* Solo Pine's About widget text */ .about-widget p 

/* Newsletter widget headline */ .subscribe-box h4 
/* Newsletter widget text */ .subscribe-box p 
/* Newsletter "Your email address" text */ .home-widget .subscribe-box input 
/* Newsletter widget "Subscribe" button */ .subscribe-box input[type=submit] 

/* Solo Pine's Promo widget title */ .promo-overlay  h4 
  
  
/* ----- FOOTER AREA ----- */
/* Footer Instagram text */   #ig-footer h4
/* Footer widget titles */   .footer-widgets .widget-title
/* Footer social text */   .footer-social a
/* "Made with <3" text */    .footer-text p.madewidth
/* Footer copyright text */ .footer-text p


/* ----- WOOCOMMERCE ----- */
/* WooCommerce buttons */     .woocommerce #respond input#submit   [SPACER]   .woocommerce a.button   [SPACER]   .woocommerce button.button   [SPACER]   .woocommerce input.button 
/* Shop item results count */     .woocommerce .woocommerce-result-count 
/* "Sort by" drop-down */     .woocommerce .woocommerce-ordering select 
/* Product titles */     .woocommerce ul.products li.product h3 
/* Shop item results page - price */     .woocommerce ul.products li.product .price 
/* Item product page - item title */     .woocommerce div.product .product_title 
/* Item product page text */ .woocommerce div.product 

28. Show post feed on homepage


When you view your homepage, are your published posts missing? If so, don't worry! It's likely that your homepage is set to display a static page rather than your feed. 

Navigate to Settings > Reading > Your homepage displays

Make sure that the option "Your latest posts" is selected. Save changes if necessary. 

Still not seeing anything? Make sure your posts are published and not just drafts!

29. Add Category Index to the Homepage or Blog in Hawthorn

Hawthorn offers a Category Index Shortcode which you can use to display beautiful rows of grid items highlighting your latest posts or even a particular category of posts. 

The shortcode is generally used to add the category index to a post or static page by copying and pasting its shortcode into the text editor box. 

To learn how to create a Category Index and insert it into a post or page's body, you can follow the instructions outlined in this article: Hawthorn's Category Index Shortcode.


Alternatively, if you wish to display a Category Index on your homepage or blog page which contains your published latest post feed, this is also possible by inserting a bit of code into a theme's "index.php" file ( the theme file related to your post feed page). 

We'll go through the process below.

 



First, create your desired Category Index Shortcode (for instructions on how to do this, please reference the tutorial article linked above). This may include a title, which category in particular you'd wish to display, the number of grid posts for the row, etc. 

For example, it may look like this:

[hawthorn_index title="Our latest adventures" cat="travels" amount="3" cols="3"]


Next, navigate to WP Dashboard > Appearance > Editor > and open up the theme file titled "index.php". 

On Line 11, you'll see this line of code:

<div id="main" <?php if(get_theme_mod('hawthorn_sidebar_homepage') == true) : ?>class="fullwidth"<?php endif; ?>>


On the blank line directly BELOW this line of code, you can copy and paste the following code:

<div class="post-entry">
    <?php echo do_shortcode('YOUR-CATEGORY-INDEX-SHORTCODE-HERE'); ?>
</div>


Please remember to replace the dummy YOUR-CATEGORY-INDEX-SHORTCODE-HERE on the second line of that code with your own category index shortcode. When finished, using our example above, it will look similar to this:


<div class="post-entry">
    <?php echo do_shortcode('[hawthorn_index title="Our latest adventures" cat="travel" amount="3" cols="3"]'); ?>
</div>




This will have your Index Shortcode display above your post feed. 




Note: If you would like to add more than 1 category index shortcode stacked upon each other, you can use the following template. Just be sure to add a separate category index shortcode onto each of the "php echo do_shortcode" lines. 

<div class="post-entry">
    <?php echo do_shortcode('[hawthorn_index title="Featured Desserts for Autumn" cat="desserts" amount="3" cols="3" display_date="no" display_title="yes"]'); ?>
    <?php echo do_shortcode('[hawthorn_index title="Featured Vegetarian Recipes" cat="vegetarian" amount="4" cols="4" display_date="no" display_title="yes"]'); ?>
</div>


Save changes to the file when finished. 


30. Default fonts used in each theme

All Solo Pine themes use Google Fonts as their main default fonts. Below, we've listed what fonts are used in each theme for your reference. If there's an element you can't find noted, please let us know by opening a new support ticket!

Interested in what fonts are used in your theme's demo logo image?
Check out: Fonts used in demo logo images



HAWTHORN

Barlow Semi Condensed: 

Barlow: 

Serif:

Arial:



ALDER

Overpass:

Amiri:

Montserrat:

Lora:



LAUREL

Karla:

Lora:


Arial:



SPROUT & SPOON

Source Sans Pro: 


Crimson Text: 



REDWOOD

Montserrat:

Lora:

Autograf: 

Free font used to make the "Solo Pine" signature in the "About Me" widget (https://www.dafont.com/autograf.font).



OLEANDER

Open Sans:

Playfair Display:

Crimson Text:

Autograf:

Free font used to make the "Solo Pine" signature in the "About Me" widget (https://www.dafont.com/autograf.font).


ROSEMARY

Lato:

Playfair Display:

Arial:

Georgia:



FLORENCE

Open Sans:

Oswald:

Crimson Text:

Arial:

Georgia:


HEMLOCK

Open Sans:

Crimson Text:

Lato:

Arial:

Georgia:


CASSIA

Playfair Display:

Droid Serif:

Arial:

Tangerine:



31. Google Search Console: Mobile-Friendly Test Recommendations



If you run your site through the Google Search Console's "Mobile Friendly Test", you may receive a result of "Page is not mobile friendly". Don't stress! While GSC's scan can be really helpful, it's also very literal and raises red flags which can be misleading. 

All Solo Pine themes are guaranteed 100% mobile responsive (unless you've checked the "Disable mobile responsive" option in the Customizer settings). 

Two of the most common errors this GSC "Mobile Friendly Test" throws are:


What's really going on?

If you visit your site via a mobile phone, chances are that you won't experience any issues clicking various items and your content isn't extending out past the edge of your screen. So why is the scan noting these "issues" and saying your site isn't mobile friendly?

After running the "Mobile Friendly Test", look to the right side of the screen where a preview of your site is shown. Does it look anything at all like your site when you actually visit it via mobile? Probably not. It's likely that the test preview is displaying a basic HTML version of your site with zero stylings applied. That's where the error messages stem from. 

This indicates that your site didn't load completely for the test and this is why the error messages have appeared. Essentially, it boils down to a slow-loading site.

 

How to help your site load more quickly

We recommend the following popular plugins to give your site a helping hand in loading faster and, ultimately, appease the Google Search Console's "Mobile-Friendly Test": 


1 ) W3 Total Cache: With any WordPress site, whether it be one of our themes or any other theme, it's always a great idea to use a cache plugin. Cache plugins help improve load speeds and reduce the strain on your server which is a win-win for both you and your visitors.

Settings: After installing and activating "W3 Total Cache", navigate to WP Dashboard > Performance > General Settings. Make sure that the options "Page Cache" and "Browser Cache" are enabled. Save changes. 

Please note: If you already have a cache plugin enabled, you can skip this "W3 Total Cache" suggestion. It's not recommended to have multiple cache plugins running at once. 


2 ) Autoptimize: When you visit any site, there's a whole lot going on in the background you don't see. Each time a page is loaded, lots of script and code are being loaded to build, style, and "give life" to the web page you're about to see. Autoptimize helps aggregate, cache, and minify these scripts so that your site's pages load more quickly and smoothly. 

Settings: After installing and activating the "Autoptimize" plugin, navigate to WP Dashboard > Settings > Autoptimize. Enable the "Optimize JavaScript Code?" and the "Optimize CSS Code?". Save changes and empty the cache. 

Run your site through the Google Search Console "Mobile Friendly Test": https://search.google.com/test/mobile-friendly and see what it now says. Still having issues? Don't hesitate to let us know via a new support ticket!

32. Change how many posts display per page

SET ALL POST COUNTS AT ONCE - DEFAULT WP SETTING

You can manually set the maximum number of blog posts to appear on all of your post pages (like the blog feed, archive pages, etc.) by going to:

WordPress Dashboard > Settings > Reading > choose desired number next to the "Blog pages show at most" option > Save Changes

This will set the number of posts that appear on all pages in one big blanket setting.





SET DIFFERENT POST COUNTS FOR EACH TYPE OF POST PAGE

Sometimes, the standard WordPress post count setting (noted above) doesn't quite go far enough. What if you don't want one post count number applied to every page on your site? 

For example, what if you want to have 5 posts display on your homepage/blog feed and then 8 posts display on your category pages? 

Or what if you're using a layout such as "1st post full, then grid"? Your homepage may be displaying 5 posts but then when you click the "Older Posts" button, these paginated pages will have an odd gap in the grid layout. It would be best to then use an even number on these pages. 




Fear not! There's a simple solution that allows you to have complete control over how many posts appear on any page of your site: the "Custom Post Limits" plugin.

Install and activate the Custom Post Limits plugin on your WordPress. 

Then, navigate to WP Dashboard > Settings > Post Limits to change the settings. 

There are a lot of various post page options to change here, but you don't need to set a number for each one. 

Note: Consider using the standard WordPress post count setting (noted at the top of this article) to set a general post count that will apply to all pages. Then, using the Custom Post Limits plugin customize just those post feed pages which you want a different post count for. 

Example: 

Let's say I am using the "1st post full, then grid" layout option on my homepage. I would like to have 5 posts display on my homepage so that there is one big post followed by 4 grid post beneath it. However, when I click the "Older Posts" button to go to "Page 2" of my blog feed, there are now 5 grid items. This looks a bit funky! 

To fix this, I would go to WP Dashboard > Settings > Post Limit (remember to install and activate the "Custom Post Limits" plugin to see this option!). 

I'd scroll down to where I see the option "Front Page Limit". Because I want 5 posts to display on my homepage, I'll set this to be "5". 

Beneath, there is the sub-option "---paged (non first page). This is to control the number of posts shown on "paged" pages of my homepage, or, the pages shown when I click the "Older Posts" button. I don't want 5 grid items shown on these pages; I want an even number so the grid layout isn't un-even. So I'll choose to show "6" posts on these pages. 


Be sure to save changes at the bottom of the screen when finished. 

And voila! 


Use this same method to change the post counts on any other pages you may want to customize-- category pages, tag pages, search pages, and more!

Have any questions about this? Don't hesitate to open up a new support ticket and let us know! We'd be more than happy to help. 

33. How to configure "Smash Balloon Social Photo Feed" plugin

In this guide, we'll go over how to setup and configure the "Smash Balloon Social Photo Feed" plugin. 

If you find yourself with any questions at all during the process, please don't hesitate to reach out! We're happy to help. 


STEP 1: INSTALLING & CONFIGURING THE PLUGIN


1. First, install the "Smash Balloon Social Photo Feed" plugin (https://wordpress.org/plugins/instagram-feed/). 

2. Navigate to WP Dashboard > Instagram Feed.

3. Click on the big blue "Connect an Instagram Account" button. This will connect with whatever Instagram account you are currently logged into. 




STEP 2: SETTING UP THE WIDGETS


A ) TO INSERT 3x3 INSTAGRAM GRID INTO WIDGET AREA


1. Navigate to WP Dashboard > Appearance > Widgets

2. Drag a standard "Custom HTML" widget into your Sidebar or Footer widget area where you want the grid to appear. 

3. Copy & paste in this shortcode:

[instagram-feed num=9 cols=3 showheader=false showfollow=false showbutton=false disablemobile=true]

Save changes.


 

B ) TO INSERT ROW OF INSTAGRAM IMAGES IN HEADER/FOOTER AREA


Many of our themes have an "Instagram Footer" option where 6-12 of your most recent Instagram images shows in a single row in the "Instagram Footer" widget area. For our Alder theme, there is also an "Instagram Header" option. To recreate this widget, you can:

1. Navigate to WP Dashboard > Appearance > Widgets

2. Drag a standard "Custom HTML" widget into your "Instagram Footer" widget area. 

3. Copy & paste in the following shortcode:

[instagram-feed num=9 cols=9 imagepadding=0 showheader=false showbutton=false showfollow=false disablemobile=true]


In the above shortcode, do you see the "num=9" and the "cols=9" bits? This determines how many total images will show and in how many columns they'll show. 

If you want a row of 11, for example, set it to be "num=11" and "cols=11". This will show 11 images in 11 columns (11 images in a single row).  



STEP 3: ADDING THE STYLING CODE

Lastly, we'll need to add some CSS styling code to ensure the feed spans 100% width of your site. 

Navigate to WP Dashboard > Appearance > Customize > Custom CSS/Additional CSS box > and add the code below related to your particular Solo Pine theme:

 

 

// HAWTHORN:

We have added the custom stylings to Hawthorn's latest theme update, version 1.3.1. (https://themeforest.net/item/hawthorn-a-wordpress-blog-shop-theme/21361268). 

For instructions on how to update your theme, you can check out: https://solopine.ticksy.com//article/2795/



// ALDER

/*SMASH BALLOON IG FEED STYLINGS*/
#top-instagram .widget_custom_html, #bottom-instagram .widget_custom_html{
text-align:center;
margin-bottom:0;
}
#top-instagram .widget_custom_html .widget-title, #bottom-instagram .widget_custom_html .widget-title{
display:none;
}
 #top-instagram .widget_custom_html, #bottom-instagram .widget_custom_html{
grid-column: 1 / -1;
margin: 0 calc(50% - 50vw);
}
#sb_instagram.sbi_col_11 #sbi_images .sbi_item {
width:9.090909090909091%;
}
@media only screen and (max-width: 767px) {
#top-instagram #sbi_images div:nth-child(11), #top-instagram #sbi_images div:nth-child(10), #top-instagram #sbi_images div:nth-child(9), 
#top-instagram #sbi_images div:nth-child(8), #top-instagram #sbi_images div:nth-child(7), 
#top-instagram #sbi_images div:nth-child(6), #top-instagram #sbi_images div:nth-child(5),
#bottom-instagram #sbi_images div:nth-child(11), #bottom-instagram #sbi_images div:nth-child(10), #bottom-instagram #sbi_images div:nth-child(9), 
#bottom-instagram #sbi_images div:nth-child(8), #bottom-instagram #sbi_images div:nth-child(7), 
#bottom-instagram #sbi_images div:nth-child(6), #bottom-instagram #sbi_images div:nth-child(5) {
display:none !important;
}
#top-instagram #sbi_images .sbi_item, #bottom-instagram #sbi_images .sbi_item {
width:25% !important;
}
}



// LAUREL:

/*SMASH BALLOON IG FEED STYLINGS*/
#ig-footer .widget_custom_html h4 {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
background: #fff;
padding: 20px 22px;
z-index: 999;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 12px;
}
@media only screen and (max-width: 767px) {
#ig-footer #sbi_images div:nth-child(11), #ig-footer #sbi_images div:nth-child(10), #ig-footer #sbi_images div:nth-child(9), 
#ig-footer #sbi_images div:nth-child(8), #ig-footer #sbi_images div:nth-child(7), 
#ig-footer #sbi_images div:nth-child(6), #ig-footer #sbi_images div:nth-child(5) {
display:none !important;
}
#ig-footer #sbi_images .sbi_item {
width:25% !important;
}
}



// SPROUT & SPOON:

We have added the custom stylings to Sprout & Spoon's latest theme update, version 1.5. (https://themeforest.net/item/sprout-spoon-a-wordpress-theme-for-food-bloggers/15659257). 

For instructions on how to update your theme, you can check out: https://solopine.ticksy.com//article/2795/




// REDWOOD:

We have added the custom stylings to Redwood's latest theme update, version 1.7.2 (https://themeforest.net/item/redwood-a-responsive-wordpress-blog-theme/11811123). 

For instructions on how to update your theme, you can check out: https://solopine.ticksy.com//article/2795/


 

// ROSEMARY


We have added the custom stylings to Rosemary's latest theme update, version 1.6.2 (https://themeforest.net/item/rosemary-a-responsive-wordpress-blog-theme/10695119). 

For instructions on how to update your theme, you can check out: https://solopine.ticksy.com//article/2795/



// FLORENCE:

/*SMASH BALLOON IG FEED MOBILE STYLINGS*/
@media only screen and (max-width: 767px) {
#footer-instagram #sbi_images div:nth-child(11), #footer-instagram #sbi_images div:nth-child(10), #footer-instagram #sbi_images div:nth-child(9), 
#footer-instagram #sbi_images div:nth-child(8), #footer-instagram #sbi_images div:nth-child(7), 
#footer-instagram #sbi_images div:nth-child(6), #footer-instagram #sbi_images div:nth-child(5) {
display:none !important;
}
#footer-instagram #sbi_images .sbi_item {
width:25% !important;
}
}


// HEMLOCK:

We have added the custom stylings to Hemlock's latest theme update, version 1.8.2 (https://themeforest.net/item/hemlock-a-responsive-wordpress-blog-theme/8253073). 

For instructions on how to update your theme, you can check out: https://solopine.ticksy.com//article/2795/


//OLEANDER:

/*SMASH BALLOON IG FEED STYLINGS*/
#instagram-footer .widget_custom_html {
text-align:center;
margin-bottom:0;
}
#instagram-footer .widget_custom_html .widget-title {
text-transform: uppercase;
letter-spacing: 1px;
font-size: 14px;
margin-bottom:22px;
border:none;
background:none;
font-weight:400;
padding:0;
color:#000;
}
#instagram-footer .widget_custom_html .widget-title:after {
display:none;
}
#instagram-footer .widget_custom_html {
grid-column: 1 / -1;
margin: 0 calc(50% - 50vw);
}
@media only screen and (min-width: 768px) and (max-width: 960px) {
#instagram-footer .widget_custom_html {
max-width:100%;
margin:0;    }
}
@media only screen and (max-width: 767px) {
#instagram-footer #sbi_images div:nth-child(11), #instagram-footer #sbi_images div:nth-child(10), #instagram-footer #sbi_images div:nth-child(9), #instagram-footer #sbi_images div:nth-child(8), #instagram-footer #sbi_images div:nth-child(7), #instagram-footer #sbi_images div:nth-child(6), #instagram-footer #sbi_images div:nth-child(5) {
display:none !important;
}
#instagram-footer #sbi_images .sbi_item {
width:25% !important;
}
}





For more options on how to customize the Instagram feed styling, you can navigate to WP Dashboard > Instagram Feed > "3. Display Your Feed" tab > for a list of parameters you can add to the basic [instagram_feed] shortcode. 

34. Add "Read More" links to Hawthorn's posts

Please note: This article is specifically for the Hawthorn theme



By default, Hawthorn doesn't include post "Read More" buttons or links on the blog or archive pages. If you would like to add these to the standard, grid, or list layouts, please read on for instructions. 

Note: We recommend updating your WordPress to one of the more recent updates as they introduced line numbers within the file editor. This will make following the below instructions much more easy. If you aren't able to update your WordPress for whatever reason, you can always use a code editor plugin such as "WPide" (https://wordpress.org/plugins/wpide). 


Add a function to your "functions.php" file

First, navigate to WP Dashboard > Appearance > Editor > and open up "functions.php". 

Scroll to the very bottom of the file and paste in this code:


//////////////////////////////////////////////////////////////////
// PREVENT SCROLL ON READ MORE LINK
//////////////////////////////////////////////////////////////////
function remove_more_link_scroll( $link ) {
$link = preg_replace( '|#more-[0-9]+|', '', $link );
return $link;
}
add_filter( 'the_content_more_link', 'remove_more_link_scroll' );


Save changes when finished. 

Then, to apply the "Read More" button, look below for the post layout type you want to add it to and follow its steps.


Add "Read More" button to Grid Layout items

Navigate to WP Dashboard > Appearance > Editor > and open the file titled "content-grid.php". 

On blank line 24, add in this code:

<div class="cust-more"><a href="<?php echo get_permalink(); ?>" class="feat-more"><?php esc_html_e( 'Read More', 'hawthorn' ); ?></a></div>

If you'd like to change the text from "Read More" to something else, you're welcome to do so at this time. Simply look toward the end of the code where you'll see 'Read More'. Change the text to whatever you wish. 

Save changes to the file when finished. 

Lastly, navigate to WP Dashboard > Appearance > Customize > Additional CSS and add:

.cust-more {
text-align: center;
padding-bottom: 20px;
}
.cust-more .feat-more:hover {
background-color: #fff;
border: 1px solid #000;
color: #000;
}

Save changes.

The "Read More" button on your Grid items will resemble the one from Hawthorn's Featured Area Slider. If you wish to change the appearance of the button, such as its colors, feel free to open up a new support ticket and let us know!



Add "Read More" link to List Layout items

Please note: Due to limited vertical space with the List items, this tutorial will add a "Read More..." link to the end of your List items' excerpt instead of adding a big button. 

Navigate to WP Dashboard > Appearance > Editor > and open the file titled "content-list.php". 

On line 29, you'll see this line of code:

<p><?php echo hawthorn_string_limit_words(get_the_excerpt(), 18); ?>…</p>

Replace that line of code with the following code instead:

<p><?php echo hawthorn_string_limit_words(get_the_excerpt(), 18); ?><span class="cust-more"><a href="<?php echo get_permalink(); ?>" class="list-more"><?php esc_html_e( 'Read More…', 'hawthorn' ); ?></a></span></p>

If you'd like to change the text from "Read More" to something else, you're welcome to do so at this time. Simply look toward the end of the code where you'll see 'Read More'. Change the text to whatever you wish. 

Save changes to file when finished. 

Lastly, navigate to WP Dashboard > Appearance > Customize > Additional CSS > and insert the following code:

a.list-more {
margin-left: 8px;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1px;
display: inline-block;
font-weight: 500;
}

If you'd like to change the colors or styling of the "Read More" link, feel free to open up a new support ticket and let us know!



Add "Read More" link to Alternating List Layout items

Please note: Due to limited vertical space with the List items, this tutorial will add a "Read More..." link to the end of your List items' excerpt instead of adding a big button. 

Navigate to WP Dashboard > Appearance > Editor > and open the file titled "content-list-alt.php". 

On line 21, you'll see this line of code:

<p><?php echo hawthorn_string_limit_words(get_the_excerpt(), 18); >…</p>

Replace that line of code with the following code instead:

<p><?php echo hawthorn_string_limit_words(get_the_excerpt(), 18); ?><span class="cust-more"><a href="<?php echo get_permalink(); ?>" class="list-more"><?php esc_html_e( 'Read More…', 'hawthorn' ); ?></a></span></p>

If you'd like to change the text from "Read More" to something else, you're welcome to do so at this time. Simply look toward the end of the code where you'll see 'Read More'. Change the text to whatever you wish. 

Save changes to file when finished. 

Lastly, navigate to WP Dashboard > Appearance > Customize > Additional CSS > and insert the following code:

a.list-more {
margin-left: 8px;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1px;
display: inline-block;
font-weight: 500;
}

If you'd like to change the colors or styling of the "Read More" link, feel free to open up a new support ticket and let us know!



Add "Read More" button to Standard/Full posts


Navigate to WP Dashboard > Appearance > Editor > and open the file titled "content.php". 

On blank line 119, add in this code:

<div class="cust-more"><a href="<?php echo get_permalink(); ?>" class="feat-more"><?php esc_html_e( 'Read More', 'hawthorn' ); ?></a></div>

If you'd like to change the text from "Read More" to something else, you're welcome to do so at this time. Simply look toward the end of the code where you'll see 'Read More'. Change the text to whatever you wish. 

Save changes to the file when finished. 

Lastly, navigate to WP Dashboard > Appearance > Customize > Additional CSS and add:

.cust-more .feat-more:hover {
background-color: #fff;
border: 1px solid #000;
color: #000;
text-decoration: none;
}

Save changes.

The "Read More" button on your Grid items will resemble the one from Hawthorn's Featured Area Slider. If you wish to change the appearance of the button, such as its colors, feel free to open up a new support ticket and let us know!



35. Translate your theme using Loco Translate

By default, all of our themes come in the English language. Though it's absolutely possible to translate this to another language, of course! For this, we recommend using the free plugin called "Loco Translate" (https://wordpress.org/plugins/loco-translate/).




Steps to translating your theme with Loco Translate:

1. First, navigate to WP Dashboard > Settings > General > and change your "Site Language" to the language you'll be translating your theme into. 

2. Install & activate the "Loco Translate" plugin

3. Navigate to WP Dashboard > Loco Translate. At the top will be a heading that says "Active theme". Beneath, you should see your Solo Pine theme name. Click on the hyperlinked theme name. 

4. On the next screen, below the title of your theme, you should see 2 links/buttons. If the second says "Create template", click this link first. Next, click the blue button titled "Create template".

If your link did not say "Create template" but instead said "Edit template", move onto the next step.

5. Click the little "New Language" button. Next, select the language you want to translate the theme into from the drop-down menu titled "WordPress Language". Below, where it says "Choose a location", we recommend leaving it on the default first option. When finished, click the "Start translating" button. 

6. Here, you'll be able to select each bit of English text in the theme and create a translation for it. 

There are 2 important sections on this screen, the top-most box titled "Source Text" and the bottom box titled "[Your language] Translation". 

All of the theme's hard-coded English text "strings" are noted in the first "Source Text" box. To begin, click on one of the text strings you'd like to translate. Then, once you've highlighted an English text string, click down into the box titled "[Your language] Translation". Here, you can type in the translation for that text string. 

When finished, the translation should appear to the right of the English text string in that top "Source Text" box.

 


Continue this step for each of the English text strings in the "Source Text" box. 

Please note: Not all of the English text strings really need to be translated nor should be translated. For example, some are bits of text your site visitors will never see as it's on your WP Dashboard area. Or, it may be strange-looking bits of code that look like this: %1$s at %2$s . You can ignore these. 

When finished, click the blue "Save" button. 


RTL Languages

To change the theme's text to display RTL (for languages such as Hebrew), ensure that your WordPress language has been set to your desired RTL language. To do so, navigate to WP Dashboard > Settings > Site Language > and change the language here. Save changes. 

If you notice any text elements which are still displaying LTR, feel free to contact us via support ticket. We'd be happy to help!