Contents

1. What is a retina logo image?

2. Add "Read More" link to Grid & List Layout posts in Florence

3. Hawthorn's Category Index Shortcode

4. Moving the top bar below the logo image in Rosemary

5. Installation & Setup: Getting Started with Rosemary

6. Targeting text elements in Hemlock - CSS Selectors

7. How do I add social media icons to Florence?

8. Laurel's Category Index Shortcode

9. How to add featured posts to Hickory's featured area

10. Changing font size in Alder - CSS Code

11. How do I add the "Continue Reading" button to posts in Rosemary?

12. Add LinkedIn social share icon to Oleander

13. How to import Hawthorn's demo content

14. Installation & Setup: Getting Started with Hawthorn

15. How do I add social media icons to Alder?

16. How do I create a Contact Me page?

17. How do I add social media icons to Hemlock?

18. How to customize Rosemary's Featured Area Slider

19. Have Redwood's full-width grid layout display in 3 columns

20. 1st post displays full, followed by grid layout in Hemlock

21. Fonts used in demo logo images

22. Add an email icon to Oleander

23. Changing font size in Rosemary - Custom CSS

24. How do I add social media icons to Redwood?

25. Have Rosemary's full-width grid layout display in 3 columns

26. More Sitka guide articles coming soon!

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

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

29. How do I add social media icons to Oleander?

30. Add an email icon to Florence

31. Adding a newsletter sign-up form to Redwood

32. Changing font size in Laurel - CSS Code

33. Installation & Setup: Getting Started with Oleander

34. Changing font family in Sprout & Spoon - CSS Selectors

35. Targeting text elements in Redwood - CSS Selectors

36. Add "Read More" link to Grid or List Layout posts in Redwood

37. Changing font size in Sprout & Spoon - CSS Code

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

39. Add "Read More" link to Grid Layout and List Layout posts in Rosemary

40. How do I add the "Read More" button to posts in Laurel?

41. Add Category Index to the Homepage or Blog in Alder

42. Targeting text elements in Redwood: Change font size

43. Redwood's Category Index Shortcode

44. Make Redwood's slider full-width

45. Add a timer to Laurel's slider

46. How do I add the "Continue Reading" button to posts in Oleander?

47. Add a newsletter sign-up form widget to Rosemary

48. Automatically set all of Oleander's post pages to be full-width

49. How do I set up Hemlock's Instagram footer widget?

50. Default fonts used in each theme

51. Setting up Laurel's Logo & Header Options

52. How to add a comment counter to Hemlock

53. Why does my full-width grid layout suddenly look odd in Hemlock?

54. Have Oleander's slider display a single static image

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

56. Setting up your webshop

57. Have Laurel's slider display 1 static image

58. How to add a timer to Hemlock's featured area slider

59. Add hyperlink text menu to footer

60. How do I add social media icons to Laurel?

61. 1st post displays full, followed by grid layout in Florence

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

63. How to widgetize a page in Hickory

64. How do I auto-apply the "Continue Reading..." link on all posts in Hemlock?

65. Make Florence's logo area full-width

66. How do I get the "Continue Reading" / "Read More" link in my posts?

67. Add Category Index to the Homepage or Blog in Sprout & Spoon

68. Adding post pagination to Rosemary & Redwood

69. Installation & Setup: Getting Started with Hemlock

70. Rosemary's Category Index Shortcode

71. Move the post header above featured image in Florence

72. Targeting text elements in Oleander: Change font size

73. Add LinkedIn social share button to Rosemary

74. Why are there gaps in between images in Florence's Instagram footer?

75. Add Promo Boxes to Alder

76. Have your homepage display a specific post category

77. Add a simple text menu to Redwood's footer

78. How to setup the "Smash Balloon Instagram Feed" plugin in Redwood

79. Have Oleander's full-width grid layout display in 3 columns

80. Moving the top bar below the logo image in Florence

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

82. How do I set up my Author Box?

83. Make Oleander's Featured Area Slider as wide as the content container

84. How do I add social media icons to Sprout & Spoon?

85. Sprout & Spoon's Category Index Shortcode

86. Disqus plugin changes Hemlock's comment icon to text

87. Add an image to your About Me widget

88. How do I add the "Continue Reading" link to posts in Sprout & Spoon?

89. Targeting text elements in Rosemary - CSS Selectors

90. Change font size in Helmock

91. Setting up Hemlock's newsletter widget

92. How to find your purchase code

93. Add "Read More" link to Grid Layout posts in Hemlock

94. Add more Promo Boxes

95. Disable Laurel's "Show Menu" mobile menu on larger screen sizes

96. Use Redwood's Slider as an Image Gallery

97. Make Oleander's promo boxes square

98. How do I add the "Continue Reading" button to posts in Oleander?

99. Sitka: Updating Advanced Custom Fields PRO Plugin

100. How to add a little logo image to menu

101. How to make Hemlock's featured area slider display 1 large image

102. Hide Featured Area on subsequent (paginated) homepage/blog pages

103. Changing font family in Alder - CSS Selectors

104. How do I add a social media icon to Cassia that is not included in the theme?

105. Add a timer to Oleander's slider

106. Add social media icon bar to Rosemary's footer

107. Change how many posts display per page

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

109. Moving the top bar below the logo image in Hemlock

110. Turn Oleander's featured area slider into an image gallery slider

111. Add simple hyperlink text menu to Oleander's footer

112. Add simple hyperlink text menu to Laurel's Footer

113. Why is my site title appearing twice in my browser tab?

114. Make Redwood's logo area full-width

115. Have your Instagram Footer area display in 2 rows on mobile

116. Beginning Basics: Getting Started with Sitka

117. CASSIA & HICKORY ARE RETIRING

118. Changing font size in Hawthorn - CSS Code

119. How do I add a Featured Image?

120. Adding a category description to your category pages

121. Add Category Index to the Homepage or Blog in Laurel

122. Changing font family in Laurel - CSS Selectors

123. Targeting text elements in Rosemary

124. Adding a newsletter sign-up form to Oleander

125. Installation & Setup: Getting Started with Laurel

126. Add an email icon to Hemlock

127. Have Promo Boxes open in a new browser tab

128. Installation & Setup: Getting Started with Florence

129. How to setup Hickory's widgetized homepage

130. Instagram feed isn't updating on the site

131. Auto-apply the Continue Reading button in all posts in Florence

132. How to add a comment counter to Florence

133. Show post feed on homepage

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

135. How do I setup / troubleshoot my Featured Area slider in Hemlock?

136. Add a "Continue Reading" button to Hawthorn

137. Why are my posts' Featured Images missing from my RSS feed?

138. Make Rosemary's logo area full-width

139. Targeting text elements in Florence - CSS Selectors

140. Add text menu to Rosemary's footer

141. How do I import the demo content?

142. Changing Font Family in Hawthorn - CSS Code

143. Alder's Category Index Shortcode

144. Add Promo Boxes to Hemlock

145. Setting up Hawthorn's newsletter widget

146. How to create a static homepage & separate blog page

147. Add a "Read More" link to your "About Me" widget

148. Adjust Redwood's featured area slider timer

149. How do I set up my navigation menu?

150. How to setup Sprout & Spoon's newsletter widget

151. How to setup Alder's newsletter widget

152. Changing font size in Florence - CSS Code

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

154. How do I add the "Continue Reading" button to posts in Alder?

155. Add text menu to Redwood's footer

156. Installation & Setup: Getting Started with Redwood

157. Translate your theme using Loco Translate

158. Make Laurel's Featured Area Slider as wide as the content container

159. How to setup Laurel's newsletter widget

160. Installation & Setup: Getting Started with Alder

161. Google Search Console: Mobile-Friendly Test Recommendations

162. Adjust Grid layout's summary length in Hemlock

163. Targeting text elements in Oleander: CSS Selectors

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

165. Theme Support Coverage FAQs

166. Adding an email icon to Alder

167. Relocating Hemlock's slider to a static homepage

168. Setting up the newsletter widget in Florence

169. Add boxed background behind Redwood's Featured Slider's text overlay

170. How do I center my Read More button in Cassia?

171. Add an email icon to Redwood

172. How do I add social media icons to Rosemary?

173. How do I add the "Continue Reading" button to posts in Redwood?

174. Installation & Setup: Getting Started with Sprout & Spoon

175. Make Hemlock's logo area full-width

176. Creating additional WordPress Users

177. Moving the top bar below the logo image in Redwood

178. Make Oleander's logo area full-width

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

180. Targeting text elements in Hawthorn - CSS Selectors

181. How to make your Gallery Post rotate automatically

182. How to update your theme

1. What is a retina logo image?

Please note: This article is specifically for the Hemlock and Florence themes.



What is a retina image?

Some newer devices come with "Retina Display" which , thanks to its high pixel density screen, will make content look sharper and more clear. To ensure your logo has a retina-ready version, you can add one to your theme.


How do I add a retina logo image to my theme?

A retina logo image is the same as the normal logo image, though twice the size. For example, if one's regular logo image is 100x100 pixels in size, the retina logo image would need to be 200x200 pixels in size.

How you name the retina image is very important. It must be named the exact same as the regular logo image, though with @2x added onto the end of the name.

So, if the regular logo image was named "logo.png", the retina logo image would need to be named "logo@2x. png"

Additionally, you'll want to ensure your regular logo image and your retina logo image are within the same WordPress Media Library folder. You can achieve this most easily by uploading the two image files at the same time to your Media Library. 

You can upload your retina logo image by navigating to Appearance > Customize > Logo & Header Settings


Retina Logo Screenshot



Don't have this option in your theme's Customizer?

If you are not using the Hemlock or Florence theme and would like to implement a retina logo image, we recommend the plugin called "WP Retina 2x". 




2. Add "Read More" link to Grid & List Layout posts in Florence

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


By default, the "Continue Reading" button won't appear for Grid Layout or List Layout posts. If you would like to have this button appear below each grid item, you can follow the steps below.


Add "continue reading" button to Grid Layout:


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

Between Lines 24 - 28, you'll see this bit of code:

    <div class="post-entry">
        
        <p><?php echo sp_string_limit_words(get_the_excerpt(), 32); ?>…</p>
        
    </div>


On the blank line right ABOVE the closing tag ( /div ) in this code, you can copy and paste the following:

<p><a href="<?php echo get_permalink() ?>" class="more-link"><span class="more-button"><?php _e( 'Continue Reading', 'solopine' ); ?></span></a></p>


Save changes to the file when you're finished.

If you decide you would like to add a bit of top and bottom margin spacing above and below the grid items' "Continue Reading" button, you can go to Appearance > Customize > Custom CSS and copy & paste in the following:

.grid-item .more-button {margin-top: 20px; margin-bottom: 12px;}




Add "continue reading" button to List Layout:


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

Between Lines 25 - 41, you'll see this big block of code for the "post-entry" element:

<div class="post-entry">
    
    <?php if(is_home()) : ?>
        <?php if(get_theme_mod('sp_home_layout') == 'list-full') : ?>
            <p><?php echo sp_string_limit_words(get_the_excerpt(), 34); ?>…</p>
        <?php else : ?>
            <p><?php echo sp_string_limit_words(get_the_excerpt(), 19); ?>…</p>
        <?php endif; ?>
    <?php else : ?>
        <?php if(get_theme_mod('sp_archive_layout') == 'list-full') : ?>
            <p><?php echo sp_string_limit_words(get_the_excerpt(), 34); ?>…</p>
        <?php else : ?>
            <p><?php echo sp_string_limit_words(get_the_excerpt(), 19); ?>…</p>
        <?php endif; ?>
    <?php endif; ?>
    
</div>


On the last line of this block of code is a closing div tag which looks like:

</div>


Directly ABOVE this closing tag, on the blank line, you can copy and paste the following code:

<p><a href="<?php echo get_permalink(); ?>" class="more-link"><span class="more-button">Continue Reading</span></a></p>


Please be sure to save changes to the file when finished.


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

4. Moving the top bar below the logo image in Rosemary

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



The top bar includes your navigation menu, your social network icons, and your search bar.
By default, it sits above your header's logo image. If you'd instead like to move your top bar to sit below your logo image, you can follow the steps below.
First, though, one important thing to note is that moving the top bar below your logo image will remove the top bar's "sticky" feature, meaning that the top bar will no longer scroll down the page with the user. It will remain at the top of the page. If this is OK with you, let's get started!





Navigate to WP Dashboard > Appearance > Editor > and open up the theme's "header.php" file.
Between Lines 66 - 94, you'll see a big block of code beginning with header id="header" and ending with /header.
This block of code looks like:

    <header id="header">
    
        <div class="container">
            
            <div id="logo">
                
                <?php if(!get_theme_mod('sp_logo')) : ?>
                    
                    <?php if(is_front_page()) : ?>
                        <h1><a href="<?php echo home_url(); ?>"><img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="<?php bloginfo( 'name' ); ?>" /></a></h1>
                    <?php else : ?>
                        <h2><a href="<?php echo home_url(); ?>"><img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="<?php bloginfo( 'name' ); ?>" /></a></h2>
                    <?php endif; ?>
                    
                <?php else : ?>
                    
                    <?php if(is_front_page()) : ?>
                        <h1><a href="<?php echo home_url(); ?>"><img src="<?php echo esc_url(get_theme_mod('sp_logo')); ?>" alt="<?php bloginfo( 'name' ); ?>" /></a></h1>
                    <?php else : ?>
                        <h2><a href="<?php echo home_url(); ?>"><img src="<?php echo esc_url(get_theme_mod('sp_logo')); ?>" alt="<?php bloginfo( 'name' ); ?>" /></a></h2>
                    <?php endif; ?>
                    
                <?php endif; ?>
                
            </div>
            
        </div>
        
    </header>


Copy this block of code and paste them onto the blank Line 20 (right above where it says div id="top-bar" ).



Be sure to go back down and remove that original block of header code below, otherwise you'll have two logo images appearing. Save the file when you're finished.

Then, within Appearance > Customize > Custom CSS, add the following:

#top-bar {position: relative; margin-bottom: 70px;}
.single #header, .page #header {margin-bottom: 0;}

Now you're all set!

5. Installation & Setup: Getting Started with Rosemary

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



Whether you're brand new to WordPress or would just like a quick lesson on basic Rosemary 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.


To skip directly to a specific section in the article, please use this index:




INSTALLING THE THEME

So you've purchased Rosemary & you're ready to get started-- great!

When you purchase a Rosemary license from ThemeForest & download the theme package, you will receive a zipped folder titled "themeforest-10695119-rosemary-a-responsive-wordpress-blog-theme".
Unzip this first folder.

Within the unzipped theme package, you will find a number of folders such as demo content, logo image files, etc. There is also 1 additional zipped folder within, titled "rosemary.zip".

Important: DO NOT unzip this folder! This folder should remain zipped.





"rosemary.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 "rosemary.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 Rosemary 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 "rosemary.zip".






Back to Top



ENABLING POST FORMATS

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




CREATING A POST

To create a post, go to WordPress Dashboard > Posts > Add New


POST FORMATS

Pre-WP 5.0/Gutenberg update: Above your content box & toolbar, you'll see a series of tabs titled Standard, Gallery, Video, and Audio. Select whichever tab you'd like your post format to be in. Each tab will give you different input boxes depending on the content you'd like to add.

After WP 5.0/Gutenberg update: 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: http://solopine.com/rosemary/explore-the-pacific-northwest/



Gallery Post

A gallery post allows you to create a slideshow-type gallery at the top of your post. After clicking the "Gallery" tab to choose this post format option, click the "Pick Images" button within the "Gallery Images" box that has appeared. Select whatever images you'd like from your WordPress Media Library.
Example of a gallery post: http://solopine.com/rosemary/california-road-trip/



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. When you preview or publish your post, the video will appear.
Example of a video post: http://solopine.com/rosemary/james-blake-overgrown/



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. When you preview or publish the post, the track will appear.
Example of an audio post: http://solopine.com/rosemary/lykke-li-gunshot/



FEATURED IMAGE & CATEGORIES


Once you've determined your post format, 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.

 



POST LAYOUTS

You can set your singular post pages' layout on the post's edit screen. Scroll down below the post text box where you'll see a section titled "Post Options".  Within is a drop-down menu titled "Post Layout".  Choose your desired layout option. 

 





PUBLISH, PREVIEW, OR SAVE


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.

To learn about how to add the Continue Reading button seen on the demo site to your posts, check out this article: How do I add the "Continue Reading" button to posts in Rosemary?



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




Once you've published your new page, it will not automatically appear in your main menu. For a tutorial on adding items to your main menu, 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 page (described above)-- a category page is generated by WordPress after you add a category to your main menu.

First, ensure you've assigned the category to at least 1 post. Then, navigate to 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.





Back to Top



HOMEPAGE 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 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 homepage 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 & 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.

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



CREATING A MAIN MENU

Setting up Rosemary's main menu in the top-bar is quite simple! For a walk-through on how to go about it as well as more specific how-to tutorials, 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 post by navigating to Appearance > Customize > Post Settings > And checking the box next to "Hide featured image from top of post"






Back to Top



ADDING SOCIAL ICONS


First, please ensure you've installed and activated the bundled plugin called "Rosemary Core". 

To install, navigate to Appearance > Install Plugins > and install/activate the plugins here.

Once the "Rosemary Core" plugin is activated, the Social Media Settings section will appear within your Customizer. 


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 URL into this box unless prompted to do so. Only your related username is required.

Once you enter your username into a particular social network's text box, its icon will appear in your top-bar area social icon area. If you leave a social network's box blank, the social icon will not appear in the top-bar area.





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 Rosemary?



Back to Top



ENABLING THE FEATURED AREA SLIDER





SETTING UP THE SLIDER:
Rosemary's featured area slider is a large area toward the top of the homepage where you can feature eye-catching images from your posts. There are a few steps to ensure your slider works perfectly:


  1. First, ensure your posts have featured images assigned. This is the image that the slider will pull in to represent your post. For more information, check out: How do I add a Featured Image?
  2. To have your slide images display in their best quality, please ensure that the source images are at least 1080px in width & 660px in height. If your featured images are smaller than 1080x660 pixels, WP will upscale them to fit the slider's container size which may result in image graininess.
  3. Lastly, navigate to Appearance > Customize > Featured Area Settings > and check the box next to "Enable Featured Slider". Be sure to save. This will enable your slider on your homepage.


WANT TO CUSTOMIZE YOUR FEATURED AREA SLIDER?
If you'd like to customize your slider area by making it more narrow, adjusting the white box overlay's transparency, etc., check out this FAQ article: How to customize Rosemary's featured area slider


CHOOSING YOUR SLIDER'S POSTS:

Within Appearance > Customize > Featured Area Settings, you can choose which posts appear in your featured area slider. 

By default, when the "Select Featured Category" drop-down is set to " -- Select -- ", the slider will display all of your latest posts.

From the drop-down menu titled "Select Featured Category", you can also choose a particular post category to display in your slider.

Additionally, if you prefer to hand-select particular posts from a variety of categories to appear in your slider, you can type in the unique post or page IDs for the posts/pages you'd like to pull into the slider by using the "Select featured post/page IDs" field. We have a guide on how to determine a post or page's ID number here: How to determine a post, page, or category ID number

Choose how many slides to display by changing the "Amount of Slides" number. 

And customize what text or link elements display within your Slider's overlay box by checking or un-checking the various options at the bottom of the Customizer section. 








Back to Top


SETTING UP YOUR PROMO BOXES


The 3 boxes below the featured area slider on Rosemary's demo site are called Promo Boxes. These boxes allow you to draw special attention to any post, page, or general URL you'd like. 

To set up your promo boxes, navigate to Appearance > Customize > Promo Box Settings.

Here, you can enable/disable the promo boxes and input your various promo box preferences.

For each of the 3 promo boxes, you have the option to enter a title, select an image, and input the URL you'd like that specific promo box to link to.

Note: If your homepage is a static page and not your blog page, you'll also want to go to your homepage's edit screen (WP Dashboard > Pages > select your homepage). On the right side, under the "Templates" drop-down, choose one of the layout options that includes Promo Boxes. 


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, your posts, and/or your archive pages (category pages, tag pages, etc.) navigate to Appearance > Customize > General Settings. Here, you can check or uncheck the boxes next to "Disable Sidebar on Homepage", "Disable Sidebar on Posts", etc.


ADDING WIDGETS TO YOUR SIDEBAR:
To add, remove, or edit your sidebar widgets, navigate to Appearance > Widgets.
On the left, you will see a list of the available widgets to choose from.
On the right, you will see a few different widget areas in the theme.

To add a widget to your sidebar, simply drag & drop a widget on the left into the widget area titled "Sidebar".




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.




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





Back to Top


SETTING UP YOUR PROMO BOX WIDGETS



Rosemary includes a special widget called "Rosemary: Promo Box" to be used in your sidebar area. 

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 "Rosemary: Promo Box" widget into the sidebar area.

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 WIDGET




With the help of the MailChimp for WordPress" plugin, you can add a beautiful, functional, and effective newsletter sign-up form widget to your Rosemary theme. You can insert this form within the sidebar area to prompt visitors to add their email to your mailing list.

For steps on setting your newsletter form up, please check out this article:  How to setup Rosemary's newsletter widget


Back to Top




The footer area is the lower portion of the theme that will appear on all pages of your site. It includes:





ADDING INSTAGRAM WIDGET TO FOOTER:
Similar to the section above regarding "Setting up your Sidebar", the footer has a widget area titled "Footer Instagram" 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". Navigate to WP Dashboard > Instagram Feed > and click the big blue button to connect your Instagram account (if it isn't already). 

To add the widget, navigate to Appearance > Widgets.  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=6 cols=6 imagepadding=0 showheader=false showbutton=false showfollow=false disablemobile=true]

Save changes. 


COPYRIGHT TEXT AREA:
At the very bottom of the theme is a bar which features a text area on the left and on the right to include copyright or disclaimer text. You are not required to include a copyright or disclaimer statement. In fact, you can type whatever you'd like in this area!

To edit the text in this Copyright Text area, look within
Appearance > Customize > Footer Settings.






Back to Top



Setting up your webshop

Rosemary 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 Rosemary or to see some fun customization tutorials, check out all of Rosemary's FAQ Articles here!



Back to Top

6. Targeting text elements in Hemlock - CSS Selectors

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



This list of Hemlock'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 Hemlock'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 Hemlock, 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


/* ----- Menu Items ----- */
/* Top-bar menu items */   .menu li a 


/* ----- Slider Overlay ----- */
/* Slider category */   #owl-demo .item .feat-overlay .feat-cat a 
/* Slider post title */   #owl-demo .item .feat-overlay h3 a

 
/* ----- Post Header ----- */
/* Post header title */   .post-header h1 a   [SPACER]   .post-header h2 a   [SPACER]   .post-header h1 
/* Post header category */    .post-header .cat a 
/* Post header date */   .post-header .date 


/* ----- Post/Page Content Areas ----- */
/* Theme's body text */    p   [SPACER]   .post-entry   [SPACER]   .post-entry p 
/* Post/Page blockquotes */   .post-entry blockquote p 
/* Post/Page numbered lists & bulleted lists */   .post-entry ul li   [SPACER]   .post-entry ol li 
/* Continue Reading */   .post-entry a.more-link

/* Post/Page H-tags */
.post-entry h1 
.post-entry h2 
.post-entry h3 
.post-entry h4 
.post-entry h5 
.post-entry h6 


/* ----- Sidebar & Footer Widgets ----- */
/* Widget titles */   .widget-title 
/* Sidebar body text */   #sidebar p 
/* Latest posts widget post titles */   .widget ul.side-newsfeed li .side-item .side-item-text h4 a 
/* Latest posts widget date */   .widget ul.side-newsfeed li .side-item .side-item-text .side-item-meta 
/* 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 


/* ----- Footer Area ----- */
/* Footer social icons */   #footer-social a  
/* Footer text beneath logo image */   #footer-logo p  
/* Footer copyright text */  #footer-copyright p 

7. How do I add social media icons to Florence?

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



How do I add social media icons to Florence?

First, please make sure that the bundled plugin called "Florence Core" is installed and activated. This "Florence Core" plugin is included within the theme package itself. You should see a banner notification across the top of your WP Dashboard requesting you install required/recommended plugins. One of these plugins is the "Florence Core" plugin. Click through the hyperlink in this banner notification to install the plugin and then, afterward, activate it. 

If you don't see the banner notification at the top of your WP Dashboard > Plugins screen, try navigating to your WP Dashboard > Themes screen. It sometimes likes to appear here, too. 

WP 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 footer. If you leave the text box blank for a social media network, the icon will not appear.

Florence SM Icon Screenshot #1





What if the social media network 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 Florence'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.

For example, we'll be adding a VK icon.
The VK icon's Font Awesome ID code is "vk".
We'll take note of this.





ADDING THE ICON TO FLORENCE'S HEADER & FOOTER

First, ensure you have the bundled plugin called "Florence 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 "Florence Core" plugin. 

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

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

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

On what is now line 31, 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 53, 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 54, 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. 




ADDING THE ICON TO FLORENCE'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 "Florence 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 76, 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 77, 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!


8. Laurel's Category Index Shortcode

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



Laurel includes a unique shortcode which allows you to display a number of posts from a particular category in a grid-like 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 "Solo Pine Shortcode" 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:

 

[laurel_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

[laurel_index title="travel"]


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






CATEGORY

[laurel_index cat="hiking"]


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

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:


[laurel_index title="travel" cat="hiking"]





 


AMOUNT OF POSTS

[laurel_index amount="4"]


We've inserted the parameter amount="" into the standard [laurel_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:

[laurel_index title="travel" cat="hiking" amount="4"]







COLUMNS

[laurel_index cols="4"]


We've inserted the parameter cols="" into the standard [laurel_index] shortcode.  
"Cols" refers to how many columns the category index grid will display your posts in. 
Laurel'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:

[laurel_index title="travel" cat="hiking" amount="4" cols="4"]


 




DISPLAY POST TITLE?

[laurel_index display_title="no"]


We've inserted the parameter display_title="no" into the standard [laurel_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:

[laurel_index title="travel" cat="hiking" amount="4" cols="4" display_title="no"]






DISPLAY POST CATEGORIES?

[laurel_index display_cat="yes"]


We've inserted the parameter display_cat="" into the standard [laurel_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:

[laurel_index title="travel" cat="hiking" amount="3" cols="3" display_cat="yes"]






DISPLAY POST IMAGE?

[laurel_index display_image="no"]


We've inserted the parameter display_image="" into the standard [laurel_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:

[laurel_index title="travel" cat="hiking" amount="4" cols="4" display_image="no"]






DISPLAY CATEGORY/VIEW ALL LINK?

[laurel_index cat_link="no"]


We've inserted the parameter cat_link="" into the standard [laurel_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:

[laurel_index title="travel" cat="hiking" cat_link="no"]






CUSTOM CATEGORY LINK TEXT

[laurel_index cat_link_text="all hikes"]


We've inserted the parameter cat_link_text="" into the standard [laurel_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 HIKES" 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:

[laurel_index title="travel" cat="hiking" cat_link_text="all hikes"]



SET POST OFFSET

[laurel_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 [laurel_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: 

[laurel_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! Stack your shortcodes upon each other to create dynamic pages of content! Be creative!

9. How to add featured posts to Hickory's featured area

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


Hickory's Featured Area option is a great way to exhibit particular posts front-and-center to those visiting your site. Assigning specific posts to the Featured Area is a snap-- just follow these steps!

Hickory Featured Area Screenshot #1


Within the post you'd like to have appear in the Featured Area, go to its create/edit screen. Scroll down to the post's settings area. Check the box next to "Featured Post?" and ensure you've assigned a Featured Image to the post itself. Save. Repeat this process with any other posts you'd like to have appear in the Featured Area.

Hickory Featured Area Screenshot #2


Next, navigate to Appearance > Hickory Options > Homepage Options.
Here, you can enable your Featured Area, choose the Featured Area Layout, and also assign the posts you'd like to appear in it. To choose your posts, click within the blank space of the "Posts" box. A list will appear of all of the posts you've checked to be Featured Posts (our previous step). Select the posts you'd like to be featured, drag and drop them into the order you'd like them to appear, delete them, and add more if you'd like. Be sure to "Save Changes" when you're finished.

Hickory Featured Area Screenshot #3



Screenr Video Walk-thru

Want to see more? Screenr Video for How to Add Featured Posts to Hickory's Featured Area


10. Changing font size in Alder - CSS Code

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




Would you like to change the font size of any of Alder'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 > Custom 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: 16px;}
  
  
/* ----- HEADER AREA ----- */
/* Navigation menu items */ #nav-wrapper .menu li a {font-size: 11px;}
/* Navigation sub-menu items */ #nav-wrapper .menu li a {font-size: 10px;}
/* Mobile menu items */ .slicknav_nav .slicknav_item a {font-size: 12px;}
/* Top-bar search text */ #searchform input#s {font-size: 15px;}
/* Top-bar social icons */ #top-social a i {font-size: 12px;}
  
   
/* ----- FEATURED AREA ----- */
/* Category */ .feat-overlay .cat a {font-size: 11px;}
/* Large box post title */ .feat-overlay h2 a {font-size: 32px;}
/* Smaller box post title */ .feat-overlay h4 a {font-size: 24px;}
  
   
/* ----- POST HEADER ----- */
/* Standard post/page header title */ .post-header h2 a, .post-header h1 {font-size: 32px;}
/* Grid post header title */ .grid-item .post-header h2 a {font-size: 20px;}
/* Full-width List post header title */ #main.fullwidth .list-item .post-header h2 a {font-size: 30px;}
/* Sidebar enabled List post header title */ .list-item .post-header h2 a {font-size: 28px;}
/* Post header category */ .post-header .cat a {font-size: 11px;}
  
   
/* ----- POST & PAGE CONTENT ----- */
/* Theme's body text */ .post-entry p {font-size: 16px;}
/* 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: 16px;}
/* 'Continue Reading' button */ .post-entry .read-more, .read-more {font-size: 11px;}
  
    
/* Post/Page Body H-tags */
.post-entry h1 {font-size: 32px;}
.post-entry h2 {font-size: 28px;}
.post-entry h3 {font-size: 26px;}
.post-entry h4 {font-size: 23px;}
.post-entry h5 {font-size: 20px;}
.post-entry h6 {font-size: 17px;}
 
  
/* ----- 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: 18px;}
/* Index categories */ .short-header .cat a {font-size: 11px;}
  
  
/* ----- CONTACT FORM 7  ----- */
/* Name, email, subject, message, etc. labels */ .wpcf7 label {font-size: 16px;}
/* Input fields */ .wpcf7 input, .wpcf7 select, .wpcf7 textarea {font-size: 12px;}
/* Submit button */ .wpcf7-submit {font-size: 12px;}
  
  
/* ----- ARCHIVE PAGE ----- */
/* "Explore" text */ .archive-box span {font-size: 13px;}
/* Category, tag, etc. title */ .archive-box h1 {font-size: 28px;}
  
  
/* ----- POST & PAGE FOOTER ----- */ 
/* "By" */ .post-meta .date a {font-size: 15px;}
/* Post author */ .meta-author a {font-size: 12px;}
/* Social share icons */ .post-share a i {font-size: 12px;}
/* Previous Post / Next Post */  .pagination-text {font-size: 11px;}
/* Previous Post / Next Post post titles */  .pagination-item h3 a {font-size: 16px;}
  
  
/* ----- YOU MIGHT ALSO LIKE ----- */
/* Section's title */ .related-heading {font-size: 13px;}
/* Post titles */ .item-related h3 a {font-size: 18px;}
 
   
/* ----- POST COMMENTS ----- */
/* Section's title */ .post-comments .related-heading {font-size: 13px;}
/* "Reply" button */ .post-comments span.reply a {font-size: 10px;}
/* "Leave a Reply" Text */ #respond  h3 {font-size: 11px;}
/* 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: 12px;}
/* Comment's date & time */ .thecomment .comment-text span.date {font-size: 10px;}
/* Comment's text */ .comment-text p {font-size: 16px;}
  
  
/* ----- HOMEPAGE POST PAGINATION ----- */
/* Homepage Older Posts/Newer Posts */ .alder-pagination a {font-size: 10px;}
  
  
/* ----- WIDGETS ----- */
/* Widget titles */ .widget-title {font-size: 15px;}
/* Solo Pine's Latest posts widget post titles */ .side-pop.list .side-pop-content h4 a {font-size: 16px;}
/* Solo Pine's Latest posts widget date */ .side-pop.list .side-pop-content span.date {font-size: 10px;}
/* Solo Pine's About widget text */ .about-widget p {font-size: 16px;}
/* 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;}
/* Newsletter widget "Subscribe" button */ .subscribe-box input[type=submit] {font-size: 12px;}
  
  
/* ----- FOOTER AREA ----- */
/* Footer social icons */ #footer-social a {font-size: 14px;}
/* Footer text on left */ p.footer-text.left {font-size: 11px;}
/* Footer text on right */ p.footer-text.right {font-size: 11px;}

11. How do I add the "Continue Reading" button to posts in Rosemary?

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



The "Continue Reading" button in Rosemary is an excellent tool-- It gives your site's visitors a taste of your posts as well as keeps your homepage tidy & more easily navigable.

Rosemary gives you the option of either manually adding the Continue Reading button to each post, or, auto-applying the Continue Reading button to all posts with the click of a button.





MANUALLY ADDING THE CONTINUE READING BUTTON:
Also known as the Read More tag, you can add the Continue Reading button to a post within the post's "create/edit" screen. Some people prefer the customizability of this option as they can choose where within the post they'd like to place the button and just how much content of the post they'd like shown on the homepage.

For instructions on how to go about manually adding the Read More tag,
check out: How do I get the "Continue reading" link?


AUTO-APPLYING THE CONTINUE READING BUTTON:
Another option would be to have the theme automatically apply this Read More tag into all of your posts. This is a great option if your site already has a large number of posts that you'd rather not go through and manually apply the Read More tag to. Or, if you'd like the ease of simply not worrying about this extra step for all future posts.

To auto-apply the Read More tag to all of your posts, you can navigate to
Appearance > Customize > General Settings > scroll down a bit in the left-hand menu > choose the "Use Excerpt" option under the "Homepage/Archive Post Summary Type" section. Be sure to save.





CHANGING THE AUTO-APPLY WORD COUNT TO LENGTHEN/SHORTER POST EXCERPTS:
WordPress determines where to place the Read More tag within your post based on how many words it counts through. By default, Rosemary will count through 200 words before inserting the Continue Reading button. You can change the number of words by making a slight adjustment to the theme's "functions.php" file.

To access the "functions.php" file, it is likely easiest to go via Appearance > Editor > "functions.php".
Scroll to the last section of the document, titled "THE EXCERPT". You will see at the top of this section:

//////////////////////////////////////////////////////////////////
// THE EXCERPT
//////////////////////////////////////////////////////////////////
function custom_excerpt_length( $length ) {
    return 200;
}

Note where it says "return 200;" in the document. This is where you can adjust the number of words WP counts before applying the Read More tag. Change the number to whatever value you prefer and be sure to save when done.




12. Add LinkedIn social share icon to Oleander

Beneath your posts are a variety of social share icons. These icons differ from those in your top-bar area in that, when clicked, they will open up that social network's share platform so that visitors can share your content on their social media accounts. 

To add a "LinkedIn" icon to your post social share icons, you can follow these steps:

Navigate to WP Dashboard > Appearance > Editor > and open up the "content.php" file. On lines 125-129, you will see a block of code related to the share icons.

<a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>"><i class="fa fa-facebook"></i> <?php _e( 'Share', 'solopine' ); ?></a>
<a target="_blank" href="https://twitter.com/home?status=Check%20out%20this%20article:%20<?php print solopine_social_title( get_the_title() ); ?>%20-%20<?php echo urlencode(the_permalink()); ?>"><i class="fa fa-twitter"></i> <?php _e( 'Tweet', 'solopine' ); ?--></a>
<?php $pin_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID)); ?>
<a data-pin-do="none" target="_blank" href="https://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=<?php echo $pin_image; ?>&description=<?php the_title(); ?>"><i class="fa fa-pinterest"></i> <?php _e( 'Pin it', 'solopine' ); ?></a>
<a target="_blank" href="https://plus.google.com/share?url=<?php the_permalink(); ?>"><i class="fa fa-google-plus"></i> <?php _e( '+1', 'solopine' ); ?></a>


On line 129 you'll see the code for the Google Plus social network (which will soon be removed in a future theme update).

Create a new blank line BELOW this Google Plus code. On this blank line, paste in the following:

<a target="_blank" href="https://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>"><i class="fa fa-linkedin"></i> <span><?php _e( 'Share', 'solopine' ); ?></span></a>


Save changes to the file. 

If you'd also like to add the LinkedIn social share icon to your pages as well, navigate to WP Dashboard > Appearance > Editor > and open up "content-page.php". Again, on line 34, you'll see the code for the Google Plus social network. Create a new blank line beneath the Google Plus code and paste in the following:

<a target="_blank" href="https://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>"><i class="fa fa-linkedin"></i> <span><?php _e( 'Share', 'solopine' ); ?></span></a>

Save changes when finished. 


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


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

15. How do I add social media icons to Alder?

Please note: This FAQ Article is specifically for the Alder 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.

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 "Alder: Social Icons" widget to your sidebar area. 

Once the widget is added to your sidebar area, click the widget's heading to drop-down 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 Alder 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 Alder'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 Alder.
On Font Awesome's icon page, you can see that the code for the VK icon is "vk".




ADDING THE ICON TO ALDER'S TOP-BAR & FOOTER:





First, ensure you have the bundled plugin called "Alder 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 "Alder Core" plugin. 

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

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

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

On what is now line 30, 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 50, 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 51, 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 ALDER'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 "Alder  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 76, 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 77, 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!


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

17. How do I add social media icons to Hemlock?

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




How do I add social media icons to Hemlock?

WordPress Dash > 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 footer. If you leave the text box blank for a social media network, the icon will not appear.






What if the social media network 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 Hemlock'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.




For example, we'll be adding a LinkedIn icon.
On Font Awesome's icon page, you can see that the code for the first LinkedIn icon is "linkedin".
We'll take note of this.




ADDING THE ICON TO HEMLOCK'S HEADER & FOOTER



First, ensure you have the bundled plugin called "Hemlock 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 "Hemlock Core" plugin. 

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

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

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

On what is now line 28, 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 46, 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 47, 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. 




ADDING THE ICON TO HEMLOCK'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 "Hemlock 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 68, 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 69, 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!





Instagram Footer images in screenshot by the very talented @withhearts

18. How to customize Rosemary's Featured Area Slider

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



Customization Options:

1. Adjust the slider's white overlay box opacity/transparency
2. Hide the slider's white box overlay completely
3. Make the slider's large images clickable
4. Adjust the slider's height
5. Adjust the slider's speed
6. How to disable the slider's auto-slide feature
7. Have slider display 1 static image & remove slide function entirely




1) Adjust the slider's white overlay box opacity/transparency

Slider Overlay Transparency Screenshot

Rosemary's featured area slider's white overlay box is set to be completely opaque (completely solid) by default. If you'd like to add some transparency, you can do so by adding the following into Appearance > Customize > Custom CSS:

.feat-overlay {background: rgba(255,255,255,.8); box-shadow: none;}


In the above code, there are 4 number values listed.
The 3 different "255" number values determine the color (in this case, it's the code for the color white).
The final decimal number represents the opacity/transparency of the overlay box.

The opacity options range from "0" up to "1".
"0" means it is completely transparent, while "1" means it is completely opaque.

I've set the above example to an opacity level of ".8" which offers slight transparency. Feel free to adjust to a lower decimal number for more transparency, or a higher decimal number for less transparency.
Experiment and find what works best for you!





2) Hide the slider's white box overlay completely

Hiding the white box overlay on the slider is a piece of cake! Simply copy & paste the following into Appearance > Customize > Custom CSS:

.feat-overlay {display: none;}


Slider Hide Overlay Screenshot






3) Make the slider's large images clickable

By default, Rosemary's featured area slider images are not clickable and they won't link to the post. Visitors can instead click through to the post via the slide's overlay which features the post category, title, date, etc.
To make the actual slider image link to the post, you can follow these steps:

Navigate to WP Dashboard > Appearance > Editor > open the "inc" folder > open the "featured" folder > and then open the file titled "featured.php". Within "featured.php", on blank Line 18, you can copy and paste the following code:

<a href="<?php echo get_permalink(); ?>" style="position: absolute; height: 100%; width: 100%; top: 0; z-index: 999999; display: block;"></a>


Slider Clickable Image Link Screenshot


Be sure to save when you're finished editing the file.






4) Adjust the slider's height

Rosemary's slider dimensions are 1080px in width & 660px in height.
If you would like to reduce Rosemary's slider height, it's as simple as copying & pasting some code.

Adjusting the overlay's padding to accommodate the new slider height can be a bit complicated, so we've created a few pre-styled slider heights, including responsive CSS, for your convenience. A screenshot of what each height looks like follows each height option. Simply choose the slider height that appeals to you & copy its code into Appearance > Customize > Custom CSS:



Slider height of 580px:

.feat-item {height: 580px; padding: 17.2% 32.5%;}
@media only screen and (min-width: 942px) and (max-width: 1170px) {.feat-item {height: 510px; padding: 16.2% 28.5%;}} 
@media only screen and (min-width: 768px) and (max-width: 960px) {.feat-item {height: 444px; padding: 17.2% 25.5%;}} 
@media only screen and (max-width: 767px) {.feat-item {height: 220px; padding: 16.2% 16.5%;}} 
@media only screen and (min-width: 480px) and (max-width: 768px) {.feat-item {height: 310px; padding: 19.2% 20.5%;}}

Slider Height 580 Screenshot



Slider height of 500px:

.feat-item {height: 500px; padding: 13.2% 32.5%;} 
@media only screen and (min-width: 942px) and (max-width: 1170px) {.feat-item {height: 474px; padding: 15.2% 28.5%;}} 
@media only screen and (min-width: 768px) and (max-width: 960px) {.feat-item {height: 354px; padding: 12.2% 25.5%;}} 
@media only screen and (max-width: 767px) {.feat-item {height: 220px; padding: 19.2% 22.5%;}} 
@media only screen and (min-width: 480px) and (max-width: 768px) {.feat-item {height: 310px; padding: 14.2% 20.5%;}}





Slider height of 460px:

.feat-item {height: 460px; padding: 11.0% 32.5%;} 
@media only screen and (min-width: 942px) and (max-width: 1170px) {.feat-item {height: 375px; padding: 10.2% 29.5%;}} 
@media only screen and (min-width: 768px) and (max-width: 960px) {.feat-item {height: 350px; padding: 11.2% 26.5%;}} 
@media only screen and (max-width: 767px) {.feat-item {height: 220px; padding: 15.2% 21.5%;}} 
@media only screen and (min-width: 480px) and (max-width: 768px) {.feat-item {height: 310px; padding: 18.2% 20.5%;}}


Slider Height 460 Screenshot



Slider height of 400px:

.feat-item {height: 400px; padding: 9.3% 32.5%;} 
@media only screen and (min-width: 942px) and (max-width: 1170px) {.feat-item {height: 380px; padding: 10.2% 29.5%;}} 
@media only screen and (min-width: 768px) and (max-width: 960px) {.feat-item {height: 380px; padding: 12.2% 25.5%;}} 
@media only screen and (max-width: 767px) {.feat-item {height: 220px; padding: 18.2% 19.5%;}} 
@media only screen and (min-width: 480px) and (max-width: 768px) {.feat-item {height: 310px; padding: 18.2% 20.5%;}}


Slider Height 400 Screenshot

Please note: Adjusting the slider's width is unfortunately more complicated and would require more customization than we're able to assist with within basic theme support. If it's important to you, we would recommend looking into hiring a freelancer.






5) Adjust the slider's speed

Rosemary's slider is set to change slides every 6 seconds by default. You can change this by making a small adjustment within the "solopine.js" file.

Navigate to WP Dashboard > Appearance > Editor > open the "js" folder > and then open the file titled "solopine.js". Within "solopine.js", look from Line 11 - Line 19

Here, you'll see the following block of code for the featured area slider:

    // BXslider
    $('.featured-area .bxslider').bxSlider({
        pager: false,
        auto: true,
        pause: 6000,
        onSliderLoad: function(){
            $("#sideslides").css("visibility", "visible");
          }
    });

Line 15, where it says "pause: 6000," is where we can adjust the slider's speed.
The timer is measured in milliseconds, so "6000," translates to 6 seconds per slide before it rotates to the next. If you wanted to increase the slider time to 9 seconds, for example, you would replace the "6000," with "9000," instead.

Be sure to save your changes in the file when finished.





6 ) How to disable the slider's auto-slide feature


It is possible to remove the slider's auto-slide feature entirely so that visitors must navigate through the slides by clicking the left & right navigation arrows.

To remove the slider's auto-slide, you will need to access the theme's "solopine.js" file.

Navigate to WP Dashboard > Appearance > Editor > open the "js" folder > and then open the file titled "solopine.js". Within "solopine.js", look from Line 11 - Line 20

Here, you will see the following block of code:

    // BXslider
    $('.featured-area .bxslider').bxSlider({
        pager: false,
        auto: true,
        pause: 6000,
        onSliderLoad: function(){
            $("#sideslides").css("visibility", "visible");
          }
    });

Replace that block of code with the following instead. 

// BXslider
$('.featured-area .bxslider').bxSlider({    
pager: false,    
auto: false,    
pause: 6000,    
touchEnabled: false,    
onSliderLoad: function(){        
$("#sideslides").css("visibility", "visible");      
}
});

Be sure to save the changes you made to the file when you're finished.





7) Have slider display 1 static image & remove slide function entirely


If you'd like to have your slider display 1 image and not function as a slider at all, we can disable the left/right buttons and remove the auto-slide function on not only desktop but also on mobile devices.

First, we will remove the scrolling effect.

Navigate to WP Dashboard > Appearance > Editor > "js" folder > and open up the file titled "solopine.js".

Between Lines 11-20, you will see this block of code for the slider:

// BXslider
$('.featured-area .bxslider').bxSlider({
    pager: false,
    auto: true,
    pause: 6000,
    onSliderLoad: function(){
        $("#sideslides").css("visibility", "visible");
      }
});


Replace that block of code with the following block of code instead:

// BXslider
$('.featured-area .bxslider').bxSlider({
    pager: false,
    auto: false,
    pause: 6000,
    touchEnabled: false,
    onSliderLoad: function(){
        $("#sideslides").css("visibility", "visible");
      }
});


Be sure to save changes to the file when finished. Please note that if you have a cache plugin running or a cache tool on your web browser (desktop or mobile), you'll need to clear the cache(s). 

Next, navigate to WP Dashboard > Pages > Add New. Create a new page and give it any title you'd like, for example "Slider Image". Then, assign this page a Featured Image of your desired image you'd like to show in the slider. Publish the page when finished. While still on the page edit screen, look in your web browser's address bar at the top. Here, you'll see the page's URL which may look something like:

http://example.com/wp-admin/post.php?post=329&action=edit

Do you see the bit in the address that looks like "post=329"? This means that 329 is your new page's unique ID number (your page's ID number will be different than this example, of course). Note down this ID number. 

Lastly, navigate to WP Dashboard > Appearance > Customize > Featured Area Settings > Select Featured post/page ID number > and type in your page's ID number (example: 329) into the field. Further down, check the boxes for the options "Hide all Categories", "Hide Featured Slider Title", "Hide Featured Slider Date", and "Hide Featured Slider Read More Button". Save changes. 

Now, your slider should display that 1 image without scrolling! 


19. Have Redwood's full-width grid layout display in 3 columns

Please note: This FAQ article is specifically for the Redwood theme.



By default, Redwood's full-width grid layout will have your grid items display in 2 columns. If you'd like to have them instead display in 3 columns, it's a very simple process of copying and pasting some code.

Navigate to WordPress Dashboard > Appearance > Customize > Custom CSS and copy & paste in the following:

@media only screen and (min-width: 943px){
#main.fullwidth .sp-grid > li {width: 340px; margin-right: 26px;}
#main.fullwidth .sp-grid li:nth-of-type(2n+2) {margin-right: 26px;}
#main.fullwidth .sp-grid li:nth-of-type(3n+3) {margin-right: 0;}
}

@media only screen and (min-width: 942px) and (max-width: 1170px) {
#main.fullwidth .sp-grid >li {width: 293px;}
}

@media only screen and (max-width: 960px) {
#main.fullwidth .sp-grid li:nth-of-type(3n+3) {margin-right: 26px;}
#main.fullwidth .sp-grid li:nth-of-type(2n+2) {margin-right: 0;}
}


Be sure to save changes within your Customizer section when finished.
If the changes are not immediately taking effect, please also ensure that you clear any browser or WordPress cache tool you may have enabled.


20. 1st post displays full, followed by grid layout in Hemlock

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



Hemlock Special Layout Screenshot #1


If you're interested in having your homepage display the first post in full/standard layout, followed by the rest of the posts displaying in grid layout, you can follow these steps:




STEP 1: 


We recommend installing the code editor plugin called "WPide" (http://wordpress.org/plugins/wpide). Once activated, you can navigate to WP Dashboard > WPide > themes > hemlock > and open up the file titled "index.php". 

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

<?php get_template_part('content', get_theme_mod('sp_home_layout')); ?>


Immediately ABOVE that line of code (on the blank Line 26), copy & paste the following:

<?php if( $wp_query->current_post == 0 && !is_paged() ) : ?>
    <?php get_template_part('content'); ?>
<?php else : ?>


Then, immediately BELOW that initial line of code (on what is now the blank Line 30), copy & paste the following:

<?php endif; ?>


The block of code should now look like this:

    <?php if( $wp_query->current_post == 0 && !is_paged() ) : ?>
            <?php get_template_part('content'); ?>
        <?php else : ?>                
        <?php get_template_part('content', get_theme_mod('sp_home_layout')); ?>
    <?php endif; ?>


Hemlock Special Layout Screenshot #3


Be sure to save the changes to "index.php" when finished.




STEP 2: 


Then, navigate to Appearance > Customize > Custom CSS and copy & paste in the following code:

/* -- FULL WIDTH GRID -- */

@media only screen and (min-width: 960px) {
.sp-grid li  {margin-right: 16px !important;}

.sp-grid li:nth-of-type(3n+3) {
margin-right: 0 !important;
}}


@media only screen and (min-width: 480px) and (max-width: 960px) {
.sp-grid li  {margin-right: 16px !important;}

.sp-grid li:nth-of-type(2n+2) {
margin-right: 0 !important;
}}


/* -- SIDEBAR GRID -- */

@media only screen and (min-width: 767px) {
.container.sp_sidebar .sp-grid li {margin-right: 16px !important;}

.container.sp_sidebar .sp-grid li:nth-of-type(2n+2) {
margin-right: 0 !important;
}}


Save changes when finished. 




STEP 3:


Lastly, navigate to Appearance > Customize > General Settings and ensure your Homepage Layout is set to "Grid Layout". 




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

22. Add an email icon to Oleander

To add an email icon to your Oleander social icons which would allow visitors to send you an email, you can follow these steps:

 


ADDING AN EMAIL ICON TO YOUR TOP BAR

 

  

If you'r running the latest versions of WordPress, you can navigate to WP Dashboard > Appearance > Editor and open the file titled "header.php". 

Beginning on Line 35, you'll see a long list of the various social network icon options.  At the bottom of the list, on the blank Line 49, you can copy and paste the following bit of code:


<a href="mailto:YOUR-EMAIL-ADDRESS-HERE?subject=ADD-SUBJECT-LINE-TEXT-HERE &body=ADD-DEFAULT-BODY-TEXT-HERE" target="_blank"><i class="fa fa-envelope-o"></i></a>

 



There are three optional elements within the above code that you can replace in order to customize how the email looks when a user clicks on the email icon:

Mail to: Replace the "YOUR-EMAIL-ADDRESS-HERE" dummy text in the code with the email address you would like the emails to automatically be addressed to.

Subject: Replace the "ADD-SUBJECT-LINE-TEXT-HERE" dummy text with the text you'd like to automatically appear in the email's subject line.

Body: Replace the "ADD-DEFAULT-BODY-TEXT-HERE" dummy text with any text you'd like to automatically appear in the body of the email. If you'd like the email body to be blank, you can simply remove the dummy text.

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



ADDING AN EMAIL ICON TO YOUR SOCIAL ICON WIDGET

 


To add the email icon to your social icon widget, we'll need to access the "social_widget.php" theme file. 

Navigate to WP Dashboard > Appearance > Editor  > "inc" folder > "widgets" folder > and open up the file titled "social_widget.php".

Beginning on Line 60 is a long list of the available social networks.  Create a new, blank line immediately following the last option for "RSS" and before the closing "/div" tag.  

On this blank line, copy and paste the following:


<a href="mailto:YOUR-EMAIL-ADDRESS-HERE?subject=ADD-SUBJECT-LINE-TEXT-HERE &body=ADD-DEFAULT-BODY-TEXT-HERE" target="_blank"><i class="fa fa-envelope-o"></i></a>

 



To customize the "to" address, subject line, and body text of the email that will pop up for users, follow the previously noted steps above. 

When you're finished, be sure to save any changes to the "social_widgets.php" file.




ADDING AN EMAIL ICON TO YOUR FOOTER AREA

 



To add an email social icon to your footer, navigate to WP Dashboard > Appearance > Editor > and open up the file titled "footer.php". 

Beginning on Line 33, you'll see a long list of the various social network icon options.  On the blank Line 47, copy & paste the following code:

<a href="mailto:YOUR-EMAIL-ADDRESS-HERE?subject=ADD-SUBJECT-LINE-TEXT-HERE &body=ADD-DEFAULT-BODY-TEXT-HERE" target="_blank"><i class="fa fa-envelope-o"></i> <span>Email</span></a>



To customize the "to" address, subject line, and body text of the email that will pop up for users, follow the previously noted steps above. When you're finished, be sure to save any changes to the "footer.php" file.


ADDING AN EMAIL ICON TO YOUR SOCIAL SHARE ICONS

 

Social share icons are the icons that appear beneath your posts which allow visitors to share your content on their social media network. 

To add an email icon to your social share icons, navigate to WP Dashboard > Appearance > Editor > and open the file titled "content.php". 

Scroll down to blank Line 130, which is a blank line right after the last social share icon line of code for Google Plus:

On this blank line, you can copy & paste in the following code:

<a href="mailto:?subject=ADD-SUBJECT-LINE-TEXT-HERE &body=Check out this article: <?php the_permalink(); ?>" target="_blank"</a>

Feel free to adjust the ADD-SUBJECT-LINE-TEXT-HERE dummy text in the above code to whatever text you'd like to automatically appear in the person's email subject line. 

You can also replace the dummy "Check out this article:" text in the above code if you'd rather have it say something else in the person's email body. The post's URL will then be automatically inserted. 

Please remember to save changes to the file when finished. 

This will add the email share icon to your posts. 

To also add the email share icon to your pages, you can navigate to WP Dashboard > Appearance > Editor > and open the file titled "content-page.php". 

On blank Line 33, copy & paste the above email icon code. Edit the dummy text as you'd like and then save changes when finished. 

23. Changing font size in Rosemary - Custom CSS

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



Would you like to change the font size of any of Rosemary's text elements? Below, we've noted nearly all of Rosemary'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 code next to it, and paste it into
WordPress Dashboard > Appearance > Customize > Custom CSS.
We've listed each item with its default font size, so feel free to adjust it to whatever pixel size you prefer.

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: 13px;}
/* ----- TOP BAR ----- */
/* Top-bar menu items */   #nav-wrapper .menu li a {font-size: 10px;}
/* Top-bar social icons */   #top-social a i {font-size: 13px;}
/* Top-bar search text */   #top-search input {font-size: 13px;}
/* ----- SLIDER OVERLAY ----- */
/* Slider category */   .feat-overlay .post-header .cat a {font-size: 10px;} 
/* Slider post title */   .feat-item .post-header h2 a {font-size: 24px;}
/* Slider post date */   .feat-item .post-header .date {font-size: 11px;}
/* Slider read more button */   .feat-item .read-more {font-size: 10px;}
/* ----- POST HEADER ----- */
/* Post header title */   .post-header h2 a, .post-header h1 {font-size: 26px;}
/* Post header category */    .post .post-header .cat a {font-size: 10px;}
/* Post header date */   .post .post-header .date {font-size: 11px;}
/* ----- POST & PAGE CONTENT ----- */
/* Theme's body text */   .post-entry p {font-size: 13px;}
/* Post/Page blockquotes */   .post-entry blockquote p {font-size: 18px;}
/* Post/Page numbered lists & bulletted lists */   .post-entry ul li, .post-entry ol li {font-size: 13px;}
/* Post Read more button */   .more-button {font-size: 10px;} 
/* Post/Page H-tags */
.post-entry h1 {font-size: 26px;}
.post-entry h2 {font-size: 24px;}
.post-entry h3 {font-size: 21px;}
.post-entry h4 {font-size: 19px;}
.post-entry h5 {font-size: 17px;}
.post-entry h6 {font-size: 15px;}
/* ----- ARCHIVE PAGE ----- */
/* Browsing category, tag, etc. banner text */   .archive-box span {font-size: 10px;}
/* Banner's category, tag, etc. title */   .archive-box h1 {font-size: 36px;}
/* ----- POST & PAGE FOOTER ----- */ 
/* Post/page footer share icons */   .meta-share a {font-size: 16px;}
/* Post/page "share" text */   .meta-share {font-size: 13px;}
/* Post comment counter */   .meta-comments a {font-size: 13px;}
/* ----- AUTHOR BOX ----- */
/* Post author name */   .author-content h5 a {font-size: 18px;}
/* Author bio text */   .author-content p {font-size: 13px;}
/* Author social icons */   .author-content .author-social {font-size: 14px;}
/* ----- YOU MIGHT ALSO LIKE ----- */
/* Section's title */   .post-related .post-box-title {font-size: 11px;}
/* Post titles */   .item-related h3 a {font-size: 14px;}
/* Post date */   .item-related span.date {font-size: 11px;}
/* ----- POST COMMENTS ----- */
/* Section's title */   .post-comments .post-box-title {font-size: 11px;}
/* Leave a reply */   #respond h3 {font-size: 11px;}
/* Name, email, website, etc. */   #respond label {font-size: 13px;}
/* Post comment button */   #respond #submit {font-size: 11px;}
/* Commentator's name */   .thecomment .comment-text h6.author, .thecomment .comment-text h6.author a {font-size: 13px;}
/* Comment's date & time */   .thecomment .comment-text span.date {font-size: 11px;}
/* Comment's text */   .comment-text p {font-size: 13px;}
/* ----- HOMEPAGE POST PAGINATION ----- */
/* Homepage Older Posts/Newer Posts */   .pagination a {font-size: 11px;}
   
/* ----- SIDEBAR WIDGETS ----- */
/* Widget titles */   .widget-title {font-size: 10px;}
/* Latest posts widget post titles */   .widget ul.side-newsfeed li .side-item .side-item-text h4 a {font-size: 13px;}
/* Latest posts widget date */   .widget ul.side-newsfeed li .side-item .side-item-text .side-item-meta {font-size: 11px;}
/* WP's recent posts widget items */   .widget_recent_entries ul li a {font-size: 13px;}
/* WP's archive widget items */   .widget_archive ul li a {font-size: 13px;}
/* WP's category widget items */   .widget_categories ul li a {font-size: 13px;}
/* Tag cloud */   .widget .tagcloud a {font-size: 9 !important;}
/* About widget text */   .about-widget p {font-size: 13px;}
/* Social widget icons */ .social-widget a {font-size: 16px;}
/* ----- FOOTER AREA ----- */
/* Instagram widget title */   .instagram-title {font-size: 16px;}
/* Footer left-side copyright/disclaimer text */  #footer .copyright.left {font-size: 12px;}
/* Footer right-side copyright/disclaimer text */  #footer .copyright.right {font-size: 12px;}
/* Footer copyright/disclaimer text */  #footer .copyright {font-size: 12px;}

24. How do I add social media icons to Redwood?

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

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

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, social media widget (if applicable), and the footer. If you leave the text box blank for a social media network, the icon will not appear.
Please note: you only need to enter your username, not your account's URL.




What if the social media network 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 Redwood'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 (Hint: A simple CTRL + F find is likely the quickest way). Font Awesome's Icon Directory

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


ADD THE ICON TO REDWOOD'S TOP-BAR & FOOTER:



First, ensure you have the bundled plugin called "Redwood 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 "Redwood Core" plugin. 

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

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




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

On what is now line 30, 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 50, 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 51, 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 REDWOOD'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 "Redwood 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!



25. Have Rosemary's full-width grid layout display in 3 columns

Please note: This FAQ article is specifically for the Rosemary theme.



By default, Rosemary's full-width grid layout will have your grid items display in 2 columns. If you'd like to have them instead display in 3 columns, it's a very simple process of copying and pasting some code.

Navigate to WordPress Dashboard > Appearance > Customize > Custom CSS and copy & paste in the following:

@media only screen and (min-width: 943px){
#main.fullwidth .sp-grid > li {width: 340px; margin-right: 26px;}
#main.fullwidth .sp-grid li:nth-of-type(2n+2) {margin-right: 26px;}
#main.fullwidth .sp-grid li:nth-of-type(3n+3) {margin-right: 0;}
}

@media only screen and (min-width: 942px) and (max-width: 1170px) {
#main.fullwidth .sp-grid >li {width: 293px;}
}

@media only screen and (max-width: 960px) {
#main.fullwidth .sp-grid li:nth-of-type(3n+3) {margin-right: 26px;}
#main.fullwidth .sp-grid li:nth-of-type(2n+2) {margin-right: 0;}
}


Be sure to save changes within your Customizer section when finished.
If the changes are not immediately taking effect, please also ensure that you clear any browser or WordPress cache tool you may have enabled.


26. More Sitka guide articles coming soon!

In the meantime, if you have any questions at all, please don't hesitate to open up a new support ticket. We'd be happy to help!

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


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




29. How do I add social media icons to Oleander?

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





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


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, social media widget (if enabled within Appearance > Widgets), and the footer area. If you leave the text box blank for a social media network, the icon will not appear.

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 Appearance > Widgets > and added the "Oleander: Social Icons" widget to either your Sidebar area or one of your Footer widget areas.




What if the social media network 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 Oleander'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 Oleander.
On Font Awesome's icon page, you can see that the code for the VK icon is "vk".


ADDING THE ICON TO OLEANDER'S TOP-BAR:



Open up the theme file called "header.php".

You can access this theme file via Appearance > Editor > "header.php". However, if you would like the convenience of line numbers within the theme file, we recommend using the code editor plugin called WPide.
Once WPide is activated, navigate to WP Dashboard > WPide > themes > oleander > "header.php".


On the blank Line 49, copy & paste the following code, making sure to replace the dummy text YOUR-VK-PROFILE-URL-HERE with your VK profile's URL.

<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, be sure to replace the "vk" class text in the above code with your desired icon's code, such as "vimeo-square". Additionally (following the code example above), you'll need to add a "fa fa-" preceding the icon code.



Be sure to save the "header.php" document when you're finished.



ADD THE ICON TO OLEANDER'S SOCIAL WIDGET:




To manually add an icon to Oleander's Social Widget, you'll need to access a theme file called "social_widget.php". This is located within the theme's "inc" folder and then within the "widgets" folder. You cannot access these folders just from WP Dashboard > Appearance > Editor. You will need to access them via FTP, or, via a code editor plugin such as WPide (recommended).

Once WPide is installed/activated, you can navigate to WP Dashboard > WPide > themes > oleander > "inc" folder > "widgets" folder > and open the file titled "social_widget.php".

Between Lines 59-74, you'll see a big list of code for various social networks.

The block of code looks like this:



Create a blank line after the last line of code (for the RSS feed) and before the closing "/div" tag.

Here, you can copy & paste the code below.


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




Again, be sure to replace the dummy URL text with your own. And, if you're inserting another icon that is NOT for VK, remember to replace the "vk" in the code with your own icon's ID.

Save the file when you're done making changes.



ADDING THE ICON TO OLEANDER'S FOOTER:



Open up the document called "footer.php".

Between Lines 33-46, you will see a big block of code for the footer's social media icons.

On the blank Line 47, copy & paste the following code:


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



Again, be sure to replace the dummy text with your profile page's URL.

Additionally, the footer social area has the social network's name in text next to the icon. If you are not inserting a VK icon, remember to not only change the Font Awesome ID to your own, but ALSO to change the text between the two "span" tags in the above code.

Save the theme file when you're finished.


If you have any troubles while following the above instructions, please feel more than free to open up a new support ticket at https://solopine.ticksy.com and let us know. We'd be happy to help!

30. Add an email icon to Florence

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




To add an email icon to your Florence social icons which would allow visitors to send you an email, you can follow these steps:

Florence Email Icon Screenshot


ADDING AN EMAIL ICON TO YOUR TOP BAR

Navigate to WP Dashboard > Appearance > Editor > and open up the theme's "header.php" file. Beginning on Line 40, you'll see a long list of the various social network icon options. At the bottom of the list, on the blank Line 53, you can copy and paste the following bit of code:

<a href="mailto:YOUR-EMAIL-ADDRESS-HERE?subject=ADD-SUBJECT-LINE-TEXT-HERE &body=ADD-DEFAULT-BODY-TEXT-HERE" target="_blank"><i class="fa fa-envelope-o"></i></a>




There are three optional elements within the above code that you can replace in order to customize how the email looks when a user clicks on the email icon:

Mail to: Replace the "YOUR-EMAIL-ADDRESS-HERE" dummy text in the code with the email address you would like the emails to automatically be addressed to.

Subject: Replace the "ADD-SUBJECT-LINE-TEXT-HERE" dummy text with the text you'd like to automatically appear in the email's subject line.

Body: Replace the "ADD-DEFAULT-BODY-TEXT-HERE" dummy text with any text you'd like to automatically appear in the body of the email. If you'd like the email body to be blank, you can simply remove the dummy text.

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



ADDING AN EMAIL ICON TO YOUR FOOTER

Florence Email Icon Screenshot #3


To add an email social icon to your footer, navigate to WP Dashboard > Appearance > Editor > and open up the theme's "footer.php" file. 

Beginning on Line 24, you'll see a long list of the various social network icon options. On the blank Line 37, copy & paste the following code:


<a href="mailto:YOUR-EMAIL-ADDRESS-HERE?subject=ADD-SUBJECT-LINE-TEXT-HERE &body=ADD-DEFAULT-BODY-TEXT-HERE" target="_blank"><i class="fa fa-envelope-o"></i><span> Email</span></a>




There are four optional elements within the above code that you can replace in order to customize how the email looks when a user clicks on the email icon:

Mail to: Replace the "YOUR-EMAIL-ADDRESS-HERE" dummy text in the code with the email address you would like the emails to automatically be addressed to.

Subject: Replace the "ADD-SUBJECT-LINE-TEXT-HERE" dummy text with the text you'd like to automatically appear in the email's subject line.

Body: Replace the "ADD-DEFAULT-BODY-TEXT-HERE" dummy text with any text you'd like to automatically appear in the body of the email. If you'd like the email body to be blank, you can simply remove the dummy text.

Icon title: At the end of the code where it says "Email" between the two "span" tags, feel free to change this to whatever text you'd like. This text will appear after the social icon within the footer.

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



ADDING AN EMAIL ICON TO YOUR SOCIAL ICON WIDGET

Florence Email Icon Screenshot #5


To add the icon to your social widget, navigate to WP Dashboard > Appearance > Editor > "inc" folder > "widgets" folder > and open "social_widget.php". 

Beginning on Line 59 is a long list of the available social networks. Create a new, blank line immediately following the last option for "RSS" and before the closing "/div" tag. On this blank line, copy and paste the following:

<a href="mailto:YOUR-EMAIL-ADDRESS-HERE?subject=ADD-SUBJECT-LINE-TEXT-HERE &body=ADD-DEFAULT-BODY-TEXT-HERE" target="_blank"><i class="fa fa-envelope-o"></i></a>




To customize the "to" address, subject line, and body text of the email that will pop up for users, follow the previously noted steps above.
When you're finished, be sure to save any changes to the "social_widgets.php" file.


ADDING AN EMAIL ICON TO YOUR SOCIAL SHARE ICONS

 

The social share icons are the icons beneath your posts on their singular post page. This allows visitors to share your content on their social media sites. To add an email icon to your social share icons, you can navigate to WP Dashboard > Appearance > Editor > and open "content.php".

Scroll down to Line 108, which is a the last line of social share icon code for the Google+ share platform. Create a new, blank line below this Google+ code.

On this new, blank line, you can copy & paste in the following code:

<a href="mailto:?subject=ADD-SUBJECT-LINE-TEXT-HERE &body=Check out this article: <?php the_permalink(); ?>" target="_blank"><i class="fa fa-envelope-o"></i></a>

Feel free to adjust the ADD-SUBJECT-LINE-TEXT-HERE dummy text in the above code to whatever text you'd like to automatically appear in the person's email subject line. 

You can also replace the dummy "Check out this article:" text in the above code if you'd rather have it say something else in the person's email body. The post's URL will then be automatically inserted. 

Please remember to save changes to the file when finished. 

This will add the email share icon to your posts. 

To also add the email share icon to your pages, you can navigate to WP Dashboard > Appearance > Editor > and open the file titled "content-page.php". 

Create a new, blank line below the Google+ code once again (the Google+ code is found on Line 31). Copy & paste the above email icon code. Edit the dummy text as you'd like and then save changes when finished. 



31. Adding a newsletter sign-up form to Redwood

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


Redwood comes with pre-stylings included for the Mailchimp for WordPress plugin. In order to add a MailChimp newsletter sign-up form widget to your sidebar, you can follow the instructions below. We'll need to create a MailChimp Account, install the necessary plugin, and then set up your newsletter widget.





1. SIGN-UP FOR MAILCHIMP

First, please ensure you have signed up and created an account with MailChimp ( https://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 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".



3. SETTING UP THE NEWSLETTER WIDGET

Lastly, navigate to WP Dashboard > Appearance > Widgets.

A new widget titled "MailChimp Sign-Up Form" will have appeared. Drag and drop this widget into your Sidebar area.

To customize your newsletter form, you can navigate to WP Dashboard > MailChimp for WP > Forms.
On this screen, you can determine just how your newsletter form displays.



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

If you would like your newsletter sign-up form to look just like Redwood's demo, you can navigate to WP Dashboard > Appearance > Widgets, select the newsletter widget, and delete the "Title" text.

Then, go to WP Dashboard > MailChimp for WP > Forms.
In the big text box, replace the code you see within with the following code instead:

<p>
    <label>Subscribe to my Newsletter</label>
    <input type="email" id="mc4wp_email" name="EMAIL" placeholder="Your email address" required />
</p>
<p>
    <input type="submit" value="Subscribe" />
</p>


Be sure to save changes when you're finished.


32. Changing font size in Laurel - CSS Code

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




Would you like to change the font size of any of Laurel'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 > Custom 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: 14px;}
 
/* ----- HEADER AREA ----- */
/* Navigation menu items */ #nav-wrapper .menu li a {font-size: 13px;}
/* Navigation sub-menu items */ #navigation #nav-wrapper ul.menu ul a {font-size: 11px;}
/* Top-bar search text */ #searchform input#s {font-size: 20px;}
 
/* ----- FEATURED AREA SLIDER ----- */
/* Category */ .feat-overlay .cat a {font-size: 12px;}
/* Post title */ .feat-overlay h2 a {font-size: 34px;}
/* Post summary */ .feat-overlay p {font-size: 14px;}
 
/* ----- POST HEADER ----- */
/* Standard post header title */ .post-header h2 a, .post-header h1 {font-size: 28px;}
/* Grid post header title */ .post-layout .grid-item .post-header h2 a {font-size: 22px;}
/* List post header title */ .list-item .post-header h2 a {font-size: 26px;}
/* Post header category */ .post-header .cat a {font-size: 12px;}
 
/* ----- POST & PAGE CONTENT ----- */
/* Theme's body text */ .post-entry p {font-size: 14px;}
/* 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: 14px;}
/* 'Read More' button */ .post-entry .read-more, .read-more {font-size: 11px;}
/* Post/Page Body H-tags */
.post-entry h1 {font-size: 28px;}
.post-entry h2 {font-size: 25px;}
.post-entry h3 {font-size: 22px;}
.post-entry h4 {font-size: 19px;}
.post-entry h5 {font-size: 17px;}
.post-entry h6 {font-size: 15px;}
 
/* ----- INDEX SHORTCODE ROWS ----- */
/* 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: 14px;}
 
/* ----- CONTACT FORM 7  ----- */
/* Name, email, subject, message, etc. labels */ .wpcf7 p {font-size: 14px;}
/* Input fields */ .wpcf7 input, .wpcf7 select, .wpcf7 textarea {font-size: 12px;}
/* Submit button */ .wpcf7-submit {font-size: 12px;}
 
/* ----- ARCHIVE PAGE ----- */
/* Browsing category, tag, etc. */ .archive-box span {font-size: 12px;}
/* Category, tag, etc. title */ .archive-box h1 {font-size: 32px;}
 
/* ----- POST & PAGE FOOTER ----- */ 
/* Post date */ .post-meta .date a {font-size: 12px;}
/* Post author */ .post-meta .author a {font-size: 12px;}
/* Post/page "By" & "On" text */ .post-meta .by {font-size: 12px;}
/* Post Tags */ .post-tags a {font-size: 11px !important;}
/* Previous Post / Next Post */  .post-pagi-title {font-size: 12px;}
/* Previous Post / Next Post post titles */  .post-pagination a {font-size: 14px;}
 
/* ----- AUTHOR BOX ----- */
/* "About" text */ .author-content h5 .about-italic {font-size: 15px;}
/* Post author name */ .author-content h5 a {font-size: 15px;}
/* Author bio text */ .author-content p {font-size: 14px;}
 
/* ----- YOU MIGHT ALSO LIKE ----- */
/* Section's title */ .post-related h4.block-heading {font-size: 12px;}
/* Post titles */ .item-related h3 a {font-size: 14px;}
/* Post date */ .item-related span.date {font-size: 12px;}
 
/* ----- POST COMMENTS ----- */
/* Section's title */ .post-comments h4.block-heading {font-size: 12px;}
/* "Reply" button */ .post-comments span.reply a {font-size: 10px;}
/* "Leave a Reply" Text */ #respond  h3 {font-size: 12px;}
/* "Cancel Reply" button */ #respond h3 small a {font-size: 11px;}
/* Name, email, website, etc. */ #respond label {font-size: 13px;}
/* "Post Comment" button */ #respond #submit {font-size: 10px;}
/* Commentator's name */ .thecomment .comment-text h6.author, .thecomment .comment-text h6.author a {font-size: 13px;}
/* Comment's date & time */ .thecomment .comment-text span.date {font-size: 12px;}
/* Comment's text */ .comment-text p {font-size: 14px;}
 
/* ----- HOMEPAGE POST PAGINATION ----- */
/* Homepage Older Posts/Newer Posts */ .pagination a {font-size: 11px;}
 
/* ----- WIDGETS ----- */
/* Widget titles */ .widget-title {font-size: 12px;}
/* Solo Pine's Latest posts widget post titles */ .side-pop.list .side-pop-content h4 a {font-size: 14px;}
/* Solo Pine's Latest posts widget date */ .side-pop.list .side-pop-content span.date {font-size: 13px;}
/* Solo Pine's About widget text */ .about-widget p {font-size: 14px;}
/* Solo Pine's Promo widget title */ #sidebar .promo-overlay  h4 {font-size: 11px;}
/* Newsletter widget headline */ .subscribe-box h4 {font-size: 17px;}
/* Newsletter widget text */ .subscribe-box p {font-size: 12px;}
/* Newsletter "Your email address" text */ .home-widget .subscribe-box input {font-size: 13px;}
/* Newsletter widget "Subscribe" button */ .subscribe-box input[type=submit] {font-size: 12px;}
 
/* ----- FOOTER AREA ----- */
/* Instagram widget title */ .instagram-title {font-size: 12px;}
/* Footer social icon text */ #footer-social a {font-size: 16px;}
/* Footer text */ .copyright p {font-size: 14px;}

33. Installation & Setup: Getting Started with Oleander

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






Whether you're brand new to WordPress or would just like a quick lesson on basic Oleander 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 and more.


To skip directly to a specific section in the article, please use this index:



INSTALLING THE THEME

So you've purchased Oleander & you're ready to get started-- great!

When you purchase an Oleander license from Creative Market & download the theme package, you will receive a zipped folder titled "Oleander-A-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 "oleander.zip".

Important: DO NOT unzip this "oleander.zip" folder! This particular .zip folder should remain zipped.




"oleander.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 "oleander.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 Oleander 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 "oleander.zip".






Back to Top


POSTS

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






CREATING A POST

To create a new post, go to WordPress Dashboard > Posts > Add New.


Pre-WP 5.0/Gutenberg update: Above your content box & toolbar, you'll see a series of tabs titled Standard, Gallery, Video, and Audio. Select whichever tab you'd like your post format to be in. Each tab will give you different input boxes depending on the content you'd like to add.

After WP 5.0/Gutenberg update: 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: http://solopine.com/oleander/photoshoot-in-central-park/


Gallery Post

A gallery post allows you to create a slideshow-type gallery at the top of your post. After clicking the "Gallery" tab to choose this post format option, click the "Pick Images" button within the "Gallery Images" box that has appeared. Select whatever images you'd like from your WordPress Media Library.
Example of a gallery post: http://solopine.com/oleander/visiting-the-old-farm/


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. When you preview or publish your post, the video will appear.
Example of a video post: http://solopine.com/oleander/explore-pacific-northwest/


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. When you preview or publish the post, the track will appear.
Example of an audio post: http://solopine.com/oleander/niki-the-dove/




POST LAYOUTS

You can set your singular post pages' layout globally via WP Dashboard > Appearance > Customize > General Settings > by checking or un-checking the box option titled "Enable sidebar on posts". 

When you first create a new post, its layout will automatically be set via whether or not you've selected this "Enable sidebar on posts" option or not. 

Additionally, you can change a post's layout on a post-by-post basis. To do so, open the post's edit screen. Scroll down below your post body text box to where you'll see a section titled "Post Options". Within the "Post Layout" drop-down, you can choose your desired layout.

 





FEATURED IMAGE & CATEGORIES

Once you've determined your post format & post 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.

 





PUBLISH, PREVIEW, OR SAVE


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.

To learn about how to add the Continue Reading button seen on the demo site to your posts, check out this article: How do I add the "Continue Reading" button to posts in Oleander?



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




Once you've published your new page, it will not automatically appear in your main menu. For a tutorial on adding items to your main menu, 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 page (described above)-- a category page is generated by WordPress after you add a category to your main menu.

First, ensure you've assigned the category to at least 1 post. Then, navigate to 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


HOMEPAGE 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 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 homepage 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 & 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.

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


CREATING A MAIN MENU

Setting up Oleander's main menu is quite simple! For a walk-through on how to go about it as well as more specific how-to tutorials, 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 post by navigating to Appearance > Customize > Post Settings > And checking the box next to "Hide featured image from top of post".







Back to Top


ADDING SOCIAL ICONS

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

Once you enter your username into a particular social network's text box, its icon will appear in your top-bar & footer social icon areas. If you leave a social network's box blank, the social icon will not appear in the top-bar or footer areas.


To add the social icon widget to your sidebar or footer area, you can do so within WP Dashboard > Appearance > Widgets.





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 Oleander?



Back to Top


ENABLING THE FEATURED AREA SLIDER






SETTING UP THE SLIDER:
Oleander's featured area slider is a large area toward the top of the homepage where you can feature eye-catching images linking to your posts. There are a few steps to ensure your slider works perfectly:

  1. Enable your slider: To enable it, you can navigate to WP Dashboard > Appearance > Customize > Featured Area Settings > and enable the slider here.
  2. Ensure your posts have featured images assigned: Oleander gives you two options for assigning an image to represent a post in the slider. One option is to simply assign a Featured Image to your post. By default, this is the image that the slider (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?
  3. Oleander also allows you to assign a specific image to represent the post in the slider separate from your post's Featured Image. To assign an alternate slider image, navigate to your post's create/edit screen and look in the meta box titled "Page Options". Here, you can choose your "Custom Slider Image" and/or insert "Custom Slider Sub-title" text.

  4. Have your slide images display in their best quality: Ensure that the source images are at least 1900px in width & 530px in height. If your featured images are smaller than 1900x530 pixels, WP will upscale them to fit the slider's container size which may result in image graininess.



CHOOSING YOUR SLIDER'S POSTS:
Within Appearance > Customize > Featured Area Settings, you have 3 options for choosing which posts appear in your featured area slider:


  1. All latest posts: By default, the slider will display all of your latest published posts.
  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 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 slider. To learn how to identify a post or page's ID, check out: How to determine a post, page, or category ID







Back to Top


SETTING UP YOUR PROMO BOXES




The 3 boxes below the featured area slider on Oleander's demo site are called Promo Boxes. These boxes allow you to draw special attention to any post, page, or general URL you'd like.

To set up your promo boxes, navigate to Appearance > Customize > Promo Box Settings.

Here, you can enable/disable the promo boxes and input your various promo box preferences.





For each of the 3 promo boxes, you have the option to enter a title, select an image, and input the URL you'd like that specific promo box to link to.



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 Appearance > Customize > General Settings. Here, you can check or uncheck the boxes next to "Disable Sidebar on Homepage" and "Disable Sidebar on Archives".


To enable or disable the sidebar on your Posts, you can do so from within the post's create/edit screen. This allows you to enable the sidebar on your singular post page on a post-by-post basis.

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 "Templates" drop-down menu.


ADDING WIDGETS TO YOUR SIDEBAR:
To add, remove, or edit your sidebar widgets, navigate to Appearance > Widgets.
On the left, you will see a list of the available widgets to choose from.
On the right, you will see a few different widget areas in the theme.

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






Back to Top


SETTING UP YOUR PROMO BOX WIDGETS

 


Oleander includes a special widget called "Oleander: 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 "Oleander: 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 WIDGET




Oleander 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 Oleander's newsletter widget


Back to Top



The footer area is the lower portion of the theme that will appear on all pages of your site. It can include:





WIDGETIZED FOOTER AREA:
Similar to the section above regarding "Setting up your Sidebar", the footer has three side-by-side widget areas titled "Footer 1", "Footer 2", and "Footer 3" where you can add in widgets of your choosing. You can add multiple widgets in each of the three sections, however, for ideal display, we recommend inserting one widget per footer widget area.

SOCIAL ICON AREA:
The footer's social icon area is directly connected with Oleander's top-bar social icon area. To choose which social icons you'd like to appear, enter your username for each social network platform within Appearance > Customize > Social Media Settings.

For more information, please reference the section above titled "Adding Social Icons".

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



COPYRIGHT TEXT AREA:
At the very bottom of the theme is a bar which features a text area to include copyright or disclaimer text. You are not required to include a copyright or disclaimer statement. In fact, you can type whatever you'd like in this area!

To edit the text in this Copyright Text area, look within
Appearance > Customize > Footer Settings.



Back to Top



For help troubleshooting issues in Oleander or to see some fun customization tutorials, check out all of Oleander's FAQ Articles here! Oleander Articles



Back to Top

34. Changing font family in Sprout & Spoon - CSS Selectors

Please note: This article is specifically for the Sprout & Spoon theme



This list of Sprout & Spoon'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 Sprout & Spoon'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 Sprout & Spoon, please don't hesitate to open up a new support ticket and let us know!




/* ----- GENERAL BODY TEXT ----- */
p,.post-entry,.post-entry p
/* ----- HEADER AREA ----- */
/* Navigation menu items */    #nav-wrapper .menu li a 
/* Top-bar search text */    #searchform input#s 
/* ----- FEATURED AREA ----- */
/* Category */    .feat-inner .cat a  
/* Post title */    .feat-inner h2 a 
/* ----- POST HEADER ----- */
/* Post header title */    .post-header h2 a,.post-header h1 
/* Post header category */    .post-header .cat a 
/* ----- POST & PAGE CONTENT ----- */
/* Theme's body text */    .post-entry p 
/* Post/Page blockquotes */    .post-entry blockquote p 
/* Post/Page numbered lists & bulletted lists */    .post-entry ul li,.post-entry ol li 
/* 'Continue Reading' link */    .more-link 
/* Post/Page Body H-tags */
.post-entry h1 
.post-entry h2 
.post-entry h3 
.post-entry h4 
.post-entry h5 
.post-entry h6 
/* ----- RECIPE CARD ----- */
/* Recipe Title */    .post-entry .recipe-overview h2 
/* Serving & Cook Time Text */    .recipe-overview .recipe-meta span 
/* "Print Recipe" Button */    .recipe-overview a.sp-print 
/* Ingredients, Instructions, Notes Titles */    .post-entry .recipe-title 
/* Ingredients List Items */   .post-entry .sp-recipe ul li 
/* Instructions List Items */    .post-entry .recipe-method .step 
/* Notes Text */    .post-entry .recipe-notes p 
/* ----- INDEX SHORTCODE ROWS ----- */
/* Section title */    .post-entry .index-heading > span 
/* "View All" link */   .post-entry .index-heading a 
/* Index post titles */   .index-item .grid-item .post-header h2 a 
/* Index post category */   .index-item .grid-item .post-header .cat a 
/* ----- CONTACT FORM 7  ----- */
/* Name, email, subject, message, etc. labels */   .wpcf7 p 
/* Input fields */    .wpcf7 input,.wpcf7 select,.wpcf7 textarea 
/* Submit button */    .wpcf7-submit 
/* ----- ARCHIVE PAGE ----- */
/* Browsing category, tag, etc. banner text */    .archive-box span 
/* Banner's category, tag, etc. title */    .archive-box h1
 
/* ----- POST & PAGE FOOTER ----- */ 
/* Post date & author */    .meta-text 
/* Post/page "By" text */    .by 
/* Post Tags */    .post-tags a 
/* Previous Post / Next Post */   .single .post-pagination
 
/* ----- AUTHOR BOX ----- */
/* "About" text */    .author-content h5 .about-italic 
/* Post author name */    .author-content h5 a 
/* Author bio text */    .author-content p 
/* ----- YOU MIGHT ALSO LIKE ----- */
/* Section's title */    .post-related h4.block-heading 
/* Post titles */    .item-related h3 a 
/* Post date */    .item-related span.date 
/* ----- POST COMMENTS ----- */
/* Section's title */    .post-comments h4.block-heading 
/* "Reply" button */    .post-comments span.reply a 
/* "Leave a Reply" Text */    #respond  h3 
/* "Cancel Reply" button */    #respond h3 small a 
/* Name, email, website, etc. */    #respond label 
/* Post comment button */    #respond #submit 
/* Commentator's name */    .thecomment .comment-text h6.author,.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 */    .pagination a
 
/* ----- WIDGETS ----- */
/* Widget titles */   .widget-title 
/* Solo Pine's Latest posts widget post titles */   .side-pop.list .side-pop-content h4 a 
/* Solo Pine's Latest posts widget date */   .side-pop.list .side-pop-content span.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-item a
 
/* ----- FOOTER AREA ----- */
/* Instagram widget title */    .instagram-title 
/* Footer social icon text */    #footer-social a 
/* Footer Left text */    #footer-copyright p.left-copy 
/* Footer Right text */    #footer-copyright p.right-copy 
/* "Top" button */    .to-top 

35. Targeting text elements in Redwood - CSS Selectors

This list of Redwood'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 Redwood'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 Redwood's text element CSS in order to just change font-size without using the Easy Google Fonts plugin, please reference this article instead: Targeting text elements in Redwood - Change font-size.


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


/* ----- GENERAL BODY TEXT ----- */
p,.post-entry,.post-entry p
 
/* ----- TOP-BAR ----- */
/* Top-bar menu items */   #nav-wrapper .menu li a 
/* Top-bar search text */   #searchform input#s 
/* ----- SLIDER OVERLAY ----- */
/* Slider category */   .feat-overlay .cat a 
/* Slider post title */   .feat-overlay h2 a 
/* Slider read more button */   .feat-more 
/* ----- PROMO BOXES ----- */
/* Promo box title */   .promo-overlay h4 
/* ----- POST HEADER ----- */
/* Post header title */   .post-header h2 a,.post-header h1 
/* Post header category */    .post-header .cat a 
/* Post header date */   .post-date 
/* ----- POST & PAGE CONTENT ----- */
/* Theme's body text */   p,.post-entry,.post-entry p 
/* Post/Page blockquotes */   .post-entry blockquote p 
/* Post/Page numbered lists & bulletted lists */  .post-entry ul li,.post-entry ol li 
/* Post 'Continue Reading' button */   .more-link 
/* Post/Page H-tags */
.post-entry h1 
.post-entry h2 
.post-entry h3 
.post-entry h4 
.post-entry h5 
.post-entry h6 
/* ----- ARCHIVE PAGE ----- */
/* Browsing category, tag, etc. banner text */   .archive-box span 
/* Banner's category, tag, etc. title */   .archive-box h1 
/* ----- POST & PAGE FOOTER ----- */ 
/* Post/page "By" text */   .post-share-box.share-author span 
/* Post/page footer author name */   .post-share-box.share-author a 
/* Post comment counter - number */   .post-share-box.share-comments a span 
/* Post comment counter - 'comments' text */   .post-share-box.share-comments a 
/* ----- AUTHOR BOX ----- */
/* Post author name */   .author-content h5 a 
/* Author bio text */   .author-content p
/* ----- YOU MIGHT ALSO LIKE ----- */
/* Section's title */   .post-related .post-box-title 
/* Post titles */   .item-related h3 a 
/* Post date */   .item-related span.date 
/* ----- POST COMMENTS ----- */
/* Section's title */   .post-comments .post-box-title 
/* Leave a reply */   #respond h3 
/* Name, email, website, etc. */   #respond label 
/* Post comment button */   #respond #submit 
/* Commentator's name */   .thecomment .comment-text span.author,.thecomment .comment-text span.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 */   .pagination a 
  
/* ----- SIDEBAR WIDGETS ----- */
/* Widget titles */   .widget-title 
/* Latest posts widget post titles */   .widget ul.side-newsfeed li .side-item .side-item-text h4 a 
/* Latest posts widget date */   .widget ul.side-newsfeed li .side-item .side-item-text .side-item-meta 
/* 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 
/* About widget text */   .about-widget p 
/* About widget title text */   .about-title 
/* Newsletter widget headline */   .mc4wp-form label 
/* Newsletter widget button */   .mc4wp-form input[type=submit]
/* ----- FOOTER AREA ----- */
/* Instagram widget title */   .instagram-title 
/* Footer social icon text */   #footer-social a span 
/* Footer copyright/disclaimer text */  #footer .copyright 


36. Add "Read More" link to Grid or List Layout posts in Redwood

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



By default, the "Continue Reading" button won't appear for Grid Layout or List Layout posts. If you would like to have this button appear below each grid and/or list item, you can follow these steps:



GRID LAYOUT


Navigate to Appearance > Editor > and open up the file titled "content-grid.php". 
On Line 28, you will see this line of code:

<p><?php echo sp_string_limit_words(get_the_excerpt(), 31); ?>…</p>


Directly BELOW this line of code, on the blank Line 29, copy and paste the following code:

<p><a href="<?php echo get_permalink() ?>" class="more-link"><span class="more-button"><?php _e( 'Continue Reading<span class="more-line"></span>', 'solopine' ); ?></span></a></p>


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

If you would then like to add a bit of spacing between the grid item's "Continue Reading" link and the post date below, you can also copy and paste the following into Appearance > Customize > Custom CSS.
Feel free to adjust the pixel value to whatever spacing you prefer.

.grid-item .more-link {margin-bottom: 30px;}




LIST LAYOUT


Navigate to WP Dashboard > Appearance > Editor > and open up the file titled "content-list.php"
On Line 29, you will see this line of code:

<p><?php echo sp_string_limit_words(get_the_excerpt(), 39); ?>…</p>


Directly BELOW this line of code, on blank Line 30, copy & paste the following:

<p><a href="<?php echo get_permalink() ?>" class="more-link"><span class="more-button"><?php _e( 'Continue Reading<span class="more-line"></span>', 'solopine' ); ?></span></a></p>


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



37. Changing font size in Sprout & Spoon - CSS Code

Please note: This article is specifically for the Sprout & Spoon theme. 




Would you like to change the font size of any of Sprout'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 it includes, and paste it into WordPress Dashboard > Appearance > Customize > Custom 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: 14px;}
/* ----- HEADER AREA ----- */
/* Navigation menu items */ #nav-wrapper .menu li a {font-size: 13px;}
/* Navigation sub-menu items */ #nav-wrapper .menu li a {font-size: 11px;}
/* Top-bar search text */ #searchform input#s {font-size: 13px;}
/* ----- FEATURED AREA ----- */
/* Category */ .feat-inner .cat a {font-size: 11px;}
/* Post title */ .feat-inner h2 a {font-size: 22px;}
/* ----- POST HEADER ----- */
/* Standard post header title */ .post-header h2 a, .post-header h1 {font-size: 28px;}
/* 3 Column Grid post header title */ .grid-item .post-header h2 a {font-size: 17px;}
/* 2 Column Grid post header title */ .sp-grid.col2 .grid-item .post-header h2 a {font-size: 22px;}
/* List post header title */ .list-item .post-header h2 a {font-size: 26px;}
/* Post header category */ .post-header .cat a {font-size: 11px;}
/* ----- POST & PAGE CONTENT ----- */
/* Theme's body text */ .post-entry p {font-size: 14px;}
/* Post/Page blockquotes */ .post-entry blockquote p {font-size: 22px;}
/* Post/Page numbered lists & bulletted lists */ .post-entry ul li, .post-entry ol li {font-size: 14px;}
/* 'Continue Reading' link */ .more-link {font-size: 19px;}
/* Post/Page Body H-tags */
.post-entry h1 {font-size: 28px;}
.post-entry h2 {font-size: 25px;}
.post-entry h3 {font-size: 22px;}
.post-entry h4 {font-size: 19px;}
.post-entry h5 {font-size: 17px;}
.post-entry h6 {font-size: 15px;}
/* ----- RECIPE CARD ----- */
/* Recipe Title */ .post-entry .recipe-overview h2 {font-size: 22px;}
/* Serving & Cook Time Text */ .recipe-overview .recipe-meta span {font-size: 12px;}
/* "Print Recipe" Button */ .recipe-overview a.sp-print {font-size: 12px;}
/* Ingredients, Instructions, Notes Titles */ .post-entry .recipe-title {font-size: 14px;}
/* Ingredients List Items */ .post-entry .sp-recipe ul li {font-size: 14px;}
/* Instructions List Items */ .post-entry .recipe-method .step p {font-size: 14px;}
/* Notes Text */ .post-entry .recipe-notes p {font-size: 14px;}
/* ----- INDEX SHORTCODE ROWS ----- */
/* Section title */ .post-entry .index-heading > span {font-size: 16px;}
/* "View All" link */ .post-entry .index-heading a {font-size: 11px;}
/* ----- CONTACT FORM 7  ----- */
/* Name, email, subject, message, etc. labels */ .wpcf7 p {font-size: 14px;}
/* Input fields */ .wpcf7 input, .wpcf7 select, .wpcf7 textarea {font-size: 14px;}
/* Submit button */ .wpcf7-submit {font-size: 14px;}
/* ----- ARCHIVE PAGE ----- */
/* Browsing category, tag, etc. */ .archive-box span {font-size: 12px;}
/* Category, tag, etc. title */ .archive-box h1 {font-size: 28px;}
/* ----- POST & PAGE FOOTER ----- */ 
/* Post date & author */ .meta-text {font-size: 12px;}
/* Post/page "By" text */ .by {font-size: 13px;}
/* Post Tags */ .post-tags a {font-size: 10px;}
/* Previous Post / Next Post */  .single .post-pagination {font-size: 13px;}
/* ----- AUTHOR BOX ----- */
/* "About" text */ .author-content h5 .about-italic {font-size: 16px;}
/* Post author name */ .author-content h5 a {font-size: 14px;}
/* Author bio text */ .author-content p {font-size: 14px;}
/* ----- YOU MIGHT ALSO LIKE ----- */
/* Section's title */ .post-related h4.block-heading {font-size: 13px;}
/* Post titles */ .item-related h3 a {font-size: 16px;}
/* Post date */ .item-related span.date {font-size: 14px;}
/* ----- POST COMMENTS ----- */
/* Section's title */ .post-comments h4.block-heading {font-size: 13px;}
/* "Reply" button */ .post-comments span.reply a {font-size: 10px;}
/* "Leave a Reply" Text */ #respond  h3 {font-size: 12px;}
/* "Cancel Reply" button */ #respond h3 small a {font-size: 11px;}
/* Name, email, website, etc. */ #respond label {font-size: 13px;}
/* "Post Comment" button */ #respond #submit {font-size: 10px;}
/* Commentator's name */ .thecomment .comment-text h6.author, .thecomment .comment-text h6.author a {font-size: 13px;}
/* Comment's date & time */ .thecomment .comment-text span.date {font-size: 12px;}
/* Comment's text */ .comment-text p {font-size: 14px;}
/* ----- HOMEPAGE POST PAGINATION ----- */
/* Homepage Older Posts/Newer Posts */ .pagination a {font-size: 10px;}
/* ----- WIDGETS ----- */
/* Widget titles */ .widget-title {font-size: 11px;}
/* Solo Pine's Latest posts widget post titles */ .side-pop.list .side-pop-content h4 a {font-size: 14px;}
/* Solo Pine's Latest posts widget date */ .side-pop.list .side-pop-content span.date {font-size: 13px;}
/* Solo Pine's About widget text */ .about-widget p {font-size: 14px;}
/* Solo Pine's Promo widget title */ .promo-item a {font-size: 11px;}
/* Newsletter widget headline */ .subscribe-box h4 {font-size: 16px;}
/* Newsletter widget text (in content area) */ .subscribe-box p {font-size: 14px;}
/* Newsletter widget text (in sidebar area) */ .subscribe-box p {font-size: 13px;}
/* Newsletter "Your email address" text */ .home-widget .subscribe-box input {font-size: 13px;}
/* Newsletter widget "Subscribe" button */ .subscribe-box input[type=submit] {font-size: 12px;}
/* ----- FOOTER AREA ----- */
/* Instagram widget title */ .instagram-title {font-size: 12px;}
/* Footer social icon text */ #footer-social a {font-size: 11px;}
/* Footer Left text */ #footer-copyright p.left-copy {font-size: 12px;}
/* Footer Right text */ #footer-copyright p.right-copy {font-size: 12px;}
/* "Top" button */ .to-top {font-size: 10px;}

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



39. Add "Read More" link to Grid Layout and List Layout posts in Rosemary

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


By default, the "Continue Reading" button won't appear for Grid Layout and List Layout posts. If you would like to have this button appear below each grid and/or list item, you can follow these steps:



GRID LAYOUT


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

On Line 26, you will see this line of code:

<p><?php echo sp_string_limit_words(get_the_excerpt(), 34); ?>…</p>


Directly BELOW this line of code, on blank Line 27, copy & paste the following:

<p><a href="<?php echo get_permalink() ?>" class="more-link"><span class="more-button"><?php _e( 'Continue Reading', 'solopine' ); ?></span></a></p>


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



LIST LAYOUT


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

On Line 27, you will see this line of code:

<p><?php echo sp_string_limit_words(get_the_excerpt(), 44); ?>…</p>


Directly BELOW this line of code, on blank Line 28 copy & paste the following:

<p><a href="<?php echo get_permalink() ?>" class="more-link"><span class="more-button"><?php _e( 'Continue Reading', 'solopine' ); ?></span></a></p>


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


40. How do I add the "Read More" button to posts in Laurel?

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



The "Continue Reading" link in Laurel is a wonderful tool-- It gives your site's visitors a taste of your posts as well as keeps your homepage tidy & more easily navigable instead of displaying 100% of every post.

Laurel gives you the option of either manually adding the "Continue Reading" link to each post, or, auto-applying the "Continue Reading" link to all posts with the click of a button.

Both options have pros & cons. We'll go over the differences between the two and how to enable either option below.




MANUALLY ADDING THE READ MORE BUTTON:

Please note: This option is for the Homepage/Archive Page/Blog Page layout option that displays the "Full Post Layout". The "Read More" button is auto-applied for the Grid and List Layouts. See further below for adjusting these layout options. 

Also known as the "Read More" tag or the "More" Gutenberg block, you can add the "Read More" button to a post within the post's "create/edit" screen. Some people prefer the customizability of this option as they can choose where within the post they'd like to place the button and just how much content of the post they'd like shown on the homepage.

The downside is that manually inserting the "Read More" tag can be a bit tedious as it needs to be inserted into each of your posts.

To add a "Read More" tag to your post, you can navigate to the post's create/edit screen. Click the " + " plus icon to insert a new Gutenberg content block where you'd like the "Read More" button to appear. Then, use the search bar function to search for the term "More". This will bring up the Gutenberg "More" block. Select this block. 



Clicking this icon will insert a dashed horizontal line with the words "READ MORE" centered within it. This is your "Read More Tag". WordPress will display all of the text above this "READ MORE" line, and will hide everything beneath it until the visitors clicks through to your singular post page.

Please also remember to navigate to WP Dashboard > Appearance > Customize > General Settings > Homepage/Archive Post Summary Type > and selected the "Use Read More Tag" option. 



AUTO-APPLYING THE READ MORE BUTTON:

Another option would be to have the theme automatically apply this "Read More" tag into all of your posts. This is a great option if your site already has a large number of posts that you'd rather not go through and manually apply the "Read More" tag to. Or, if you'd like the ease of simply not worrying about this extra step for all future posts.

One thing to note is that this method uses the WordPress"excerpt" function. This function will filter out any HTML code including images and hyperlinks inserted at the beginning of your post (not including the Featured Image), so your excerpt will only display static text, not pictures.

If it's important to you to have hyperlinked text or images within your post summary on the homepage/blog post page, you may want to consider the option above for manually inserting the "Read More" button.

To auto-apply the "Read More" tag to all of your posts, navigate to WP Dashboard >Appearance > Customize > General Settings > Homepage/Archive Post Summary Type > and choose the "Use Excerpt" option. 






CHANGING THE AUTO-APPLY WORD COUNT TO LENGTHEN/SHORTEN POST EXCERPTS:

If you use the option to auto-apply the "read more" tag to your posts, WordPress uses the "excerpt" function. WordPress determines where to place the "Read More" tag within your post based on how many words it counts through from the start of the post.

By default, Laurel's excerpt will count through a particular number of words before placing the "Read More" tag depending on which blog layout option you're using:

You can change the number of words by making a slight adjustment to the theme's related layout file. See the instructions for each layout option below.


TO CHANGE THE EXCERPT WORD LENGTH FOR STANDARD POSTS

Navigate to Appearance > Editor > and open up the file titled "content.php"
On Line 55, you will see this line of code:

<p><?php echo solopine_string_limit_words(get_the_excerpt(), 26); ?>…</p>


Do you notice the "26" number value in that code? This is the number of words the standard post layout's excerpt will display before automatically adding in the "Read More" button. 

You can change the "26" number value to whatever number you prefer.
Please save changes to the file when finished.



TO CHANGE THE EXCERPT WORD LENGTH FOR LIST LAYOUT POSTS

Navigate to Appearance > Editor > and open up the file titled "content-list.php"
On Line 24, you will see this line of code:

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


Do you notice the "18" number value in that code? This is the number of words the list post layout's excerpt will display. 

You can change the "18" number value to whatever number you prefer.
Please save changes to the file when finished.



TO CHANGE THE EXCERPT WORD LENGTH FOR GRID LAYOUT POSTS

Navigate to Appearance > Editor > and open up the file titled "content-grid.php"
On Line 22, you will see this line of code:

<p><?php echo solopine_string_limit_words(get_the_excerpt(), 15); ?>…</p>


Do you notice the "15" number value in that code? This is the number of words the list post layout's excerpt will display. 

You can change the "15" number value to whatever number you prefer.
Please save changes to the file when finished.


41. Add Category Index to the Homepage or Blog in Alder

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

 




Alder 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: Alder's Category Index Shortcode.


Alternatively, if you wish to display a Category Index on your homepage or blog page which contains your published 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:

[alder_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 23 down from the top of the document, you'll see this line of code:

<div id="main" <?php if(get_theme_mod('alder_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('[alder_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('[alder_index title="Featured Desserts for Autumn" cat="desserts" amount="3" cols="3" display_date="no" display_title="yes"]'); ?>
    <?php echo do_shortcode('[alder_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. 


42. Targeting text elements in Redwood: Change font size

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



Would you like to change the font size of any of Redwood's text elements? Below, we've noted nearly all of Redwood'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 code next to it, and paste it into
WordPress Dashboard > Appearance > Customize > Custom CSS.
We've listed each item with its default font size, so feel free to adjust it to whatever pixel size you prefer.

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: 14px;}
  
/* ----- TOP-BAR ----- */
/* Top-bar menu items */   #nav-wrapper .menu li a {font-size: 11px;}
/* Top-bar social icons */   #top-social a {font-size: 14px;}
/* Top-bar search text */   #searchform input#s {font-size: 12px;}
  
/* ----- SLIDER OVERLAY ----- */
/* Slider category */   .feat-overlay .cat a {font-size: 11px;} 
/* Slider post title */   .feat-overlay h2 a {font-size: 24px;}
/* Slider read more button */   .feat-more {font-size: 11px;}
 
 
/* ----- PROMO BOXES ----- */
/* Promo box title */   .promo-overlay h4 {font-size: 14px;}
 
 
/* ----- POST HEADER ----- */
/* Post header title */   .post-header h2 a, .post-header h1 {font-size: 24px;}
/* Post header category */    .post-header .cat a {font-size: 11px;}
/* Post header date */   .post-date {font-size: 14px;} 
 
 
/* ----- POST & PAGE CONTENT ----- */
/* Theme's body text */    p {font-size: 14px;}
/* Post/Page blockquotes */   .post-entry blockquote p {font-size: 18px;}
/* Post/Page numbered lists & bulletted lists */   .post-entry ul li, .post-entry ol li {font-size: 14px;}
/* Post 'Continue Reading' button */   .more-link {font-size: 11px;}
/* Image captions within a post */    .wp-caption p.wp-caption-text {font-size: 16px;} 
 
/* Post/Page H-tags */
.post-entry h1 {font-size: 24px;}
.post-entry h2 {font-size: 21px;}
.post-entry h3 {font-size: 19px;}
.post-entry h4 {font-size: 17px;}
.post-entry h5 {font-size: 15px;}
.post-entry h6 {font-size: 13px;}
 
 
/* ----- ARCHIVE PAGE ----- */
/* Browsing category, tag, etc. banner text */   .archive-box span {font-size: 17px;}
/* Banner's category, tag, etc. title */   .archive-box h1 {font-size: 16px;}
 
 
/* ----- POST & PAGE FOOTER ----- */ 
/* Post/page footer share icons */   .post-share-box.share-buttons a {font-size: 14px;}
/* Post/page "By" text */   .post-share-box.share-author span {font-size: 14px;}
/* Post/page footer author name */   .post-share-box.share-author a {font-size: 13px;}
/* Post comment counter - number */   .post-share-box.share-comments a span {font-size: 14px;}
/* Post comment counter - 'comments' text */   .post-share-box.share-comments a {font-size: 14px;}
 
 
/* ----- AUTHOR BOX ----- */
/* Post author name */   .author-content h5 a {font-size: 15px;}
/* Author bio text */   .author-content p {font-size: 14px;}
/* Author social icons */   .author-content .author-social {font-size: 14px;}
 
 
/* ----- YOU MIGHT ALSO LIKE ----- */
/* Section's title */   .post-related .post-box-title {font-size: 12px;}
/* Post titles */   .item-related h3 a {font-size: 14px;}
/* Post date */   .item-related span.date {font-size: 13px;}
 
 
/* ----- POST COMMENTS ----- */
/* Section's title */   .post-comments .post-box-title {font-size: 12px;}
/* Leave a reply */   #respond h3 {font-size: 11px;}
/* Name, email, website, etc. */   #respond label {font-size: 13px;}
/* Post comment button */   #respond #submit {font-size: 10px;}
/* Commentator's name */   .thecomment .comment-text span.author, .thecomment .comment-text span.author a {font-size: 13px;}
/* Comment's date & time */   .thecomment .comment-text span.date {font-size: 12px;}
/* Comment's text */   .comment-text p {font-size: 14px;}
 
 
/* ----- HOMEPAGE POST PAGINATION ----- */
/* Homepage Older Posts/Newer Posts */   .pagination a {font-size: 11px;}   
 
 
/* ----- SIDEBAR WIDGETS ----- */
/* Widget titles */   .widget-title {font-size: 11px;}
/* Latest posts widget post titles */   .widget ul.side-newsfeed li .side-item .side-item-text h4 a {font-size: 13px;}
/* Latest posts widget date */   .widget ul.side-newsfeed li .side-item .side-item-text .side-item-meta {font-size: 12px;}
/* WP's recent posts widget items */  .widget_recent_entries ul li a {font-size: 14px;}
/* WP's archive widget items */   .widget_archive ul li a {font-size: 14px;}
/* WP's category widget items */   .widget_categories ul li a {font-size: 14px;}
/* About widget text */   .about-widget p {font-size: 13px;}
/* About widget title text */   .about-title {font-size: 12px;}
/* Social widget icons */ .social-widget a i {font-size: 16px;}
/* Newsletter widget headline */   .mc4wp-form label {font-size: 15px;}
/* Newsletter widget button */   .mc4wp-form input[type=submit] {font-size: 10px;}
 
 
/* ----- FOOTER AREA ----- */
/* Instagram widget title */   .instagram-title {font-size: 14px;}
/* Footer social icons */  #footer-social a {font-size: 12px;}
/* Footer social icon text */   #footer-social a span {font-size: 12px;}
/* Footer copyright/disclaimer text */  #footer .copyright {font-size: 12px;}

43. Redwood's Category Index Shortcode

Redwood includes a shortcode which allows you to display a number of posts from a particular category in a grid-like 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. 



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. Be sure to insert the shortcode into the WordPress "Shortcode" block!

The basic shortcode looks like:

 

[redwood_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 available parameters. 

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
display_date="no"         // yes/no to display date
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

[redwood_index title="travel"]

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




CATEGORY

[redwood_index cat="lifestyle"]

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

PLEASE NOTE: You need to use your category "slug" name. A slug is a unique name WordPress assigns your category. To double-check your category slug names, navigate to WP Dashboard > Posts > Categories.

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:

[redwood_index title="Latest Lifestyle Posts" cat="lifestyle"] 



 

AMOUNT OF POSTS

[redwood_index amount="4"]

We've inserted the parameter amount="" into the standard [redwood_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:

[redwood_index title="Where in the world...?" cat="travel" amount="4"]




COLUMNS

[redwood_index cols="4"]

We've inserted the parameter cols="" into the standard [redwood_index] shortcode. "Cols" refers to how many columns the category index grid will display your posts in.   Redwood'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:

[redwood_index title="Where in the world...?" cat="travel" amount="4" cols="4"]



 

DISPLAY POST TITLE?

[redwood_index display_title="no"]

We've inserted the parameter display_title="no" into the standard [redwood_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. 

[redwood_index title="Where in the world...?" cat="travel" amount="4" cols="4" display_title="no"]


DISPLAY POST CATEGORIES?

[redwood_index display_cat="yes"]

We've inserted the parameter display_cat="" into the standard [redwood_index] shortcode.  This will enable/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. 

[redwood_index title="Where in the world...?" cat="travel" amount="4" cols="4" display_cat="yes"]



DISPLAY POST IMAGE?

[redwood_index display_image="no"]

Inserting the parameter display_image="" into the standard [redwood_index] shortcode will disable your post images. By default, the post images will be displayed.  




DISPLAY CATEGORY/VIEW ALL LINK?

[redwood_index cat_link="no"]

We've inserted the parameter cat_link="" into the standard [redwood_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. 

[redwood_index title="Where in the world...?" cat="travel" amount="4" cols="4" display_cat="yes" cat_link="no"]



CUSTOM CATEGORY LINK TEXT

[redwood_index cat_link_text="all hikes"]

We've inserted the parameter cat_link_text="" into the standard [redwood_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. 

[redwood_index title="Where in the world...?" cat="travel" amount="4" cols="4" display_cat="yes" cat_link_text="All Destinations"]



SET POST OFFSET

[redwood_index offset="3"]

By default, the shortcode will pull in your most recently published post in general or within a given category (if you've assigned a specific 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 [redwood_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: 

[redwood_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! Stack your shortcodes upon each other to create dynamic pages of content! Be creative!

44. Make Redwood's slider full-width

Please Note: This FAQ Article is specifically for the Redwood theme.



Redwood's featured area slider, by default, will be set at 1080 x 530 pixels. If you would like to have the slider be full-width and span the entire width of your page, you can follow the steps noted below.







Default Homepage w/ Post Feed


Open up "index.php".
From Line 7 - Line 9, you will see the following block of code:

<?php if(get_theme_mod( 'sp_featured_slider' ) == true) : ?>
    <?php get_template_part('inc/featured/featured'); ?>
<?php endif; ?>


Copy this block of code in your theme file and paste it onto blank Line 2 (right below where it says "php get_header"). Be sure to go back down and delete that first block of code, otherwise you will have 2 sliders appearing.
Save changes to the file when you're finished.

Please note: With a full-width slider, you will likely want to use featured images that are at least 1920px in width in order to avoid grainy slider images. By default, the slider's height is 530px. 





Static Full-Width Page


For full-width static pages w/ slider enabled, open up your theme file titled "page-fullwidth-slider.php".
On Line 12, you will see this bit of code:

<?php get_template_part('inc/featured/featured'); ?>


Copy this line of code and paste it onto blank Line 7 (directly below where it says "php get_header"). Be sure to go back down and delete that original line of code previously on Line 12, otherwise you will have duplicate sliders displaying.
Save changes to the theme file when finished.

Please note: With a full-width slider, you will likely want to use featured images that are at least 1920px in width in order to avoid grainy slider images. By default, the slider's height is 530px. 




Static Standard (Sidebar) Page


For standard static pages (sidebar is enabled) w/ slider, open up your theme file titled "page-slider.php".
On Line 12, you will see this bit of code:

<?php get_template_part('inc/featured/featured'); ?>


Copy this line of code and paste it onto blank Line 7 (directly below where it says "php get_header"). Be sure to go back down and delete that original line of code previously on Line 12, otherwise you will have duplicate sliders displaying.
Save changes to the theme file when finished.

Be sure to save changes to the theme file when you're finished.

Please note: With a full-width slider, you will likely want to use featured images that are at least 1920px in width in order to avoid grainy slider images. By default, the slider's height is 530px. 


45. Add a timer to Laurel's slider

Please note: This FAQ article is specifically for the Laurel theme.


To add a timer to Laurel's featured area slider in order to make the slides rotate automatically, we can make a slight adjustment to the theme's code.

First, we like to recommend installing a code editor plugin such as WPide in order to not only access the necessary theme file, but to also provide line numbers within the theme file itself. This makes following the below instructions much more easy.

Once you've installed WPide, you can navigate to  WP Dashboard > WPide > themes > laurel > "js" folder > and open up "solopine.js".  

Between Lines 31 - 45, you should see this block of code for the slider:

// BXslider
    
    $('#featured-area .bxslider, .fullimage-gallery .bxslider').bxSlider({
        adaptiveHeight: true,
        mode: 'fade',
        pager: false,
        /*auto: ($(".bxslider div.slide-item").length > 1) ? true: false,*/
        auto: false,
        pause: 7000,
        nextText: '<i class="fa fa-angle-right"></i>',
        prevText: '<i class="fa fa-angle-left"></i>',
        onSliderLoad: function(){
            $(".sideslides").css("visibility", "visible");
        }
   });

You can replace that block of code with the following block of code instead:

// BXslider
    
    $('#featured-area .bxslider, .fullimage-gallery .bxslider').bxSlider({
        adaptiveHeight: true,
        mode: 'fade',
        pager: false,
        auto: ($(".bxslider div.slide-item").length > 1) ? true: false,
        pause: 7000,
        nextText: '<i class="fa fa-angle-right"></i>',
        prevText: '<i class="fa fa-angle-left"></i>',
        onSliderLoad: function(){
            $(".sideslides").css("visibility", "visible");
        }
    });

Do you see the bit in the new code that says "pause: 7000"? This tells WordPress how often to switch the slide. It is measured in milliseconds, so a number value of "7000" will change the slide once every 7 seconds.  You're welcome to increase or decrease this number value to whatever speed you prefer.

Please be sure to save changes to the file when finished.  If you have a cache tool operating on your WP or browser, please also clear the cache to see the change.


PLEASE NOTE!

If you have post titles appearing in the Featured Area Slider which fall onto different lines (for example, your post title is so long it appears on 2 lines within the Slider), the content below the Slider will be pushed & pulled up and down as the slider rotates. We highly recommend keeping your Slider post titles all on 1 line or all on 2 lines in order to avoid this. 


46. How do I add the "Continue Reading" button to posts in Oleander?

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




The "Continue Reading" button in Oleander is a wonderful tool-- It gives your site's visitors a taste of your posts as well as keeps your homepage tidy & more easily navigable instead of displaying 100% of every post.

Oleander gives you the option of either manually adding the "Continue Reading" link to each post, or, auto-applying the "Continue Reading" link to all posts with the click of a button. Both options have pros & cons. We'll go over the differences between the two and how to enable either option below.





MANUALLY ADDING THE CONTINUE READING LINK:

Also known as the "Read More" tag, you can add the "Continue Reading" link to a post within the post's "create/edit" screen. Some people prefer the customizability of this option as they can choose where within the post they'd like to place the button and just how much content of the post they'd like shown on the homepage. The downside is that manually inserting the "Read More" tag can be a bit tedious as it needs to be inserted into each of your posts.

For instructions on how to go about manually adding the "Read More" tag, check out: How do I add the "Continue Reading" link?



AUTO-APPLYING THE CONTINUE READING LINK:

Another option would be to have the theme automatically apply this "Read More" tag into all of your posts. This is a great option if your site already has a large number of posts that you'd rather not go through and manually apply the "Read More" tag to. Or, if you'd like the ease of simply not worrying about this extra step for all future posts.

One thing to note is that this "excerpt" function will filter out any HTML code including images at the beginning of your post (not including the Featured Image), so your excerpt will only display text, not pictures.

To auto-apply the "Read More" tag to all of your posts, you can navigate to Appearance > Customize > General Settings > scroll down a bit in the left-hand menu > choose the "Use Excerpt" option under the "Homepage/Archive Post Summary Type" section. Be sure to save.






CHANGING THE AUTO-APPLY WORD COUNT TO LENGTHEN/SHORTEN POST EXCERPTS:

If you use the option to auto-apply the "read more" tag to your posts, WordPress is using a function called "the excerpt". WordPress determines where to place the "Read More" tag within your post based on how many words it counts through from the start of the post.

By default, Oleander's excerpt will count through 80 words before inserting the "Continue Reading" link for standard posts, 24 words for grid layout posts, and 29 words for list layout posts.
You can change the number of words by making a slight adjustment to the theme's related layout file.


TO CHANGE THE EXCERPT WORD LENGTH FOR STANDARD POSTS

Navigate to Appearance > Editor > and open up the file titled "content.php"
On Line 89, you will see this line of code:

<p><?php echo sp_string_limit_words(get_the_excerpt(), 80); ?>…</p>


Do you notice the "80" number value in that code? This is the number of words the standard post layout's excerpt will display before automatically adding in the "Continue Reading" button. You can change the "80" number value to whatever number you prefer.
Please save changes to the file when finished.



TO CHANGE THE EXCERPT WORD LENGTH FOR GRID LAYOUT POSTS

Navigate to Appearance > Editor > and open up the file titled "content-grid.php"
On Line 22, you will see this line of code:

<p><?php echo sp_string_limit_words(get_the_excerpt(), 24); ?>…</p>


Do you notice the "24" number value in that code? This is the number of words the grid post layout's excerpt will display before automatically adding in the "Continue Reading" button. You can change the "24" number value to whatever number you prefer.
Please save changes to the file when finished.



TO CHANGE THE EXCERPT WORD LENGTH FOR LIST LAYOUT POSTS

Navigate to Appearance > Editor > and open up the file titled "content-list.php"
On Line 27, you will see this line of code:

<p><?php echo sp_string_limit_words(get_the_excerpt(), 29); ?>…</p>


Do you notice the "29" number value in that code? This is the number of words the list post layout's excerpt will display before automatically adding in the "Continue Reading" button. You can change the "29" number value to whatever number you prefer.
Please save changes to the file when finished.




47. Add a newsletter sign-up form widget to Rosemary

With the help of the Mailchimp for WordPress plugin, we can add a beautiful and functional newsletter sign-up form to Rosemary. 

In order to add a MailChimp newsletter sign-up form widget to your sidebar, you can follow the instructions below. We'll need to create a MailChimp Account, install the necessary plugin, and then set up your newsletter widget. 




1 ) SIGN-UP FOR MAILCHIMP

First, please ensure you have signed up and created an account with MailChimp ( https://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 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".


3 ) SETTING UP THE NEWSLETTER WIDGET

To customize your newsletter form, you can navigate to WP Dashboard > MC4WP > Forms.  On this screen, you can determine just how your newsletter form displays.

Copy and paste the following HTML code into the box on this page:

<p>
    <label>Subscribe to my Newsletter</label>
    <input type="email" id="mc4wp_email" name="EMAIL" placeholder="Your email address" required="">
</p>
<p>
    <input type="submit" value="Subscribe">
</p>


This will have your widget display a heading of "Subscribe to my Newsletter", an email input field, and a submit button. Save changes when finished. 

Then, navigate to WP Dashboard > Appearance > Customize > Custom CSS and copy & paste in the following code which will style the new widget:

/*MAILCHIMP FORM STYLINGS*/
.widget .mc4wp-form {
border: 1px solid #efefef;
padding: 15px 10px;
background-color:#efefef;
}
.mc4wp-form label {
font-size: 18px;
font-style: italic;
font-family: 'Playfair Display';
display: block;
text-align: center;
margin-bottom: 18px;
}
.mc4wp-form input {
margin-bottom: 15px;
width: 95%;
}
.mc4wp-form input[type=email]  {
font-style: italic;
font-size: 12px;
display: block;
margin-left: auto;
margin-right: auto;
}
.mc4wp-form input[type=submit] {
display: block;
margin-left: auto;
margin-right: auto;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 2px;
font-family:'Lato';
background: #000;
color: #fff;
}
.mc4wp-form button:hover, .mc4wp-form input[type=button]:hover, .mc4wp-form input[type=submit]:hover {
background:#C39F76;
color: #000;
}
.mc4wp-form input[type=email]::placeholder {
font-family:'Lato';
font-size:9px;
font-style:normal;
text-transform:uppercase;
letter-spacing:1px;
}


Save changes when finished. 


4 ) INSERT THE WIDGET

Lastly, navigate to WP Dashboard > Appearance > Widgets.

A new widget titled "MailChimp Sign-Up Form" will have appeared. Drag and drop this widget into your Sidebar area.


If you'd like help changing the colors or styling of the newsletter widget, feel free to open up a new support ticket and let us know! 

48. Automatically set all of Oleander's post pages to be full-width

Please note: This article is specifically for the "Oleander" theme. 



Oleander lets you choose your singular post page's layout on a post-by-post basis. This means you could have one post be full-width and one post with a sidebar. By default, your posts will be set to display a sidebar. 
You can adjust the layout of each post via the "Post Layout" drop-down menu within a post's create/edit screen. 

If you have lots of posts which are now displaying a sidebar and you'd like them all to be full-width instead, it can be very time-consuming to go into each post and manually change its layout. 
If you would like to automatically apply the full-width post layout to all of your posts, past and future, you can follow the steps below. 

Navigate to Appearance > Editor > and open up the file titled "single.php". 
On Line 11 of this document, you'll see this line of code:

<div id="main" <?php if($single_template == 'full-post') : ?>class="fullwidth"<?php endif; ?>>


You can replace that code with the following instead:

<div id="main" class="fullwidth">


Be sure to save changes when finished in this file. 
If you have a cache tool running on your WordPress, you may need to clear the cache afterward.

This will make all of your singular post pages be full-width automatically. 
If you ever decide you want to re-enable your ability to change a post's layout (within the post's create/edit screen), you can go back into this "single.php" file and follow these instructions backwards. 


49. How do I set up Hemlock's Instagram footer widget?

Please note: This FAQ article is specifically for the Hemlock theme.


Instagram Footer Screenshot #1


SETTING UP HEMLOCK'S INSTAGRAM FOOTER


Important to Note: The Instagram Footer widget feature was added to Hemlock on April 6, 2015 in version 1.5. Please ensure you are running at least version 1.5, otherwise this feature will not work.



1 ) Ensure you have installed & activated the plugin called "WP Instagram Widget

Once you activate the Hemlock theme, there will be a notification banner across the top recommending you install & activate particular plugins for the theme. One of which is the WP Instagram Widget plugin we've included stylings for in the theme. Be sure to install & activate this plugin.

2 ) Navigate to WP Dashboard > Appearance > Widgets

3 ) Drag the Instagram widget into the "Instagram Footer" widget area on the right. 

4 ) Customize your Instagram Footer widget. 

We recommend setting the "Number of photos" to be "8". 
And choosing "Large" for the "Photo size".


IMPORTANT ITEMS TO NOTE:


screenshot's Instagram footer images attributed to the very talented @withhearts

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



51. Setting up Laurel's Logo & Header Options

Please note: This article is specifically for the Laurel theme



Laurel has a number of ways to customize your header area in regards to a logo image and how it's displayed. Below, we'll go through the various options which include having your logo image display in the top-bar, having your logo image display above the top-bar, and creating a text logo.


ADDING A LOGO IMAGE TO LAUREL'S DEFAULT HEADER




By default, Laurel's logo image will display on the left of its top-bar. To add a logo image, you can navigate to WP Dashboard > Appearance > Customize > Header & Logo Settings > Upload Logo > and upload your preferred logo image here. 

Your logo image will automatically override Laurel's demo logo image. 

Laurel's top-bar element is 94px tall.
You can use this as a guide when creating your preferred logo image. 

That being said, you can also adjust the maximum width of the logo image you upload within the section titled "Logo Max Width in %".  If you logo image is appearing too large, you can reduce the percentage value down until you find a sizing you prefer. 





LAUREL'S HEADER OPTION #2 - MOVE YOUR LOGO BELOW THE MENU


Having your logo image in the top-bar can be limiting in regards to your logo image's size. Because of this, we've added a secondary header option which allows you to move your logo image below the top-bar. 




To enable the secondary header option, navigate to WP Dashboard > Appearance > Customize > Header & Logo Settings > and check the box for the option titled "Use Secondary Header Layout". 

Your logo image will automatically display at 100% of it's original width. 

You can then use the options titled "Secondary Header Logo Padding Top" and "Secondary Header Logo Padding Bottom" to adjust the spacing above and below your logo image. The units of measurement are pixels. Change the default "0" number values to whatever you like; play around with the padding until you find the spacing you like the best. 





USING A TEXT LOGO

To have your logo be a bit of text instead of an actual image, you can use Laurel's "Text Logo" option. This option works for both the default header where the logo is in the top-bar and also for the secondary header layout where the logo is below the top-bar. It uses the Google Font called "Karla". 

First, navigate to WP Dashboard > Appearance > Customize > Site Identity. Here, you can enter your preferred logo text in the form titled "Site Title". 

Next, navigate to WP Dashboard > Appearance > Customize > Header & Logo Settings
Check the box for the option titled "Use Text Logo". 

Your logo will automatically display the title you entered within "Site Identity".

To adjust your text logo's font-size, you can change the number value within the form titled "Text Logo Size (px)". 

To make your text logo more bold, you can select the "Bold" option within the section titled "Text Logo Font Weight". 

And, to change your text logo's color, you can use the color picker form titled "Text Logo Color". 






52. How to add a comment counter to Hemlock

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





To add a comment counter to Hemlock's homepage under each post, you can follow a few easy steps. You'll need to make some slight adjustments to your theme's code. To do so, you can access the theme's file
via WordPress Dashboard > Appearance > Editor, via FTP, or via a code editor plugin such as WPide (recommended).

Please note: This will only add a comment counter to your homepage posts if you are using the standard or full-width post layout option. The Grid post layout does not have the social share icons visible on the homepage.


Within the "content.php" file on Line 96, you'll see the following line of code:

<?php comments_popup_link( '<span class="share-box"><i class="fa fa-comment-o"></i></span>', '<span class="share-box"><i class="fa fa-comment-o"></i></span>', '<span class="share-box"><i class="fa fa-comment-o"></i></span>', '', ''); ?>




You can replace that line of code with the following code instead:

<div class="comment-counter"><?php comments_popup_link('<span class="share-box">0 <i class="fa fa-comment-o"></i></span>', '<span class="share-box">1 <i class="fa fa-comment-o"></i></span>', '<span class="share-box">% <i class="fa fa-comment-o"></i></span>', '', ''); ?></div>


Be sure to save the file when you're finished.
Lastly, within WordPress Dashboard > Appearance > Customize > Custom CSS, copy & paste the following:

.comment-counter {display: inline-block;}


You're all set to go now!

53. Why does my full-width grid layout suddenly look odd in Hemlock?

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



The most common reason Hemlock's full-width grid layout goes from a nice 3-column structure to an awkwardly-spaced 2-column structure is due to a change in font. Sometimes when a user changes the font within grid layout, the font will oddly add an extra pixel or so. These extra pixels can "push" the 3rd post in a row down to a new line.

To resolve this, you can copy & paste the following into Appearance > Customize > Custom CSS:

.sp-grid li {margin-right: 15px;}
@media only screen and (min-width: 768px) and (max-width: 960px) {.sp-grid li:nth-child(3n+3) {margin-right: 15px;}}
@media only screen and (min-width: 480px) and (max-width: 767px) {.sp-grid li:nth-child(3n+3) {margin-right: 15px;}}


If for some reason the above does not work for you, please feel free to open up an new support ticket and let us know.

54. Have Oleander's slider display a single static image

Please note: This article is specifically for the Oleander theme



If you'd like to have Oleander's Featured Area Slider display 1 image and not function as a slider at all, we can disable the left/right buttons and hide the text overlay.

1 ) CREATE A PAGE FOR YOUR IMAGE 

Because the slider only recognizes posts or pages, we'll create a "dummy" page. Give the page any title you'd like.  Assign your desired image as the page's "Featured Image".  To learn how to assign one, check out: How do I add a Featured Image?

When finished, publish the page. 

2 ) DETERMINE YOUR PAGE'S ID NUMBER

Next, we'll need to determine the unique ID number of your new dummy page you just created. Every time you publish a post or page, WordPress assigns it a number. We will use our newly-created dummy page's ID number to pull it into the slider. 

To learn how to determine a page's ID number, please check out: How to determine a post, page, or category ID

3 ) ADD YOUR IMAGE TO THE SLIDER

Navigate to WP Dashboard > Appearance > Customize > Featured Area Settings. 

Where it says "Select featured post/page IDs", enter your page's ID number into the field.  Your dummy page's image should now be displaying in your slider. 

4 ) HIDE THE SLIDER'S TEXT & HYPERLINK OVERLAY

To then hide the text overlay and the hyperlink function that covers the slider's image (so visitors can't click through to your dummy page), you can navigate to WP Dashboard > Appearance > Customize > Custom CSS, and copy & paste in the following code:

.feat-overlay {display: none;}
.featured-area .bx-controls-direction {display: none;}

Save changes. 

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


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


57. Have Laurel's slider display 1 static image


If you'd prefer to have Laurel's Featured Area Slider simply display a static image without the text or overlay box, it's a piece of cake! 

First, create a new page (WP Dashboard > Pages > Add New). You can give this page any title you like, for example, "Slider Image". Then, assign your desired image as the page's Featured Image. Publish the page when finished. 

You'll want to determine this new page's unique ID number. Not sure how? Check out our guide here: How to determine a post, page, or category ID.

Navigate to WP Dashboard > Appearance > Customize > Featured Area Settings > Select featured post/page ID > and insert your page's unique ID number into the field here. 

Lastly, check the various options beneath the field to hide the category, page title, excerpt text, and "Read More" button. Save changes when finished. 

58. How to add a timer to Hemlock's featured area slider

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


By default, Hemlock's featured area slider will not rotate slides automatically. If you'd like to add this feature in, we'll go through the necessary steps below.

Hemlock's Slider Timer Screenshot #1


First, you will need to access Hemlock's "solopine.js" file. This theme file is not within the main theme file directory, so you will not be able to access it simply via Appearance > Editor. You can either edit the theme file via FTP, or, via a code editor plugin. We recommend the code editor plugin called WPide.

Once WPide is installed & activated, you can navigate to WP Dashboard > WPide > themes > hemlock > "js" folder > and open up the file titled "solopine.js".

Beginning on Line 41, you will see the little section titled "//slider". It will look like this:

 // slider
$("#owl-demo").owlCarousel({
    navigation : false,
    items : 3,
    itemsDesktop : [1199,3],
    itemsDesktopSmall : [980,2],
    itemsTablet: [768,2],
    itemsTabletSmall: [568,1],
    itemsMobile : [479,1],
});


We will add a new parameter at the bottom of the list to insert the timer feature. Underneath the parameter "itemsMobile", copy & paste in the following on a new, blank line:

autoPlay : 5000


When finished, your "//slider" section will now look like this:

// slider
$("#owl-demo").owlCarousel({
    navigation : false,
    items : 3,
    itemsDesktop : [1199,3],
    itemsDesktopSmall : [980,2],
    itemsTablet: [768,2],
    itemsTabletSmall: [568,1],
    itemsMobile : [479,1],
    autoPlay : 5000
});


The timer is measured in milliseconds, so the "5000" value represents the slides rotating every 5 seconds.
You can increase or decrease the rotation time to whatever you'd prefer.
Be sure to save the file when you're finished.


59. Add hyperlink text menu to footer

If you'd like to insert a simple horizontal text menu into your footer area, it's simple to do with some basic HTML and CSS! 

Our blog themes will always have at least one text area in the footer of the theme. Generally, these are used to insert copyright text, though can also be used for any sort of notification or message you'd like. You can use this text box to insert a simple horizontal text menu. 

Navigate to WP Dashboard > Appearance > Customize > Footer Settings > and locate your Footer's text area. There may be more than one. 

In this example, I'll be using the Alder theme's copyright text field called "Footer Text Left".




To the RIGHT of the copyright text that is already there (if you still wish to keep the copyright text),  paste in this code:

<div id="footer-menu">
<ul>
<li><a href="LINK-URL">Menu Item 1</a></li>
<li><a href="LINK-URL">Menu Item 2</a></li>
<li><a href="LINK-URL">Menu Item 3</a></li>
<li><a href="LINK-URL">Menu Item 4</a></li>
</ul>
</div>

In the above code, be sure to replace the "LINK-URL" dummy text with the URL you want link to direct to. Save changes when finished. 

Lastly, navigate to WP Dashboard > Appearance > Customize > Custom CSS > and insert this code:

#footer-menu {
display: block;
margin-top: 15px;
}
#footer-menu ul li {
display: inline-block;
margin-right: 15px;
}

Be sure to save changes when finished.

 

60. How do I add social media icons to Laurel?

Please note: This FAQ Article is specifically for the Laurel 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.

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 "Laurel: Social Icons" widget to your Sidebar area. 

Once the widget is added to your Sidebar area, click the widget's heading to drop-down 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 Laurel 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 Laurel'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 Laurel.
On Font Awesome's icon page, you can see that the code for the VK icon is "vk".




ADDING THE ICON TO LAUREL'S TOP-BAR & FOOTER:





First, ensure you have the bundled plugin called "Laurel 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 "Laurel Core" plugin. 

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

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

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

On what is now line 30, 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 50, 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 51, 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 LAUREL'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 "Redwood 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 74, 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 75, 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!




61. 1st post displays full, followed by grid layout in Florence

Please note: This FAQ article is specifically for the Florence theme.



If you're interested in having your homepage display the first post in full/standard layout, followed by the rest of the posts displaying in grid layout, you can follow the steps below.




First, you'll want to install the code editor plugin called WPide (http://wordpress.org/plugins/wpide) which will allow you to access the necessary theme files in order to edit them. 

Once WPide is installed and activated, you can navigate to WP Dashboard > WPide > themes > florence.

Open up the "index.php" theme file. On Line 11, you'll see this following line of code:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>


Immediately BELOW this line of code (on the blank Line 12), copy & paste the following:

<?php if( $wp_query->current_post == 0 && !is_paged() ) : ?>
    <?php get_template_part('content'); ?>
<?php else : ?>




Then, on what is now Line 21, you will see this code:

<?php endif; ?>


On the blank line directly below this code, copy & paste the following code.
It is exactly the same as the previously noted code, so you will have this bit of code listed twice-- once on Line 21 and again on Line 22:

<?php endif; ?>




The big block of code beginning on Line 11 and ending on Line 22 should now look like this:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <?php if( $wp_query->current_post == 0 && !is_paged() ) : ?>
        <?php get_template_part('content'); ?>
    <?php else : ?>        
    <?php if(get_theme_mod('sp_home_layout') == 'grid' || get_theme_mod('sp_home_layout') == 'grid-full') : ?>
        <?php get_template_part('content', 'grid'); ?>
    <?php elseif(get_theme_mod('sp_home_layout') == 'list' || get_theme_mod('sp_home_layout') == 'list-full') : ?>    
        <?php get_template_part('content', 'list'); ?>
    <?php else : ?>
        <?php get_template_part('content'); ?>
    <?php endif; ?>
    <?php endif; ?>




Be sure to save the changes to "index.php" when finished.

Next, navigate to Appearance > Customize > Custom CSS box > and paste in this code:

.grid-layout {
display:grid;
grid-template-columns:1fr 1fr;
grid-gap:30px;
}
.grid-layout li {
margin:0;
}
.grid-layout article:first-child {
grid-column: 1 / -1;
} @media only screen and (max-width: 767px) {
.grid-layout {
grid-template-columns:1fr;
}
.fullwidth .grid-layout li, .regular .grid-layout li {
width:100% !important;
}
} @media only screen and (min-width: 480px) and (max-width: 768px) {
.grid-layout {
grid-template-columns:1fr 1fr;
}
.fullwidth .grid-layout li, .regular .grid-layout li {
width:100% !important;
}
}

Save changes. 

Lastly, go to Appearance > Customize > General Settings and ensure your homepage layout is set to one of the"grid layout" options.

And voila! You're all set.

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


63. How to widgetize a page in Hickory

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


To widgetize a page in order to take advantage of Hickory's widgetized layout functionality, you'll first want to create a page. Go to Pages > Add New. Enter the page's title (for example "Our New Page"), choose the various desired settings for the page, and click "Publish".

Hickory Widgetized Page Screenshot #1


Next, navigate to Appearance > Widget Areas > Add New.
For "Title", enter the title of the page you previously created that you'd like to widgetize (ex: "Our New Page"). Below, within the "Conditions" area and the "Pages" tab, check the box next to the page you created. Click "Publish".

Hickory Widgetized Page Screenshot #2


Navigate over to Appearance > Hickory Options > Widgetized Pages & Categories. Within this section is a box titled "Pages". Click anywhere within the blank space of this box and a menu will appear featuring all of the widgetized pages you've created. Select your newly created page from this list and then click "Save Changes".

Hickory Widgetized Page Screenshot #3


Lastly, go to Appearance > Widgets. In the right-hand sidebar, you'll notice your new widgetized page is listed. Now we can add, arrange, and edit the widgets we'd like to place within this page. Drag the widgets featured on the left side of the page and drop them into your page's widget area on the right.

Hickory Widgetized Page Screenshot #4



Screenr Video Walk-thru

Want more? Check out: Screenr Video for "How to widgetize a page in Hickory"


64. How do I auto-apply the "Continue Reading..." link on all posts in Hemlock?

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


The "Continue reading..." link in Hemlock is an excellent tool-- It gives your site's visitors a taste of your posts as well as keeps your homepage tidy & more easily navigable.  

By default, you will need to manually insert WordPress's Read More tag into your posts in order to have the "Continue reading..." link appear on your homepage posts. To learn how to go about this, check out: How do I get the "Continue reading" link?

Another option would be to have the theme automatically apply this Read More tag into all of your posts. This is a great option if your site already has a large number of posts that you'd rather not go through and manually apply the Read More tag to. Or, if you'd like the ease of simply not worrying about this extra step for all future posts.

Hemlock Read More Screenshot #1


To have the "Continue reading..." link auto-apply to all legacy & future posts, open up the theme's "content.php" file. You can access this file via WP Dashboard > Appearance > Theme Editor > and open the "content.php" file. 

On Line 79, you'll see the code for the "Continue reading..." link. It looks like this:

<?php the_content(esc_html__('Continue Reading...', 'hemlock')); ?>


Replace that line of code with the following code instead:

<?php if(is_single()) : ?>
    <?php the_content(esc_html__('Continue Reading...', 'hemlock')); ?>
<?php else : ?>
    <p><?php the_excerpt(); ?></p>
    <p><a href="<?php echo get_permalink(); ?>">Continue Reading...</a></p>
<?php endif; ?>


Be sure to save the changes to your theme file when you're finished.

Now, to set the number of words each post will display before implementing the Read More tag, we'll need to open up our theme's file titled "functions.php".

Navigate to WP Dashboard > Appearance > Theme Editor > and open up "functions.php"

At the bottom of this document, beginning on Line 272, you'll see the section titled "The Excerpt".
Within this section, there is a line that looks like:

return 19;

The "19" number value determines the number of words in your post that will display on the homepage before the Read More tag kicks in. You can change this number value to whatever you prefer. 

Be sure to save any changes to this file when you're finished.


65. Make Florence's logo area full-width

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






By default, Florence's logo image is centered within a container that is 1080px wide. If you have a larger logo image or full-width hero image that you'd like to exceed this 1080px width container, you can follow these steps to remove the width restriction on the logo image area.

We will need to access the theme's "header.php" file.
You can typically access this file via Appearance > Editor, via FTP, or via a code editor plugin
such as WPide (recommended).

Within "header.php" file, on Line 72, you will see the following code:

<div class="container">

Delete this line of code.

Then, on Line 96, you will see this bit of code:

</div>

You can also delete this little bit of code.

Please note: There will be two /div bits of code a couple lines apart from each other. It is important you delete the one on Line 96, and leave the other one as is.

Be sure to save the file when finished.

66. How do I get the "Continue Reading" / "Read More" link in my posts?

By default, your entire post will display on the homepage--sometimes this can make scrolling your homepage a bit lengthy! The "Continue Reading" or "Read More" button are a great option to implement if you'd like to shorten these posts up. You can insert the WordPress "Read More Tag" where you'd like the "Continue Reading" or "Read More" button to appear (text will depend on which theme you're using).


ADDING THE READ MORE TAG:

When creating/editing a post, hover your cursor beneath the Gutenberg block where you want the "Read More Tag" to go.

 



Click the little plus sign icon and choose the block titled "More". If you don't see it listed right away, scroll down to the section titled "Layout Elements" and select the "More" block here. 

 

A horizontal dash line will appear in your post-- this is where your "Continue reading" or "Read More" button will appear when your post is displayed on the homepage/archive pages. Any text you put underneath that horizontal dash line will not appear on your homepage/archive pages.

Change your mind? To move the "Read More" tag, click on the "More" block in your post and then use the up or down arrows to shift it around. 





AUTO-APPLYING THE READ MORE TAG:


Some people enjoy the control that manually adding the Read More tag provides-- you can choose just how much of each post to show on the homepage. Though others may prefer to auto-apply this feature to all posts. If you're interested in learning how to do this, please see the following FAQ articles:


To learn more about this Read More Tag in general, you can take a look at this: 

http://en.support.wordpress.com/splitting-content/more-tag/

67. Add Category Index to the Homepage or Blog in Sprout & Spoon

Please note: This article is specifically for the Sprout and Spoon theme. 


Sprout & Spoon 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: Sprout & Spoon's Category Index Shortcode.


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

First, create your desired Category Index Shortcode (for instructions on how to do this, please reference the tutorial article link 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:

[sp_index title="Featured Desserts for Autumn" cat="desserts" amount="3" cols="3" display_date="no" display_title="yes"]


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

On Line 25 down from the top of the document, you'll see this line of code:

<div id="main" <?php if(get_theme_mod('sprout_spoon_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, it will look similar to this:


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


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('[sp_index title="Featured Desserts for Autumn" cat="desserts" amount="3" cols="3" display_date="no" display_title="yes"]'); ?>
    <?php echo do_shortcode('[sp_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. 


68. Adding post pagination to Rosemary & Redwood

Please note: This article is specifically for the Rosemary & Redwood themes. 





If you would like to insert links titled "Previous Post" and "Next Post" on your singular post pages, it's super easy! 

You can install the plugin called WP Post Navigation which, when activated, will automatically insert links to the previous and next post of whichever post you are currently viewing.  

 


  

CUSTOMIZING

You can customize the plugin's settings to adjust how these post pagination links are displayed. To do this, you can navigate to WP Dashboard > Settings > WP Post Navigation.

By default, the pagination links will display the title of the previous and next posts. 
If you would prefer to have them simply say "Previous Post" and "Next Post", you can check the box next to the option titled "Custom Text", and then enter what you would like the links to say. 

  

  

ADJUSTING LINK SPACING & LINE HEIGHT

When using this plugin, we've noticed the pagination links and their arrows may appear quite large and close to the end of the post's text/content. If you would like to add a bit of spacing and vertically center the link text, you can navigate to WP Dashboard > Appearance > Customize > Custom CSS, and copy & paste in the following code:

.wp-post-navigation {margin: 80px 0;}
.wp-post-navigation a {line-height: 26px;}

 

 

COLOR & FONT SIZE

If you would like to change the links' colors or perhaps change the links' font-sizing, feel free to open up a new support ticket and let us know! We'd be happy to provide the necessary CSS code to make it happen. 

69. Installation & Setup: Getting Started with Hemlock

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




Whether you're brand new to WordPress or would just like a quick lesson on basic Hemlock 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.

To skip directly to a specific section in the article, please use this index:




INSTALLING THE THEME

So you've purchased Hemlock & you're ready to get started-- great!

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

Within the unzipped theme package, you will find a number of folders such as demo content, logo image files, etc. There will be 1 zipped folder within, titled "hemlock.zip".

Important: DO NOT unzip this folder! This "hemlock.zip" folder should remain zipped.

 



"hemlock.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 "hemlock.zip" file > Click the "Install Now" button.

Screenshot


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 Hemlock theme!

Screenshot



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





Back to Top



CREATING A POST

Hemlock 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 post, go to WordPress Dashboard > Posts > Add New


POST FORMATS

Pre-WP 5.0/Gutenberg update: Above your content box & toolbar, you'll see a series of tabs titled Standard, Gallery, Video, and Audio. Select whichever tab you'd like your post format to be in. Each tab will give you different input boxes depending on the content you'd like to add.

After WP 5.0/Gutenberg update: 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: http://solopine.com/hemlock/favorite/



Gallery Post

A gallery post allows you to create a slideshow-type gallery at the top of your post. After clicking the "Gallery" tab to choose this post format option, click the "Pick Images" button within the "Gallery Images" box that has appeared. Select whatever images you'd like from your WordPress Media Library.
Example of a gallery post: http://solopine.com/hemlock/flowers-decorations/



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. When you preview or publish your post, the video will appear.
Example of a video post: http://solopine.com/hemlock/midnight-sun-iceland/



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. When you preview or publish the post, the track will appear.
Example of an audio post: http://solopine.com/hemlock/of-monsters-and-men-dirty-paws/



FEATURED IMAGE & CATEGORIES

Once you've determined your post format, 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. 





POST LAYOUTS

You can set your singular post pages' layout globally via WP Dashboard > Appearance > Customize > General Settings > by checking or un-checking the box option titled "Enable sidebar on posts". 

When you first create a new post, its layout will automatically be set via whether or not you've selected this "Enable sidebar on posts" option or not. 

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". Within is a menu titled "Template".  Choose your desired layout option.

 




PUBLISH, SAVE, OR PREVIEW


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

You can select this via the drop-down menu on the right titled "Template".




Once you've published your new page, it will not automatically appear in your main menu. For a tutorial on adding items to your main menu, 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 page (described above)-- a category page is generated by WordPress after you add a category to your main menu.

First, ensure you've assigned the category to at least 1 post. Then, navigate to 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.




Back to Top



HOMEPAGE 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 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 homepage 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 & 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.

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



CREATING A MAIN MENU

Setting up Hemlock's main menu in the top-bar is quite simple! For a walk-through on how to go about it as well as more specific how-to tutorials, 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 post by navigating to Appearance > Customize > Post Settings > And checking the box next to "Hide featured image from top of post"




Back to Top



ADDING SOCIAL ICONS


First, please ensure you've installed and activated the bundled plugin called "Hemlock Core". You should see a notification banner across the top of your WordPress Dashboard asking you to install required plugins, including this "Hemlock Core" plugin. If you don't see this banner notification right away, you may need to navigate to WP Dashboard > Appearance. Once the "Hemlock Core" plugin is activated, the Social Media Settings section will appear within your Customizer. 

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 URL into this box unless prompted to do so. Only your related username is required.

Once you enter your username into a particular social network's text box, its icon will appear in your top-bar area and footer social icon area. If you leave a social network's box blank, the social icon will not appear in the top-bar or footer area.





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 Hemlock?



Back to Top



ENABLING THE FEATURED AREA SLIDER


SETTING UP THE SLIDER:
Hemlock's featured area slider is a full-width area toward the top of the homepage where you can feature eye-catching images from your posts. There are a few steps to ensure your slider works perfectly:


  1. First, ensure your posts have featured images assigned. This is the image that the slider will pull in to represent your post. For more information, check out: How do I add a Featured Image?
  2. To have your slide images display in a lovely, uniform size, please make sure your featured images are at least 650x440 pixels in size. If they are larger than this, WordPress can easily resize them to fit nicely. If your featured image is smaller than 650x440 pixels, WP cannot upscale the image and it will display oddly in the slider.
  3. Lastly, navigate to Appearance > Customize > Featured Area Settings > and check the box next to "Enable Featured Slider". Be sure to save. This will enable your slider on your homepage.


SLIDES DISPLAYING IN ODD SIZES?
If you're certain your images are at least the required 650x440 pixels but are still showing in varying sizes within the slider, we recommend you install & activate the plugin called Regenerate Thumbnails.
Images used in another theme are cropped to fit that theme's image containers. In order to refresh the images to their original sizes and allow Hemlock to re-crop them to fit its own containers nicely, you'll need to run this plugin.


CHOOSING YOUR SLIDER'S POSTS:

Within Appearance > Customize > Featured Area Settings, you can choose which posts appear in your featured area slider. By default, the slider will display all of your latest posts.

From the drop-down menu titled "Select Featured Category", you can also choose a particular post category to display in your slider.

Additionally, if you prefer to hand-select particular posts from a variety of categories to appear in your slider, we recommend creating a new category titled something like "Featured" which you can assign to your desired posts. To hide this "Featured" category from appearing on your posts with the other categories, check the box next to "Hide Featured Category" within Appearance > Customize > Featured Area Settings.





Interested in having just 1 large slide image instead of 3 slides?
Check out: How to make Hemlock's featured area slider display 1 large image

Or perhaps you'd like to have your slider rotate on a timer?
Check out: How to add a timer to Hemlock's featured area slider



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, your posts, and/or your archive pages (category pages, tag pages, etc.) navigate to Appearance > Customize > General Settings. Here, you can check or uncheck the boxes next to "Enable Sidebar on Homepage", "Enable Sidebar on Posts", etc.


ADDING WIDGETS TO YOUR SIDEBAR:
To add, remove, or edit your sidebar widgets, navigate to Appearance > Widgets.
On the left, you will see a list of the available widgets to choose from.
On the right, you will see a few different widget areas in the theme.

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





Back to Top


SETTING UP YOUR PROMO BOX WIDGETS


 

Hemlock includes a special widget called "Hemlock: 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 "Hemlock: 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 WIDGET


Hemlock 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 Hemlock's newsletter widget


Back to Top



The footer area is the lower portion of the theme that will appear on all pages of your site. It includes:




3 FOOTER WIDGET AREAS:
Similar to the section above regarding "Setting up your Sidebar", the footer has 3 separate widget areas where you can place widgets. To add a widget, navigate to Appearance > Widgets. On the right, you'll see the theme's different widget areas. This includes 3 widget areas titled "Footer 1", "Footer 2", and "Footer 3".

Drag an available widget from the left of this screen into one of the Footer widget areas.
To edit a widget's settings, click on the widget's heading once it's been placed in a widget area.





INSTAGRAM FOOTER AREA:
Similar to the section above regarding "Setting up your Sidebar", the footer has a widget area titled "Footer Instagram" 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". 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]





SOCIAL ICON AREA:
The footer's social icon area is directly connected with Hemlock's top-bar social icon area. To choose which social icons you'd like to appear, enter your username for each social network platform within Appearance > Customize > Social Media Settings.

For more information, please reference the section above titled "Adding Social Icons"


FOOTER LOGO/TEXT AREA:
You have the ability to add a smaller logo or image to the footer area as well as some text.
To do so, navigate to Appearance > Customize > Footer Settings. Here, you'll see a variety of options to customize your footer area, including 2 image upload areas for adding a logo image.
On our demo site, we've added a smaller version of Hemlock's logo image.

Additionally, there is a little heading titled "Footer Text". You can enter whatever text you'd like in this area and it will appear below whatever image you insert (if applicable).
On our demo site, we've added text that says: "Made with <3 in Seattle".





COPYRIGHT TEXT AREA:
At the very bottom of the theme is a bar which features a "Back to Top" button on the right and the option to include copyright or disclaimer text on the left. You are not required to include a copyright or disclaimer statement. In fact, you can type whatever you'd like in this area!

To edit the text in this Copyright Text area, look within
Appearance > Customize > Footer Settings > Footer Copyright Text.






Back to Top



Setting up your webshop

Hemlock 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 Hemlock or to see some fun customization tutorials, check out all of Hemlock's FAQ Articles here!



Back to Top

70. Rosemary's Category Index Shortcode

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



Rosemary includes a shortcode which allows you to display a number of posts from a particular category in a grid-like 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. 


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:

 

[rosemary_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 available parameters. 



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
display_date="no"         // yes/no to display date
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

[rosemary_index title="travel"]


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






CATEGORY

[rosemary_index cat="hiking"]


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

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:


[rosemary_index title="travel" cat="hiking"]




 


AMOUNT OF POSTS

[rosemary_index amount="4"]


We've inserted the parameter amount="" into the standard [rosemary_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:

[rosemary_index title="travel" cat="hiking" amount="4"]






COLUMNS

[rosemary_index cols="4"]


We've inserted the parameter cols="" into the standard [rosemary_index] shortcode.  
"Cols" refers to how many columns the category index grid will display your posts in. 
Rosemary'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:

[rosemary_index title="travel" cat="hiking" amount="4" cols="4"]




 




DISPLAY POST TITLE?

[rosemary_index display_title="no"]


We've inserted the parameter display_title="no" into the standard [rosemary_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:

[rosemary_index title="travel" cat="hiking" amount="4" cols="4" display_title="no"]






DISPLAY POST CATEGORIES?

[rosemary_index display_cat="yes"]


We've inserted the parameter display_cat="" into the standard [rosemary_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:

[rosemary_index title="travel" cat="hiking" amount="3" cols="3" display_cat="yes"]







DISPLAY POST IMAGE?

[rosemary_index display_image="no"]


We've inserted the parameter display_image="" into the standard [rosemary_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:

[rosemary_index title="travel" cat="hiking" amount="4" cols="4" display_image="no"]






DISPLAY CATEGORY/VIEW ALL LINK?

[rosemary_index cat_link="no"]


We've inserted the parameter cat_link="" into the standard [rosemary_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:

[rosemary_index title="travel" cat="hiking" cat_link="no"]






CUSTOM CATEGORY LINK TEXT

[rosemary_index cat_link_text="all hikes"]


We've inserted the parameter cat_link_text="" into the standard [rosemary_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 HIKES" 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:

[rosemary_index title="travel" cat="hiking" cat_link_text="all hikes"]






SET POST OFFSET

[rosemary_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 [rosemary_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: 

[rosemary_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! Stack your shortcodes upon each other to create dynamic pages of content! Be creative!

71. Move the post header above featured image in Florence

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




Move Post Header Screenshot #1


By default, your posts will first display the featured image, followed by the post header (post title & post categories), the post content, and lastly the post footer. If you'd like to shift the post header from below the featured image to above the featured image, you can follow these steps:

Move Post Header Screenshot #2


Open up the "content.php" theme file.
You can open this file via WP Dashboard > Appearance > Editor, or, via a
snazzy code editor plugin such as WPide.
Beginning on Line 55, you will see the following block of code:

    <div class="post-header">
        
        <?php if(!get_theme_mod('sp_post_cat')) : ?>
        <span class="cat"><?php the_category(', '); ?></span>
        <?php endif; ?>
        
        <?php if(is_single()) : ?>
            <h1><?php the_title(); ?></h1>
        <?php else : ?>
            <h2><a href="<?php echo get_permalink(); ?>"><?php the_title(); ?></a></h2>
        <?php endif; ?>
        
    </div>


Move Post Header Screenshot #3


Copy this block of code, scroll up the document, and paste it onto Line 2 (the blank line immediately following the first line of code in the file). Be sure to go back down and delete the original block of code (noted above), otherwise you'll have two post headers displaying. When finished, be sure to save the file.

Move Post Header Screenshot #4


Then, within your WP Dashboard > Appearance > Customize > Custom CSS, copy & paste the following code:

.post-entry {padding-top: 20px;} 


Be sure to save when you're finished. And that's it!

Move Post Header Screenshot #5


72. Targeting text elements in Oleander: Change font size

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




Would you like to change the font size of any of Oleander's text elements? Below, we've noted nearly all of Oleander'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 code for it, and paste it into
WordPress Dashboard > Appearance > Customize > Custom 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: 13px;}
 
 
/* ----- TOP BAR ----- */
/* Top-bar social icons */   #top-social a, #mobile-social a {font-size: 14px;}
/* Search text */   #top-search input {font-size: 14px;}
/* Search icon */   #top-search i {font-size: 13px;}
 
 
/* ----- MENU ----- */
/* Parent menu items */   #nav-wrapper .menu li a {font-size: 13px;}
/* Child menu items/drop-down menu items */   #nav-wrapper ul.menu ul a, #nav-wrapper .menu ul ul a {font-size: 10px;}
 
 
/* ----- SLIDER OVERLAY ----- */
/* Slider category */   .feat-overlay .cat a {font-size: 12px;} 
/* Slider post title */   .feat-overlay h2 a {font-size: 44px;}
/* Slider subtitle text */   .feat-overlay p {font-size: 18px;}
/* Slider 'Continue Reading' button */   .feat-more {font-size: 10px;}
 
 
/* ----- PROMO BOXES ----- */
/* Promo box title */   .promo-overlay h4 {font-size: 15px;}
/* Promo box subtitle */   .promo-overlay h4 span {font-size: 16px;}
 
 
/* ----- POST HEADER ----- */
/* Post header title */   .post-header h2 a, .post-header h1 {font-size: 27px;}
/* Post header category */    .post-header .cat a {font-size: 11px;}
/* Post header category "In" text */   .post-header .cat span.by {font-size: 15px;}
/* Comment counter box */   .comment-box {min-width: 27px; min-height: 21px;} 
/* Comment counter box number */   .comment-box a {font-size: 14px;}
 
 
/* ----- POST & PAGE CONTENT ----- */
/* Post/Page body text */    .post-entry p {font-size: 13px;}
/* Post/Page blockquotes */   .post-entry .wp-block-quote p {font-size: 22px;}
/* Post/Page numbered lists & bulletted lists */   .post-entry ul li, .post-entry ol li {font-size: 13px;}
/* Post 'Continue Reading' button */   .more-button {font-size: 10px;} 
 
/* Post/Page H-tags */
.post-entry h1 {font-size: 26px;}
.post-entry h2 {font-size: 23px;}
.post-entry h3 {font-size: 20px;}
.post-entry h4 {font-size: 17px;}
.post-entry h5 {font-size: 15px;}
.post-entry h6 {font-size: 13px;}
 
 
/* ----- POST & PAGE FOOTER ----- */ 
/* Post footer share icons */   .post-share a i {font-size: 13px;}
/* Post footer share text */   .post-share a span {font-size: 10px;}
/* Post footer publish date */   .meta-info .meta-date {font-size: 10px;}
/* Post "By" text */   .meta-info .by {font-size: 12px;}
/* Post footer author name */   .meta-info a {font-size: 10px;}
 
 
/* ----- ARCHIVE PAGES ----- */
/* Browsing category, tag, etc. banner text */   .archive-box span {font-size: 15px;}
/* Banner's category, tag, etc. title */   .archive-box h1 {font-size: 28px;}
 
 
/* ----- AUTHOR BOX ----- */
/* "About" text */   .author-content h5 .about-italic {font-size: 18px;}
/* Post author name */   .author-content h5 a {font-size: 14px;}
/* Author bio text */   .author-content p {font-size: 13px;}
/* Author social icons */   .post-author a i {font-size: 14px;}
 
 
/* ----- YOU MIGHT ALSO LIKE ----- */
/* Section's title */   .post-related h4.widget-title {font-size: 20px;}
/* Post titles */   .item-related h3 a {font-size: 14px;}
/* Post date */   .item-related span.date {font-size: 12px;}
 
 
/* ----- POST COMMENTS ----- */
/* Section's title */   .post-comments h4.widget-title {font-size: 20px;}
/* Leave a reply */   #respond h3 {font-size: 12px;}
/* Name, email, website, etc. */   #respond label {font-size: 13px;}
/* Post comment button */   #respond #submit {font-size: 10px;}
/* Commentator's name */   .thecomment .comment-text span.author, .thecomment .comment-text span.author a {font-size: 13px;}
/* Comment's date & time */   .thecomment .comment-text span.date {font-size: 12px;}
/* Comment's text */   .comment-text p {font-size: 13px;}
 
 
/* ----- HOMEPAGE POST PAGINATION ----- */
/* Homepage Older Posts/Newer Posts */   .pagination a {font-size: 10px;} 
 
 
/* ----- POST PAGINATION ----- */
/* Post page Previous Post/Next Post */   .post-pagination a {font-size: 12px;}
 
 
/* ----- WIDGETS ----- */
/* Widget titles */   .widget-title {font-size: 20px;}
/* Latest posts widget post titles */   .widget ul.side-newsfeed li .side-item .side-item-text h4 a {font-size: 13px;}
/* Latest posts widget date */   .widget ul.side-newsfeed li .side-item .side-item-text .side-item-meta {font-size: 11px;}
/* WP's recent posts widget items */  .widget_recent_entries ul li a {font-size: 13px;}
/* WP's archive widget items */   .widget_archive ul li a {font-size: 13px;}
/* WP's category widget items */   .widget_categories ul li a {font-size: 13px;}
/* About widget text */   .about-widget p {font-size: 13px;}
/* Social widget icons */ .social-widget a i {font-size: 14px;}
/* Newsletter widget form text */   .widget_mc4wp_form_widget input {font-size: 13px;}
/* Newsletter widget button */   .widget_mc4wp_form_widget input[type="submit"] {font-size: 10px;}
 
 
/* ----- FOOTER AREA ----- */
/* Footer social icons */  .footer-social i {font-size: 12px;}
/* Footer social icon text */   .footer-social a span {font-size: 12px;}
/* Footer copyright/disclaimer text */  #footer-copyright p {font-size: 12px;}
/* Back to top */   .back-to-top {font-size: 12px;}

73. Add LinkedIn social share button to Rosemary

Beneath your posts are a variety of social share icons. These icons differ from those in your top-bar area in that, when clicked, they will open up that social network's share platform so that visitors can share your content on their social media accounts. 

To add a "LinkedIn" icon to your post social share icons, you can follow these steps:

Navigate to WP Dashboard > Appearance > Editor > and open up the "content.php" file. On lines 118-127, you will see a block of code related to the share icons.

On line 127, you'll see the code for the Google Plus social network. 

Create a new blank line BELOW this Google Plus code. On this blank line, paste in the following:

<a target="_blank" href="https://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>"><i class="fa fa-linkedin"></i></a>

When finished, it will look like:

Save changes to the file. 

If you'd also like to add the LinkedIn social share icon to your pages as well, navigate to WP Dashboard > Appearance > Editor > and open up "content-page.php". Again, on line 34, you'll see the code for the Google Plus social network. Create a new blank line beneath the Google Plus code and paste in the following:

<a target="_blank" href="https://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>"><i class="fa fa-linkedin"></i></a>

Save changes when finished. 


74. Why are there gaps in between images in Florence's Instagram footer?

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


Florence Instagram Screenshot #1


If you're using Florence's Instagram footer area and have white, uniform gaps in between your images, it's very likely an easy fix! Recently, the Instagram Slider Widget's authors released a massive update to the plugin which included changes to the "class" names Florence used in order to target & style the widget. In response to the update, we've created some CSS code which should address & fix the styling bugs.

Within Appearance > Customize > Custom CSS, copy & paste the following:

.widget-instagram .jr-insta-thumb ul > li, .widget-instagram ul.instagram-pics > li {
    width:12.5% !important;
    display:inline;
    float:left;
    margin-bottom:-6px;
    padding:0 !important;
}
.widget-instagram ul.instagram-pics > li img {
    width:100% !important;
    height: auto !important;
}
.jr-insta-thumb .thumbnails {
    padding:0 !important;
}


Be sure to save when finished.




Then, within Appearance > Widgets > Instagram Slider widget settings, please ensure you've set the Template option to be "Thumbnails" and the Image Size to either "Large" or "Medium". Save your settings when finished.


Florence Instagram Screenshot #3


screenshot's Instagram images attributed to the talented @emily_katz

75. Add Promo Boxes to Alder

Please note: This tutorial is specifically for the Alder theme.



Some of our themes, like Redwood and Oleander, offer an element called Promo Boxes which are 3 horizontally-aligned hyperlinked images, usually beneath the Featured Area Slider element. By default, Alder doesn't include this feature, though it is possible to manually insert Promo Boxes onto its post feed/blog page. 

To do so, navigate to Alder's WP Dashboard > Appearance > Editor > and open up the file titled "index.php". 

On Line 6, copy and paste in the following block of code:

<div class="promo-area">
<div class="sp-container">
    
    <div class="promo-item" style="background-image:url('YOUR-IMAGE-URL-HERE')">
        <a href="YOUR-LINKING-URL-HERE" class="promo-link"></a>
        <div class="promo-overlay">
            <h4>PROMO BOX 1 TITLE</h4>
        </div>
    </div>
    
    <div class="promo-item" style="background-image:url('YOUR-IMAGE-URL-HERE')">
        <a href="YOUR-LINKING-URL-HERE" class="promo-link"></a>
        <div class="promo-overlay">
            <h4>PROMO BOX 2 TITLE</h4>
        </div>
    </div>
    
    <div class="promo-item" style="background-image:url('YOUR-IMG-URL-HERE')">
        <a href="YOUR-LINKING-URL-HERE" class="promo-link"></a>
        <div class="promo-overlay">
            <h4>PROMO BOX 3 TITLE</h4>
        </div>
    </div>
    
</div>
</div>


In this block of code, there are 3 sections.  Each section is related to 1 of the 3 Promo Boxes.  

Each section of code has some dummy text in it to help you know where to insert the necessary text, image, and hyperlink for each Promo Box. Please be sure to replace the dummy YOUR-IMAGE-URL-HEREYOUR-LINKING-URL-HERE, and PROMO BOX TITLE text for each section with your own images, links, and text. 

NoteFor linking in an image, we recommend first uploading it to your WordPress Media Library. Once in your library, click the image and a box will pop up with its unique URL. Use this URL to pull in your desired image to the Promo Box.

Be sure to save changes when finished.


Lastly, navigate to WP Dashboard > Appearance > Customize > Custom CSS/Additional CSS and copy & paste in the following code:

/****************************************/
/* ADD PROMO BOXES TO ALDER
/****************************************/
.promo-area {
    overflow:hidden;
    margin-bottom:60px;
}
.promo-item {
    display: table;
    width:363px;
    float:left;
    margin-right:30px;
    height:200px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding:16px;
    position:relative;
}
.promo-item:last-child {
    margin-right:0;
}
.promo-overlay {
    height: 100%;
    display: table-cell;   
    vertical-align: middle;   
    text-align:center;
    border:1px solid #fff;
}
.promo-overlay  h4 {
    color:#000;
    line-height:1.5em;
    padding:8px 12px 8px 13px;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:2px;
    background:#fff;
    display:inline-block;
    max-width:60%;
}
.promo-link {
    position: absolute; 
    height: 100%; 
    width: 100%;
    top: 0;
    left:0;
    z-index: 999999;
    display: block
}
@media only screen and (min-width: 942px) and (max-width: 1170px) {
.promo-item {
    width:275px;
    height:172px;
}}
@media only screen and (min-width: 768px) and (max-width: 960px) {
.promo-item {
    width:213px;
    height:135px;
    margin-right:18px;
}}
@media only screen and (max-width: 767px) {
.promo-area .sp-container {
width: 75%;
}
.promo-item {
    width:100%;
    height:176px;
    margin-bottom:30px;
}}
@media only screen and (min-width: 480px) and (max-width: 768px) {
.promo-item {
    width:100%;
    height:200px;
    margin-bottom:30px;
}
.promo-item:last-child {
    margin-bottom:0;
}}


Save changes to your Custom CSS when finished. 


76. Have your homepage display a specific post category

By default, the homepage will display your most recent posts from all categories. If you'd like your homepage to only display posts assigned with 1 particular category instead, you can follow these steps:

Navigate to Appearance > Editor > and open up your "functions.php" theme file.
Please be very careful regarding what you add or change within this theme file as it is the "brains" in a way.
Scroll to the bottom of the file and, below the last code within the document, copy & paste the following code:


function my_home_category ($query) {
    if ( $query->is_home() && $query->is_main_query() ) {
    $query->set( 'cat', '6');
    }
}
add_action ('pre_get_posts', 'my_home_category');



Homepage Category Screenshot #1


Within that little bit of code, 3 lines from the top, you'll notice the number value "6". This number represents the category you want to singularly display on your homepage.


Homepage Category Screenshot #2


Whenever you create a category, WordPress assigns it a unique ID number.
To determine your desired category's ID number, check out: How to determine a post, page, or category ID


Within "functions.php", replace the "6" number value with your own category ID's number.
Be sure to save the document when you're finished. Now, your homepage will display just your posts assigned with this particular category!

77. Add a simple text menu to Redwood's footer


If you'd like to insert a simple horizontal text menu into your footer area, it's simple to do with some basic HTML and CSS! 

Navigate to WP Dashboard > Appearance > Customize > Footer Settings.

In the "Footer Copyright Text" field, we'll add some HTML code for the menu. Don't worry if you already have copyright text in here. Just find the very end of your copyright text in the field and paste in the following code:

<div id="footer-menu">
<ul>
<li><a href="LINK-URL">Menu Item 1</a></li>
<li><a href="LINK-URL">Menu Item 2</a></li>
<li><a href="LINK-URL">Menu Item 3</a></li>
<li><a href="LINK-URL">Menu Item 4</a></li>
</ul>
</div>


In the above code, we have 4 placeholder menu items. Be sure to replace the LINK-URL dummy text in the above code with the URL you want link to direct to as well as changing the Menu Item titles to whatever title you want your link to have. 

If you want more menu items than the 4 examples above, copy and paste additional lines.  Otherwise, if you don't require 4 menu items, feel free to delete any lines you don't need. 

Save changes when finished. 

Lastly, navigate to WP Dashboard > Appearance > Customize > Custom CSS > and insert this code:

#footer-menu ul li {
display: inline-block;
margin: 15px;
}
#footer-menu ul li a {
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
font-family: 'Open Sans', sans-serif;
}

Be sure to save changes when finished.

78. How to setup the "Smash Balloon Instagram Feed" plugin in Redwood

We're currently in the process of switching our recommended Instagram feed plugin from "WP Instagram Widget" over to "Smash Balloon Social Photo Feed". Redwood has been updated with custom stylings for this new plugin.

Below, we've noted how you can connect your Instagram account to the plugin and insert it into your Sidebar or Instagram Footer widget areas.




STEP 1: INSTALLING & CONFIGURING THE PLUGIN

1. First, install the "Smash Balloon Social Photo Feed" plugin (https://wordpress.org/plugins/instagram-feed/). It will be included in the theme's "Recommended Plugins". 

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 area where you want the grid to appear. 

3. Copy & paste in this shortcode:

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

Save changes.

 

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

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=8 cols=8 imagepadding=0 showheader=false showbutton=false showfollow=false disablemobile=true]

Save changes.

79. Have Oleander's full-width grid layout display in 3 columns

Please note: This FAQ article is specifically for the Oleander theme.

By default, Oleander's full-width grid layout will have your grid items display in 2 columns. If you'd like to have them instead display in 3 columns, it's a very simple process of copying and pasting some code.

Navigate to WordPress Dashboard > Appearance > Customize > Custom CSS and copy & paste in the following:

@media only screen and (min-width: 943px){
#main.fullwidth .sp-grid > li {width: 360px; margin-right: 26px;}
#main.fullwidth .sp-grid li:nth-of-type(2n+2) {margin-right: 26px;}
#main.fullwidth .sp-grid li:nth-of-type(3n+3) {margin-right: 0;}
}
@media only screen and (min-width: 942px) and (max-width: 1170px) {
#main.fullwidth .sp-grid >li {width: 293px;}
}
@media only screen and (max-width: 960px) {
#main.fullwidth .sp-grid li:nth-of-type(3n+3) {margin-right: 26px;}
#main.fullwidth .sp-grid li:nth-of-type(2n+2) {margin-right: 0;}
}

Be sure to save changes within your Customizer section when finished.  

If the changes are not immediately taking effect, please also ensure that you clear any browser or WordPress cache tool you may have enabled.


80. Moving the top bar below the logo image in Florence

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



The top bar includes your navigation menu, your social network icons, and your search bar.
By default, it sits above your header's logo image. If you'd instead like to move your top bar to sit below your logo image, you can follow the steps below. First, though, one important thing to note is that moving the top bar below your logo image will remove the top bar's "sticky" feature, meaning that the top bar will no longer scroll down the page with the user. It will remain at the top of the page. If this is OK with you, let's get started!




Note: We recommend installing the code editor plugin called WPide when adjusting your theme's files. While accessing your theme files from within Appearance > Editor may be easy, the WPide plugin includes lovely line numbers which will make the below instructions much easier to follow!

Open up the theme's "header.php" file.
Between Lines 70 - 98, you'll see a big block of code beginning with header id="header" and ending with /header.
This block of code looks like:


    <header id="header">
    
        <div class="container">
            
            <div id="logo">
                
                <?php if(!get_theme_mod('sp_logo')) : ?>
                    
                    <?php if(is_front_page()) : ?>
                        <h1><a href="<?php echo home_url(); ?>"><img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="<?php bloginfo( 'name' ); ?>" /></a></h1>
                    <?php else : ?>
                        <h2><a href="<?php echo home_url(); ?>"><img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="<?php bloginfo( 'name' ); ?>" /></a></h2>
                    <?php endif; ?>
                    
                <?php else : ?>
                    
                    <?php if(is_front_page()) : ?>
                        <h1><a href="<?php echo home_url(); ?>"><img src="<?php echo get_theme_mod('sp_logo'); ?>" alt="<?php bloginfo( 'name' ); ?>" /></a></h1>
                    <?php else : ?>
                        <h2><a href="<?php echo home_url(); ?>"><img src="<?php echo get_theme_mod('sp_logo'); ?>" alt="<?php bloginfo( 'name' ); ?>" /></a></h2>
                    <?php endif; ?>
                    
                <?php endif; ?>
                
            </div>
            
        </div>
        
    </header>

Copy this block of code and paste them onto the blank Line 26 (right above where it says div id="top-bar" ).




Be sure to go back down and remove that original block of header code below, otherwise you'll have two logo images appearing. Save the file when you're finished.

Then, within Appearance > Customize > Custom CSS, add the following:

#top-bar {position: relative; margin-bottom: 50px;}

Now you're all set!

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

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

83. Make Oleander's Featured Area Slider as wide as the content container

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




By default, Oleander's Featured Area Slider will display at 100% width of your website. If you would prefer to instead have your Featured Area Slider only be as wide as the content's container, this is an easy customization! 

First, we will need to access the Featured Area Slider's theme file. In order to do so, we recommend installing the code editor plugin called WPide (http://wordpress.org/plugins/wpide). Once WPide is installed and activated, you can navigate to WP Dashboard > WPide > themes > oleander > "inc" folder > "featured" folder > and open up the file titled "featured.php". 

On the first line of this document, you will see this code:

<div class="featured-area">


Push this line of code down in order to make the first line within the document blank. 
Next, on what is now the first, blank line of the document, you can copy and paste the following bit of code:

<div class="container">


The first few lines of within your "featured.php" file will now look like this:

<div class="container">
<div class="featured-area">

    <div class="sideslides">


Lastly, you can scroll to the very bottom of the document. 

On the last line of the document, you'll see this bit of code:

</div>


Directly below this on a blank line, you will repeat this same bit of code. 
The last few lines of code in your "featured.php" file will now look like this:

     </div>
    
</div>
</div>


Be sure to save changes when finished. 
If you have a cache tool operating on your WordPress and/or browser, you may need to clear the cache in order to see the changes. 

If you would like to add some spacing between your Featured Area Slider and the navigation menu, you can then navigate to Appearance > Customize > Custom CSS and copy & paste in the following. 
I've set the spacing to be 50px, however you are of course very welcome to adjust this to whatever you prefer. 

.featured-area {
margin-top: 50px;
}


Save changes when finished. 

 

84. How do I add social media icons to Sprout & Spoon?

Please note: This FAQ Article is specifically for the Sprout & Spoon theme.



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


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. If you leave the text box blank for a social media network, the icon will not appear.

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 "Sprout & Spoon: Social Icons" widget to your Sidebar area.




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 Sprout & Spoon'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 Sprout & Spoon.
On Font Awesome's icon page, you can see that the code for the VK icon is "vk".




ADDING THE ICON TO SPROUT & SPOON'S TOP-BAR & FOOTER




First, ensure you have the bundled plugin called "Sprout & Spoon 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 "Sprout & Spoon Core" plugin. 

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

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

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

On what is now line 31, 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 52, 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 53, 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 SPROUT'S SOCIAL WIDGET:




To manually add an icon to Sprout & Spoon's social widget, you'll need to access a theme file called

As before, you can navigate to WP Dashboard > Plugins > Plugin Editor > from the drop-down menu in the top-right, select the "Sprout & Spoon 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 74, 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 75, 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!



85. Sprout & Spoon's Category Index Shortcode

Please note: This article is specifically for the Sprout & Spoon theme. 



Sprout & Spoon includes a unique shortcode which allows you to display a number of posts from a particular category in a grid-like layout. 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. 




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. 

First, please be sure that you've installed and activated the plugin titled "Solo Pine Recipes". This plugin comes bundled with the theme and should appear in a notification banner at the top of your WordPress Dashboard requesting you to install required/recommended plugins. 






The basic shortcode looks like:

 

[sp_index]

 

Simply adding the above basic shortcode to a post or page will display your 3 most recently published posts from any category. 

To customize the index grid, you can apply special parameters to your category index grid. 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_date="yes"        // yes/no to display post date
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 published post



EXAMPLES OF SHORTCODE PARAMETERS IN ACTION



TITLE

[sp_index title="breakfast"]


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





CATEGORY

[sp_index cat="desserts"]


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

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:


[sp_index title="breakfast" cat="desserts"] 





 


AMOUNT OF POSTS

[sp_index amount="4"]


We've inserted the parameter amount="" into the standard [sp_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:

[sp_index title="breakfast" cat="desserts" amount="4"] 






COLUMNS

[sp_index cols="2"]


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

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:

[sp_index title="breakfast" cat="desserts" amount="4" cols="2"]


 




DISPLAY POST TITLE?

[sp_index display_title="no"]


We've inserted the parameter display_title="" into the standard [sp_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:

[sp_index title="breakfast" cat="desserts" amount="4" cols="2" display_title="no"]






DISPLAY POST CATEGORIES?

[sp_index display_cat="yes"]


We've inserted the parameter display_cat="" into the standard [sp_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:

[sp_index title="breakfast" cat="desserts" amount="4" cols="2" display_cat="yes"]







DISPLAY POST DATE?

[sp_index display_date="no"]


We've inserted the parameter display_date="" into the standard [sp_index] shortcode. 
This will disable your post dates. By default, the post dates will show. 
In this example, I've chosen to hide my posts' dates. 

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 dates parameters together, it would look like:

[sp_index title="breakfast" cat="desserts" amount="4" cols="2" display_date="no"]






DISPLAY POST IMAGE?

[sp_index display_image="no"]


We've inserted the parameter display_image="" into the standard [sp_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:

[sp_index title="breakfast" cat="desserts" amount="4" cols="2" display_image="no"]






DISPLAY CATEGORY/VIEW ALL LINK?

[sp_index cat_link="no"]


We've inserted the parameter cat_link="" into the standard [sp_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:

[sp_index title="breakfast" cat="desserts" cat_link="no"]






CUSTOM CATEGORY LINK TEXT

[sp_index cat_link_text="all dessert recipes"]


We've inserted the parameter cat_link_text="" into the standard [sp_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 DESSERT RECIPES" 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:

[sp_index title="breakfast" cat="desserts" cat_link_text="all dessert recipes"]




SET POST OFFSET

[sp_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 [sp_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: 

[sp_index offset="3"]

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



86. Disqus plugin changes Hemlock's comment icon to text

Please note: This FAQ article is specifically for the Hemlock theme.



When using the Disqus plugin with Hemlock, the plugin can "hijack" the comment icon within a post's social share icon section and turn it to text. To override this and return your comment icon back to its lovely former self, follow these instructions:

Hemlock Disqus Screenshot #1


Open up your theme's "content.php" file. You can typically edit your theme's primary files via Appearance > Editor, via FTP, or via a code editor plugin such as WPide (recommended).
Look to Line 96 where you will see the line of code for the comment icon. This line of code looks like:

<?php comments_popup_link( '<span class="share-box"><i class="fa fa-comment-o"></i></span>', '<span class="share-box"><i class="fa fa-comment-o"></i></span>', '<span class="share-box"><i class="fa fa-comment-o"></i></span>', '', ''); ?>


Hemlock Disqus Screenshot #2


Replace that line of code with the following code instead:

<a href="<?php the_permalink(); ?>#comments_wrapper"><span class="share-box"><i class="fa fa-comment-o"></i></span></a>


Hemlock Disqus Screenshot #3


Lastly, scroll down to the bottom of the "content.php" document. On Line 113, you will see:

<?php comments_template( '', true );  ?>


Replace that bit of code with the following instead:

<div id="comments_wrapper"><?php comments_template( '', true );  ?></div>


Hemlock Disqus Screenshot #4


Be sure to save the changes you made to your file when finished.


Please note: If you also have Disqus comments enabled on your Pages, please be sure to repeat these steps within the "content-page.php" theme file. In this file, you can find the comment icon link code on Line 30 and the "comments_template" code on Line 36.

87. Add an image to your About Me widget


To add an image to your "About Me" widget, you will first want to ensure that the image is hosted online. This means that it has a URL which WordPress can use to link it into the widget. The easiest way to do this would be to upload the image to your WordPress Media Library. 

 

Upload the image to your Media Library

Navigate to WP Dashboard > Media. Click the "Add New" button at the top. 
Find your desired image on your computer and upload it to your WordPress Media Library. 

Once the image appears in your library, select the image. It will open a box or screen with information on the image. 
On the right, you will see a URL titled "File URL" or simply "URL". This is your image's unique URL. 
Copy the URL. 


Adding the image to your About Me widget

Next, navigate to WP Dashboard > Appearance > Widgets > and add your "About Me" widget to your preferred area. 
For the field titled "Image URL", paste in the URL you copied from your Media Library. 
Save changes when finished. 


88. How do I add the "Continue Reading" link to posts in Sprout & Spoon?

Please note: This FAQ Article is specifically for the Sprout & Spoon theme.




The "Continue Reading" link in Sprout & Spoon is a wonderful tool-- It gives your site's visitors a taste of your posts as well as keeps your homepage tidy & more easily navigable instead of displaying 100% of every post.

Sprout & Spoon gives you the option of either manually adding the "Continue Reading" link to each post, or, auto-applying the "Continue Reading" link to all posts with the click of a button. 

Both options have pros & cons. We'll go over the differences between the two and how to enable either option below.





MANUALLY ADDING THE CONTINUE READING LINK:

Also known as the "Read More" tag, you can add the "Continue Reading" link to a post within the post's "create/edit" screen. Some people prefer the customizability of this option as they can choose where within the post they'd like to place the button and just how much content of the post they'd like shown on the homepage. 

The downside is that manually inserting the "Read More" tag can be a bit tedious as it needs to be inserted into each of your posts.

For instructions on how to go about manually adding the "Read More" tag, check out: How do I add the "Continue Reading" link?



AUTO-APPLYING THE CONTINUE READING LINK:

Another option would be to have the theme automatically apply this "Read More" tag into all of your posts. This is a great option if your site already has a large number of posts that you'd rather not go through and manually apply the "Read More" tag to. Or, if you'd like the ease of simply not worrying about this extra step for all future posts.

One thing to note is that this method uses the WordPress "excerpt" function. This function will filter out any HTML code including images and hyperlinks inserted at the beginning of your post (not including the Featured Image), so your excerpt will only display static text, not pictures.

If it's important to you to have hyperlinked text or images within your post summary on the homepage/blog post page, you may want to consider the option above for manually inserting the "Continue Reading" link. 

To auto-apply the "Read More" tag to all of your posts, navigate to WP Dashboard > Appearance > Customize > General Settings > scroll down a bit in the left-hand menu to the section titled "Homepage/Archive Post Summary Type" > choose the "Use Excerpt" option. Be sure to save.





CHANGING THE AUTO-APPLY WORD COUNT TO LENGTHEN/SHORTEN POST EXCERPTS:

If you use the option to auto-apply the "read more" tag to your posts, WordPress uses the "excerpt" function. WordPress determines where to place the "Read More" tag within your post based on how many words it counts through from the start of the post.

By default, Sprout & Spoon's excerpt will count through 70 words before inserting the "Continue Reading" link for standard posts and 29 words for list layout posts.
You can change the number of words by making a slight adjustment to the theme's related layout file.


TO CHANGE THE EXCERPT WORD LENGTH FOR STANDARD POSTS

Navigate to Appearance > Editor > and open up the file titled "content.php"
On Line 93, you will see this line of code:

<p><?php echo sp_string_limit_words(get_the_excerpt(), 70); ?>…</p>


Do you notice the "70" number value in that code? This is the number of words the standard post layout's excerpt will display before automatically adding in the "Continue Reading" button. You can change the "70" number value to whatever number you prefer.
Please save changes to the file when finished.



TO CHANGE THE EXCERPT WORD LENGTH FOR LIST LAYOUT POSTS

Navigate to Appearance > Editor > and open up the file titled "content-list.php"
On Line 18, you will see this line of code:

<p><?php echo sp_string_limit_words(get_the_excerpt(), 29); ?>…</p>


Do you notice the "29" number value in that code? This is the number of words the list post layout's excerpt will display. You can change the "29" number value to whatever number you prefer.
Please save changes to the file when finished.




89. Targeting text elements in Rosemary - CSS Selectors

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


This list of Rosemary'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 Rosemary'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 Rosemary, please don't hesitate to open up a new support ticket and let us know!


/* ----- GENERAL BODY TEXT ----- */
p,.post-entry,.post-entry p 
 
 
/* ----- TOP BAR ----- */
/* Top-bar menu items */   #nav-wrapper .menu li a 
/* Top-bar menu sub-items */   #nav-wrapper ul.menu ul a,#nav-wrapper .menu ul ul a 
/* Top-bar search text */   #top-search input 
 
 
/* ----- SLIDER OVERLAY ----- */
/* Slider category */   .feat-overlay .post-header .cat a  
/* Slider post title */   .feat-item .post-header h2 a 
/* Slider post date */   .feat-item .post-header .date 
/* Slider read more button */   .feat-item .read-more 
 
 
/* ----- PROMO BOXES ----- */
.promo-area .promo-overlay h4
  
  
/* ----- POST HEADER ----- */
/* Post header title */   .post-header h2 a,.post-header h1 
/* Post header category */    .post .post-header .cat a 
/* Post header date */   .post .post-header .date 
 
 
/* ----- POST & PAGE CONTENT ----- */
/* Theme's body text */    p,.post-entry,.post-entry p 
/* Post/Page blockquotes */   .post-entry blockquote p 
/* Post/Page numbered lists & bulletted lists */   .post-entry ul li,.post-entry ol li 
/* Post Read more button */   .more-button 
 
/* Post/Page H-tags */
.post-entry h1 
.post-entry h2 
.post-entry h3 
.post-entry h4 
.post-entry h5 
.post-entry h6 
 
 
/* ----- ARCHIVE PAGE ----- */
/* Browsing category, tag, etc. banner text */   .archive-box span 
/* Banner's category, tag, etc. title */   .archive-box h1 
 
 
/* ----- POST & PAGE FOOTER ----- */ 
/* Post/page "share" text */   .meta-share 
/* Post comment counter */   .meta-comments a 
 
 
/* ----- AUTHOR BOX ----- */
/* Post author name */   .author-content h5 a 
/* Author bio text */   .author-content p 
 
 
/* ----- YOU MIGHT ALSO LIKE ----- */
/* Section's title */   .post-related .post-box-title 
/* Post titles */   .item-related h3 a 
/* Post date */   .item-related span.date 
 
 
/* ----- POST COMMENTS ----- */
/* Section's title */   .post-comments .post-box-title 
/* Leave a reply */   #respond h3 
/* Name, email, website, etc. */   #respond label 
/* Post comment button */   #respond #submit 
/* Commentator's name */   .thecomment .comment-text h6.author,.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 */   .pagination a 
 
 
/* ----- SIDEBAR WIDGETS ----- */
/* Widget titles */   .widget-title 
/* Latest posts widget post titles */   .side-pop.list .side-pop-content h4 a 
/* Latest posts widget date */   .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 
/* Tag cloud */   .widget .tagcloud a 
/* About widget text */   .about-widget p
/* Promo box widget */     #sidebar .promo-overlay h4 
 
 
/* ----- FOOTER AREA ----- */
/* Instagram widget title */   .instagram-title 
/* Footer left-side copyright/disclaimer text */  #footer .copyright.left 
/* Footer right-side copyright/disclaimer text */  #footer .copyright.right 
/* Footer copyright/disclaimer text */  #footer .copyright 


90. Change font size in Helmock

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




Would you like to change the font size of any of Hemlock's text elements? Below, we've noted nearly all of Hemlock'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 code next to it, and paste it into WordPress Dashboard > Appearance > Customize > Custom CSS.
We've listed each item with its default font size, so feel free to adjust it to whatever pixel size you prefer.

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: 16px;}
/* ----- MENU ITEMS ----- */
/* Top-bar menu items */   .menu li a {font-size: 11px;}
/* ----- SLIDER OVERLAY ----- */
/* Slider category */   #owl-demo .item .feat-overlay .feat-cat a {font-size: 14px;} 
/* Slider post title */   #owl-demo .item .feat-overlay h3 a {font-size: 15px;}
/* ----- POST HEADER ----- */
/* Post header title */   .post-header h1 a, .post-header h2 a, .post-header h1 {font-size: 30px;}
/* Post header category */    .post-header .cat a {font-size: 11px;}
/* Post header date */   .post-header .date {font-size: 10px;}
/* ----- POST & PAGE CONTENT ----- */
/* Theme's body text */    p {font-size: 16px;}
/* Post/Page blockquotes */   .post-entry blockquote p {font-size: 18px;}
/* Post/Page numbered lists & bulleted lists */   .post-entry ul li, .post-entry ol li {font-size: 16px;}
/* Post/Page 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: 20px;}
.post-entry h5 {font-size: 18px;}
.post-entry h6 {font-size: 16px;}
/* ----- POST SOCIAL SHARE ICONS ----- */ 
/* Post's footer share icons */   .share-box i {font-size: 14px;}
/* ----- AUTHOR BOX ----- */
/* Post author name */   .author-content h5 a {font-size: 14px;}
/* Author bio text */   .author-content p {font-size: 16px;}
/* Author social icons */   .author-content .author-social {font-size: 14px;}
/* ----- YOU MIGHT ALSO LIKE ----- */
/* Section's title */   .post-related .post-box-title {font-size: 14px;}
/* Post titles */   .item-related h3 a {font-size: 14px;}
/* Post date */   .item-related span.date {font-size: 10px;}
/* ----- POST COMMENTS ----- */
/* Section's title */   .post-comments .post-box-title {font-size: 14px;}
/* Leave a reply */   #respond h3 {font-size: 14px;}
/* Name, email, website, etc. */   #respond label {font-size: 14px;}
/* Post comment button */   #respond #submit {font-size: 11px;}
/* ----- POST PAGINATION ----- */
/* Homepage Older Posts/Newer Posts */   .pagination a {font-size: 12px;}   
/* Post page Next Post/Previous Post */   .post-pagination span {font-size: 16px;}
/* Post page Next Post/Previous Post post title */   .post-pagination h5 {font-size: 14px;}
 
/* ----- SIDEBAR & FOOTER WIDGETS ----- */
/* Widget titles */   .widget-title {font-size: 14px;}
/* Latest posts widget post titles */   .widget ul.side-newsfeed li .side-item .side-item-text h4 a {font-size: 14px;}
/* Latest posts widget date */   .widget ul.side-newsfeed li .side-item .side-item-text .side-item-meta {font-size: 10px;}
/* WP's recent posts widget items */   .widget_recent_entries ul li a {font-size: 16px;}
/* WP's archive widget items */   .widget_archive ul li a {font-size: 16px;}
/* WP's category widget items */   .widget_categories ul li a {font-size: 16px;}
/* ----- FOOTER AREA ----- */
/* Footer social icon text */   #footer-social a {font-size: 11px;} 
/* Footer text beneath logo image */   #footer-logo p {font-size: 15px;}
/* Footer copyright text */  #footer-copyright p {font-size: 11px;}
/* Back to top button */   #footer-copyright .to-top {font-size: 11px;}



91. Setting up Hemlock's newsletter widget

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



Hemlock 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 audience list. 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 Hemlock'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 ( https://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".

Navigate to WP Dashboard > MailChimp for WP > Forms.

Here, you will see the HTML code that "builds" your newsletter form. If it's not already written there, you can simply delete the code within the text box and replace it with the following instead:


<p>
    <label>Subscribe to my Newsletter</label>
    <input type="email" id="mc4wp_email" name="EMAIL" placeholder="Your email address" required="">
</p>
<p>
    <input type="submit" value="Subscribe">
</p>


Note: If you'd like to change the text from "Subscribe to my Newsletter" to something else, you can do so on the 2nd line of the above 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!


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





93. Add "Read More" link to Grid Layout posts in Hemlock

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



By default, the "Continue Reading" link won't appear for Grid Layout posts. If you would like to have this link appear below each grid item, you can follow these steps.

Open up your "content-grid.php" theme file.
Typically, you can access this via Appearance > Editor.

On Line 10, you will see this line of code:

<?php the_excerpt(); ?>


Directly below this line of code, create a new blank line.
On this new, blank line (Line 11), copy and paste the following code:

<span class="more-button"><a class="more-link" href="<?php echo get_permalink() ?>">Continue Reading...</a></span>


Be sure to save the changes to this file when finished.

Lastly, go to Appearance > Customize > Custom CSS and copy & paste the following:

a.more-link {font-weight: 700;}
.more-button {display: block; margin-bottom: 10px;}


Save changes when finished.

94. Add more Promo Boxes


By default, Redwood offers 3 Promo Boxes. If you'd prefer to have 6 Promo Boxes instead, it's possible to add some HTML/CSS code to achieve this. 

Please note that the original 3 Promo Boxes will need to be configured via WP Dashboard > Appearance > Customize > Promo Box Settings. And the 3 additional Promo Boxes we'll be adding will need to be configured via the "promo.php" theme file. 



Navigate to WP Dashboard > Appearance > Editor > "inc" folder > "promo" folder > and open the file titled "promo.php". 

On blank line 35, copy and paste in the following code:

    <div class="promo-item" style="background-image:url('YOUR-IMAGE-URL-HERE')">
        <a href="YOUR-LINKING-URL-HERE" class="promo-link"></a>
        <div class="promo-overlay">
            <h4>PROMO BOX 4 TITLE</h4>
        </div>
    </div>
    <div class="promo-item" style="background-image:url('YOUR-IMAGE-URL-HERE')">
        <a href="YOUR-LINKING-URL-HERE" class="promo-link"></a>
        <div class="promo-overlay">
            <h4>PROMO BOX 5 TITLE</h4>
        </div>
    </div>
    <div class="promo-item" style="background-image:url('YOUR-IMAGE-URL-HERE')">
        <a href="YOUR-LINKING-URL-HERE" class="promo-link"></a>
        <div class="promo-overlay">
            <h4>PROMO BOX 6 TITLE</h4>
        </div>
    </div>


In the above code, do you see the 3 separate blocks of code? Each separate block of code is related to 1 Promo Box. They will become your 4th, 5th, and 6th Promo Boxes. 

In each box of code, you will need to replace some dummy text:

  1. On the 1st line of each code block, replace the YOUR-IMAGE-URL-HERE with the image's URL that you want to display in that particular Promo Box. You can upload your desired image to your WP Media Library, click on the image in the Library, and copy its URL. 
  2. On the 2nd line of each code block, replace the YOUR-LINKING-URL-HERE dummy text with what URL you want that box to link to.
  3. On the 4th line of each code block, replace the PROMO BOX TITLE text with what text you want to display in that Promo Box. 

Save changes in the file when finished. 

Lastly, navigate to WP Dashboard > Appearance > Customize > Custom CSS box > and paste in this code:

.promo-item:nth-of-type(3n+3) {margin-right: 0;}
.promo-item {margin-bottom: 30px;}
.promo-area {margin-bottom: 60px;}

Save changes when finished. 

95. Disable Laurel's "Show Menu" mobile menu on larger screen sizes

Please note: This article is specifically for our Laurel theme. 



Full, side-by-side navigation menu


By default, Laurel's navigation menu will have its menu items display side-by-side on screen sizes that are 1400px and wider

When viewed on a screen that is less than 1400px wide, the navigation menu will automatically retract into a centered mobile menu with the words "Show menu" next to it. 


Centered mobile menu


This is done because of the nature of Laurel's default header layout. Because the top-bar area has to accommodate a logo image, a navigation menu, and social icons, the top-bar can become quite crowded as the screen size reduces in width. To remedy this, we've implemented the feature where the menu retracts into a mobile menu in order to save space and keep the top-bar nice and tidy. 

If you don't plan on having many menu items or your logo image is quite small, you may be able to fit in all of your top-bar elements without needing to display the centered mobile menu until you hit an even smaller screen width than 1400px. 

To give this a try, you can navigate to WP Dashboard > Appearance > Customize > Custom CSS > and insert this block of code:

@media only screen and (max-width : 1400px) {
#nav-wrapper { display:block; }
#mobile-menu { display:none; }
#slick-mobile-menu { display:none; }
}
@media only screen and (min-width: 942px) and (max-width: 1170px) {
#nav-wrapper { display:none; }
#mobile-menu { display:block; }
#slick-mobile-menu { display:block; }
}
@media only screen and (min-width: 768px) and (max-width: 960px) {
#nav-wrapper { display:none; }
#mobile-menu { display:block; }
#slick-mobile-menu { display:block; }
}
@media only screen and (max-width: 767px) {
#nav-wrapper { display:none; }
#mobile-menu { display:block; }
#slick-mobile-menu { display:block; }
}

Please save changes when finished. 

If you have a cache tool operating on your WordPress platform or on your web browser, please be sure to clear any caches. 

This code will have your full/side-by-side navigation menu appear on screen widths down to 1170px wide. When your screen width becomes less than 1170px wide, the mobile menu will appear. 


96. Use Redwood's Slider as an Image Gallery

Redwood's featured area slider allows you to highlight posts and/or pages of your choosing. If you would prefer to use the slider as an image gallery instead of a featured post/page element, it's very possible to do! 




1 ) CREATE PAGES FOR YOUR IMAGE(S)

Because the slider only recognizes posts or pages, we'll create a series of "dummy" pages. For each image you'd like to feature in the slider, you can create 1 dummy page. 

Give the pages any title you'd like. 
Assign one of your desired images as each of the page's "Featured Image". 
To learn how to assign one, check out: How do I add a Featured Image?

When finished, publish each page. Don't worry, these pages won't be visible to your visitors unless you add them to your navigation menu. 


2 ) DETERMINE YOUR PAGES' ID NUMBERS

Next, we'll need to determine the unique ID numbers of each dummy page you just created. Every time you publish a post or page, WordPress assigns it a number. We will use our newly-created dummy pages' ID numbers to target them for the slider. 

To learn how to determine a page's ID number, please check out: How to determine a post, page, or category ID

Note down each of your dummy page's ID numbers. 


3 ) ADD YOUR IMAGES TO THE SLIDER

Navigate to WP Dashboard > Appearance > Customize > Featured Area Settings

Where it says "Select featured post/page IDs", enter your pages' ID numbers into the field. 
Please be sure to separate each page ID with a comma. 

Your dummy pages should now be displaying in your slider. 


4 ) HIDE THE SLIDER'S TEXT & HYPERLINK OVERLAY

To then hide the text overlay and the hyperlink function that covers the slider's image (so visitors can't click through to your dummy page), you can navigate to WP Dashboard > Appearance > Customize > Custom CSS, and copy & paste in the following code:

.feat-overlay {display: none;}


If you would also like to hide the left and right arrow icons that appear when you hover over your slider, you can copy & paste the following into your Custom CSS box as well:

.featured-area .bx-controls-direction {display: none;}


5 ) ADJUST YOUR SLIDER'S AUTO-ROTATE SPEED

Lastly, if you'd like to adjust the speed at which your slider auto-rotates through the different images, you can reference the following article for the necessary steps: Adjust Redwood's Slider Speed


97. Make Oleander's promo boxes square

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


By default, Oleander's promo boxes will display as rectangles. To change your promo boxes' images to be square, you can navigate to WP Dashboard > Appearance > Customize > Custom CSS and insert this code:

.promo-item {height: 360px;}
@media only screen and (min-width: 942px) and (max-width: 1170px) {
.promo-item {height: 293px;}
}
@media only screen and (min-width: 768px) and (max-width: 960px) {
.promo-item {height: 230px;}
}
@media only screen and (max-width: 767px) {
.promo-item {height: 280px;}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.promo-item {height: 420px;}
}

Save changes when finished. 

If you have a cache tool operating on your WordPress (like a cache plugin) or on your web browser, please note that you may need to clear your cache(s) to see changes take affect. 

98. How do I add the "Continue Reading" button to posts in Oleander?

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



The "Continue Reading" link in Oleander is a wonderful tool-- It gives your site's visitors a taste of your posts as well as keeps your homepage tidy & more easily navigable instead of displaying 100% of every post.

Oleander gives you the option of either manually adding the "Continue Reading" link to each post, or, auto-applying the "Continue Reading" link to all posts with the click of a button.

Both options have pros & cons. We'll go over the differences between the two and how to enable either option below.


MANUALLY ADDING THE READ MORE BUTTON:

Please note: This option is for the Homepage/Archive Page/Blog Page layout option that displays the "Full Post Layout". The "Read More" button is auto-applied for the Grid and List Layouts. See further below for adjusting these layout options. 

Also known as the "Read More" tag, you can add the "Read More" tag to a post within the post's "create/edit" screen. Some people prefer the customizability of this option as they can choose where within the post they'd like to place the button and just how much content of the post they'd like shown on the homepage.

The downside is that manually inserting the "Read More" tag can be a bit tedious as it needs to be inserted into each of your posts.

To add a "Read More" tag to your post, you can navigate to the post's create/edit screen. In your post's toolbar, note the second-to-last icon. When you hover over it, it will say "Insert Read More Tag".



Clicking this icon will insert a dashed horizontal line with the word "MORE" centered within it. This is your "Read More Tag". You can drag & drop this horizontal line anywhere in the post's body where you'd like the "Read More" button to appear. WordPress will display all of the text above this "MORE" line, and will hide everything beneath it until the visitors clicks through to your singular post page.

Please also remember to navigate to WP Dashboard > Appearance > Customize > General Settings > Homepage/Archive Post Summary Type > and selected the "Use Read More Tag" option. 


AUTO-APPLYING THE READ MORE BUTTON:

Another option would be to have the theme automatically apply this "Read More" tag into all of your posts. This is a great option if your site already has a large number of posts that you'd rather not go through and manually apply the "Read More" tag to. Or, if you'd like the ease of simply not worrying about this extra step for all future posts.

One thing to note is that this method uses the WordPress"excerpt" function. This function will filter out any HTML code including images and hyperlinks inserted at the beginning of your post (not including the Featured Image), so your excerpt will only display static text, not pictures.

If it's important to you to have hyperlinked text or images within your post summary on the homepage/blog post page, you may want to consider the option above for manually inserting the "Read More" button.

To auto-apply the "Read More" tag to all of your posts, navigate to WP Dashboard >Appearance > Customize > General Settings > Homepage/Archive Post Summary Type > and choose the "Use Excerpt" option. 





CHANGING THE AUTO-APPLY WORD COUNT TO LENGTHEN/SHORTEN POST EXCERPTS:

If you use the option to auto-apply the "Continue Reading" button to your posts, WordPress uses the "excerpt" function. WordPress determines where to place the "Continue Reading" button within your post based on how many words it counts through from the start of the post.

By default, Oleander's excerpt will count through a particular number of words before placing the "Continue Reading" tag depending on which blog layout option you're using:

You can change the number of words by making a slight adjustment to the theme's related layout file. See the instructions for each layout option below.


TO CHANGE THE EXCERPT WORD LENGTH FOR STANDARD POSTS

Navigate to Appearance > Editor > and open up the file titled "content.php"
On Line 89, you will see this line of code:

<p><?php echo sp_string_limit_words(get_the_excerpt(), 80); ?hellip;</p>


Do you notice the "80" number value in that code? This is the number of words the standard post layout's excerpt will display before automatically adding in the "Continue Reading" button. 

You can change the "80" number value to whatever number you prefer.
Please save changes to the file when finished.



TO CHANGE THE EXCERPT WORD LENGTH FOR LIST LAYOUT POSTS

Navigate to Appearance > Editor > and open up the file titled "content-list.php"
On Line 27, you will see this line of code:

<p><?php echo sp_string_limit_words(get_the_excerpt(), 29); ?>hellip</p>


Do you notice the "29" number value in that code? This is the number of words the list post layout's excerpt will display. 

You can change the "29" number value to whatever number you prefer.
Please save changes to the file when finished.



TO CHANGE THE EXCERPT WORD LENGTH FOR GRID LAYOUT POSTS

Navigate to Appearance > Editor > and open up the file titled "content-grid.php"
On Line 22, you will see this line of code:

<p><?php echo sp_string_limit_words(get_the_excerpt(), 24); ?>hellip</p>


Do you notice the "24" number value in that code? This is the number of words the list post layout's excerpt will display. 

You can change the "24" number value to whatever number you prefer.
Please save changes to the file when finished.


99. Sitka: Updating Advanced Custom Fields PRO Plugin

In our Sitka theme, we've included the third-party plugin called Advanced Custom Fields PRO. This plugin provides crucial support for a variety of Sitka customization options. It is packaged within the theme itself.

When Advanced Custom Fields PRO (ACFP) releases an update for the plugin, it will automatically post a message on the WP Dashboard of ALL users recommending you update the plugin. However, because your ACFP plugin is included within the Sitka theme, you will not be able to update it as you would other plugins. Instead, we will release a Sitka theme update that includes the most recent version of ACFP.

When a Sitka theme update is released, you can update the theme

Next, you should see a notification at the top of your dashboard asking you to update the "Sitka Blocks" plugin. Once Sitka Blocks is updated you'll see a new notification asking you to update ACF Pro.

Don't see the notification? Navigate to WP Dashboard > Appearance > Install Plugins and update it here.

Now, you will have the most recent version of the Advanced Custom Fields PRO plugin.

Please note that not every Sitka update will necessarily include a new version of ACF Pro. A notification will only appear if there has been a new ACF Pro update since Sitka was last updated.

100. How to add a little logo image to menu


If you'd like to add a little logo image to your menu, we recommend installing & activating the plugin called Nav Menu Images. This plugin allows you to insert an image as a menu item within your top-bar navigation menu. We'll go through the steps below.


Menu Image Screenshot #1


After installing & activating the plugin, navigate to Appearance > Menus.
For a refresher on your primary menu, please refer to: How do I set up my navigation menu?

Select the "Links" or "Custom Links" drop-down menu on the left and enter whatever URL you'd like to have your image link to. For example, you could enter your site's URL to return the user to your homepage. If you'd like a title to appear next to the image, feel free to enter it within the "Link text" form. 

When you're finished, click "Add to Menu".
Drag and drop the new menu item to wherever you'd like it to display within your menu.
Click the "Save Menu" button. 


Menu Image Screenshot #2


Next, click the menu item to reveal its settings box.
The plugin has added a new option in the settings box titled "Upload menu item image". 

Click this "Upload menu item image" and choose your desired image. 

We've created a little image with a set height to best fit our top-bar and added it to our WordPress Media Library. Many of our themes have different top-bar heights, so you'll want to take this into consideration when creating your little image. 

I've noted the various top-bar heights below.  


Hemlock top-bar height: 48px
Florence top-bar height: 50px
Rosemary top-bar height: 51px
Redwood top-bar height: 50px
Oleander nav menu height: 55px
Sprout & Spoon nav menu height: 60px
Laurel nav menu height: 94px
Alder top-bar height: 54px 


Save changes to your menu when finished. 

You should be all set!

Please note: When your site is viewed on smaller devices, the top-bar menu is replaced with a mobile-menu. The menu image will be shown within this mobile menu and not beside it.


101. How to make Hemlock's featured area slider display 1 large image

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



By default, Hemlock's featured area slider will display 3 slides at a time. To have the featured area slider display just 1 large image instead, you can follow the steps below.

One Large Slider Image Screenshot #1


We first recommend installing a code editor plugin such as AceIDE (https://wordpress.org/plugins/aceide). Once activated, navigate to WP Dashboard > AceIDE > theme > hemlock > and open up Hemlock's "functions.php" theme file. 

Beginning on Line 35, you will see the "//Post thumbnails" section. Within this section, on Line 38, is a line of code for the "slider-thumb" image size. That line of code looks like this:

add_image_size( 'slider-thumb', 650, 440, true );


One Large Featured Slide Screenshot #2


Change the "650, 440, true" value to instead be "1920, 500, true". That line of code should now look like this:

add_image_size( 'slider-thumb', 1920, 500, true );


Save the changes you've made to the file.

Next, we'll need to access the "solopine.js" theme file. Navigate to WP Dashboard > AceIDE > theme > hemlock > "js" folder > and open "solopine.js".

Beginning on Line 41 is the "//slider" section. This section of code looks like this:

// slider
$("#owl-demo").owlCarousel({
    navigation : false,
    items : 3,
    itemsDesktop : [1199,3],
    itemsDesktopSmall : [980,2],
    itemsTablet: [768,2],
    itemsTabletSmall: [568,1],
    itemsMobile : [479,1],
});


On each of the items, we'll change the second number to be "1". Your "//slider" section should now look like this:

// slider
$("#owl-demo").owlCarousel({
    navigation : false,
    items : 1,
    itemsDesktop : [1199,1],
    itemsDesktopSmall : [980,1],
    itemsTablet: [768,1],
    itemsTabletSmall: [568,1],
    itemsMobile : [479,1],
});


One Large Slide Screenshot #3


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

Lastly, we'll go to Appearance > Customize > Custom CSS and add the following code:

.featured-area {width: 100%;}
#owl-demo .item .feat-overlay {text-align: center;}
@media only screen and (min-width: 767px) and (max-width: 1500px) {
#owl-demo .item img {
    max-width: 100%;
    height: 450px;
    object-fit: cover;
}
}
@media only screen and (max-width: 767px) {
#owl-demo .item img {
    max-width: 100%;
    height: 350px;
    object-fit: cover;
}
}


One Large Slide Screenshot #4


You will need to ensure that your Featured Images are at least 1920 pixels in width & 500 pixels in height, otherwise they will not fill the new featured area slider dimensions nicely.

If your images are indeed the necessary size, though are still showing in the smaller, cropped size, you will need to run the Regenerate Thumbnails plugin. This will go through and refresh your images to the new cropping size.

And, voila!


One Large Slide Screenshot #5


102. Hide Featured Area on subsequent (paginated) homepage/blog pages

On your homepage or blog pages (whichever displays your postfeed), when you click the "Older Posts" button, you will be taken to another page which displays even more of your posts. By default, if you have the Featured Area set to display, it will also display on these subsequent pages. 

To only have the Featured Area display on that first homepage/blog page but not the other pages, we can make a small adjustment to the code. 



LAUREL

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

On Line 3, you'll see:

<?php if(get_theme_mod( 'laurel_featured_slider' ) == true) : ?>

You can replace that line of code with the following code instead:

<?php if(get_theme_mod( 'laurel_featured_slider' ) == true && !is_paged()) : ?>

Additionally, to hide the Promo Boxes from displaying on subsequent homepage/blog pages, you can then look to Line 7. You'll see:

<?php if(get_theme_mod( 'laurel_promo' ) == true) : ?>

You can replace that line of code with the following:

<?php if(get_theme_mod( 'laurel_promo' ) == true && !is_paged()) : ?>

Save changes to the file when finished. 



SPROUT & SPOON


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

On Line 3, you'll see:

<?php if(get_theme_mod( 'sprout_spoon_featured_slider' ) == true) : ?>

You can replace that line of code with the following code instead:

<?php if(get_theme_mod( 'sprout_spoon_featured_slider' ) == true && !is_paged()) : ?>

Additionally, to hide the Homepage Widget beneath the Featured Area from displaying on subsequent homepage/blog pages, you can then look to Line 8. You'll see:

<?php if(is_active_sidebar('sidebar-3')) : ?>

You can replace that line of code with the following:

<?php if(is_active_sidebar('sidebar-3') && !is_paged()) : ?>

Save changes to the file when finished. 



REDWOOD


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

On Line 7, you'll see:

<?php if(get_theme_mod( 'sp_featured_slider' ) == true) : ?>

You can replace that line of code with the following code instead:

<?php if(get_theme_mod( 'sp_featured_slider' ) == true && !is_paged()) : ?>

Additionally, to hide the Promo Boxes beneath the Featured Area Slider from displaying on subsequent homepage/blog pages, you can then look to Line 11. You'll see:

<?php if(get_theme_mod( 'sp_promo' ) == true) : ?>

You can replace that line of code with the following:

<?php if(get_theme_mod( 'sp_promo' ) == true && !is_paged()) : ?>

Save changes to the file when finished.


 

ROSEMARY


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

On Line 5, you'll see:

<?php if(get_theme_mod( 'sp_featured_slider' ) == true) : ?>

You can replace that line of code with the following code instead:

<?php if(get_theme_mod( 'sp_featured_slider' ) == true && !is_paged()) : ?>

Save changes to the file when finished. 



ALDER


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

On Line 3, you'll see:

<?php if(get_theme_mod('alder_featured_slider')) : ?>

You can replace that line of code with the following code instead:

<?php if(get_theme_mod('alder_featured_slider') && !is_paged()) : ?>

Additionally, to hide the Homepage Widget beneath the Featured Area from displaying on subsequent homepage/blog pages, you can then look to Line 7. You'll see:

<?php if(is_active_sidebar('sidebar-4')) : ?>

You can replace that line of code with the following:

<?php if(is_active_sidebar('sidebar-4') && !is_paged()) : ?>

Save changes to the file when finished. 



HEMLOCK


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

On Line 3, you'll see:

<?php if(get_theme_mod( 'sp_featured_slider' ) == true) : ?>

You can replace that line of code with the following code instead:

<?php if(get_theme_mod( 'sp_featured_slider' ) == true && !is_paged()) : ?>

Save changes to the file when finished.



OLEANDER


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

On Line 3, you'll see:

<?php if(get_theme_mod( 'sp_featured_slider' ) == true) : ?>

You can replace that line of code with the following code instead:

<?php if(get_theme_mod( 'sp_featured_slider' ) == true && !is_paged()) : ?>

Additionally, to hide the Promo Boxes beneath the Featured Area Slider from displaying on subsequent homepage/blog pages, you can then look to Line 7. You'll see:

<?php if(get_theme_mod( 'sp_promo' ) == true) : ?>

You can replace that line of code with the following:

<?php if(get_theme_mod( 'sp_promo' ) == true && !is_paged()) : ?>

Save changes to the file when finished.

103. Changing font family in Alder - CSS Selectors

Please note: This article is specifically for the Alder theme



This list of Alder'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 Alder'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 Alder, please don't hesitate to open up a new support ticket and let us know!




/* ----- GENERAL BODY TEXT ----- */
p,.post-entry,.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 
/* 'Show Menu' text */ .slicknav_menu .slicknav_menutxt 
  
  
/* ----- FEATURED AREA ----- */
/* Category */ .feat-item .cat a 
/* Post title */ .feat-overlay h4 a 
  
  
/* ----- POST HEADER ----- */
/* Post header title */ .post-header h2 a,.post-header h1 
/* Post header category */ .post-header .cat a 
/* Post date */ .post-header .sp-date a 
 
 
/* ----- POST & PAGE CONTENT ----- */
/* Theme's body text */ .post-entry p 
/* Post/Page blockquotes */ .post-entry blockquote p 
/* Post/Page numbered lists & bulletted lists */ .post-entry ul li,.post-entry ol li 
/* 'Continue Reading' button */ .post-meta .read-more a 
 
/* 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,.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,.wpcf7 select,.wpcf7 textarea 
/* Submit button */ .wpcf7 .wpcf7-submit 
  
  
/* ----- ARCHIVE PAGE ----- */
/* "Explore" text */ .archive-box span 
/* Category, tag, etc. title */ .archive-box h1 
  
  
/* ----- POST & PAGE FOOTER AREA ----- */ 
/* Post/page "By" text */ .by 
/* Post author */ .meta-author 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 */ .related-heading 
/* Post titles */ .item-related h3 a 
  
  
/* ----- POST COMMENTS ----- */
/* Section's title */ .post-comments .related-heading 
/* "Reply" button */ .post-comments span.reply a 
/* "Leave a Reply" Text */ #respond  h3 
/* Name, email, website, etc. */ #respond .comment-form-author input,#respond .comment-form-email input   [SPACER]   #respond .comment-form-url input 
/* Post comment button */ #respond #submit 
/* Commentator's name */ .thecomment .comment-text h6.author,.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 */ .alder-pagination a 
  
/* ----- WIDGETS ----- */
/* Widget titles */ .widget h4.widget-title 
/* Solo Pine's latest posts widget post titles */ .side-pop.list .side-pop-content h4 a 
/* Solo Pine's latest posts widget date */ .side-pop.list .side-pop-content span.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 text */ .footer-text 

104. How do I add a social media icon to Cassia that is not included in the theme?

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


To add in an icon to your Cassia sidebar's Social Media widget for a social network that is not included in the theme, you can manually insert one into the theme's code.
In this tutorial, we'll use Bloglovin' as an example.



FINDING THE ICON YOU'D LIKE TO USE

Cassia's social icons are pulled from the Font Awesome icon directory. They have loads of icons for various social networks, brands, etc. First, you'll want to visit the Font Awesome icon directory and find the icon you'd like to use.

Font Awesome's Icon Directory

Each icon has a Font Awesome ID code assigned to it.
They have yet to create an icon specifically for Bloglovin', so we'll go ahead and use their solid "heart" icon option instead. The text next to the icon is "heart". We'll note this down.


Cassia SM Icon Screenshot #1



ADDING THE SOCIAL ICON TO THE THEME

Now that we have our icon chosen, we'll manually add the necessary code to our theme's "social_widget.php" file. Because the Social Widget theme file is within a sub-folder and not the main theme file directory, we'll either need to access it via FTP, or, via a code editor plugin such as WPide (recommended).
Once installed & activated, WPide allows you to access and edit all of your theme files from your WP dashboard.

Locate the Cassia theme file called "social_widget.php" (within the "inc" folder and then within the "widgets" folder). Between Line 68 and Line 69, copy & paste the following code:

<a target="_blank" href="YOUR-URL-HERE"><i class="fa fa-heart round-icon"></i></a>


Cassia SM Icon Screenshot #2


Note: You'll want to replace the YOUR-URL-HERE text with the site URL you'd like to link users to.

If you're not using the heart icon, remember to replace the "heart" text with whatever Font Awesome icon ID code you'd like. Leave the other code elements the same.

For example, if you're adding a "Vine" icon, you'd ensure your code looked like:

<a target="_blank" href="YOUR-VINE-URL-HERE"><i class="fa fa-vine round-icon"></i></a>


Be sure to save the theme file when you're done. Refresh your site, and the new icon should be displaying!


105. Add a timer to Oleander's slider

Please note: This FAQ article is specifically for the Oleander theme.




To add a timer to Oleander's featured area slider in order to make the slides rotate automatically, we can make a slight adjustment to the theme's code.

First, we like to recommend installing a code editor plugin such as WPide in order to not only access the necessary theme file, but to also provide line numbers within the theme file itself. This makes following the below instructions much more easy.

Once you've installed WPide, you can navigate to
WP Dashboard > WPide > themes > oleander > "js" folder > and open up "solopine.js".
Between Lines 12 - 21, you should see this block of code for the slider:

// BXslider
$('.featured-area .bxslider').bxSlider({
    mode: 'fade',
    pager: false,
    nextText: '<i class="fa fa-angle-right"></i>',
    prevText: '<i class="fa fa-angle-left"></i>',
    onSliderLoad: function(){
        $(".sideslides").css("visibility", "visible");
    }
});


You can replace that block of code with the following block of code instead:

// BXslider
$('.featured-area .bxslider').bxSlider({
    mode: 'fade',
    pager: false,
    auto: ($(".bxslider div.feat-item-wrapper").length > 1) ? true: false,
    pause: 5000,
    nextText: '<i class="fa fa-angle-right"></i>',
    prevText: '<i class="fa fa-angle-left"></i>',
    onSliderLoad: function(){
        $(".sideslides").css("visibility", "visible");
    }
});


Do you see the bit in the new code that says "pause: 5000"? This tells WordPress how often to switch the slide. It is measured in milliseconds, so a number value of "5000" will change the slide once every 5 seconds.
You're welcome to increase or decrease this number value to whatever speed you prefer.

The new line of code above this tells the slider not to rotate if there's only 1 slide to display. It will remain static. However, if there's more than 1 slide to display, it will initiate the auto-rotate timer. 

Please be sure to save changes to the file when finished.
If you have a cache tool operating on your WP or browser, please also clear the cache to see the change.


106. Add social media icon bar to Rosemary's footer

Please note: This article is specifically for the Rosemary theme



By default, Rosemary doesn't include an area within its footer to display social media icons. In this walk-through, we'll go over the necessary steps to manually add a bar to Rosemary's footer area which will display your preferred social media icons. It will be placed above your copyright bar and below your Instagram slider (if applicable).

Please note that because they will be manually added to your footer area, if you need to change them in the future, you will need to do so within the "footer.php" file and not within Appearance > Customize > Social Media Settings like the other built-in icon features.






ADDING THE ICONS TO YOUR FOOTER

Let's get started!
Navigate to Appearance > Editor > and open up the "footer.php" file.

On Line 14, you will see the following bit of code:

<div id="footer">


ABOVE this line of code is a blank line. On blank Line 13, you can copy and paste the following code:

<div id="footer-social">
    <div class="container">
        <a href="YOUR-FACEBOOK-URL-HERE" target="_blank"><i class="fa fa-facebook"></i> <span>Facebook</span></a>
        <a href="YOUR-TWITTER-URL-HERE" target="_blank"><i class="fa fa-twitter"></i> <span>Twitter</span></a>
        <a href="YOUR-INSTAGRAM-URL-HERE" target="_blank"><i class="fa fa-instagram"></i> <span>Instagram</span></a>
        <a href="YOUR-PINTEREST-URL-HERE" target="_blank"><i class="fa fa-pinterest"></i> <span>Pinterest</span></a>
        <a href="YOUR-BLOGLOVIN-URL-HERE" target="_blank"><i class="fa fa-heart"></i> <span>Bloglovin</span></a>
        <a href="YOUR-GOOGLEPLUS-URL-HERE" target="_blank"><i class="fa fa-google-plus"></i> <span>Google Plus</span></a>
        <a href="YOUR-TUMBLR-URL-HERE" target="_blank"><i class="fa fa-tumblr"></i> <span>Tumblr</span></a>
        <a href="YOUR-YOUTUBE-URL-HERE" target="_blank"><i class="fa fa-youtube-play"></i> <span>Youtube</span></a>
        <a href="YOUR-RSS-URL-HERE" target="_blank"><i class="fa fa-rss"></i> <span>RSS</span></a>
    </div>
</div>


Your "footer.php" file should now look like this:

Screenshot:


In the code you just added, there are many lines of code that begin with "<a href=.....".
Each of these lines pertains to a specific social media network. We've included some you may not need.
To remove the social media networks you do not want to display in the footer area, simply delete that particular line of code.

When you are left with the social networks that you do indeed want to display, please remember to replace the dummy text YOUR-FACEBOOK-URL-HERE , etc. with the direct URL that links to your social network account instead.
NOTE: The " " quotation characters wrapping the URL are necessary to keep in the code.

When you're finished, be sure to save changes to the file.
If you ever need to make changes to the footer area's social icons, please note you will need to come back and do so within this file.



STYLING THE FOOTER'S SOCIAL MEDIA ICONS


Lastly, we'll navigate to Appearance > Customize > Custom CSS and add some styling for the icons.
You can copy and paste the following into the Custom CSS box.

#footer-social {
    background-color: #f1f1f1; 
    margin: 30px 0; 
    padding: 40px 0; 
    text-align: center;
}

#footer-social span {
    color: #c69f73; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    font-weight: 700; 
    font-size: 12px;
}

#footer-social a {
    margin-right: 20px;
}

#footer-social a i {
    background-color: #c69f73;       
    margin-right: 5px; 
    width: 30px; 
    height: 30px; 
    line-height: 30px; 
    color: #fff; 
    border-radius: 50%;
}


I have preset some example colors in the above code for the footer's social media icons.
I have set the bar's background color to be a light gray (#f1f1f1), the circular area & social networks' text to be the default Rosemary gold accent color (#c69f73), and the actual icons to be white (#ffffff).


Want to change the different elements to your preferred colors?

Below is the same code as I've noted above however, in this version, I've written which colors will affect which elements. Feel free to replace the different 6-digit hexadecimal color codes with your own colors.
NOTE: Please do not paste the below code into your Custom CSS box. Only use the code above which doesn't have notations made in it.


#footer-social {
    background-color: #f1f1f1;     <---  THIS IS THE FOOTER SOCIAL BAR'S BACKGROUND COLOR 
    margin: 30px 0; 
    padding: 40px 0; 
    text-align: center;
}

#footer-social span {
    color: #c69f73;                <--- THIS IS THE COLOR OF THE SOCIAL NETWORK TEXT
    text-transform: uppercase; 
    letter-spacing: 1px; 
    font-weight: 700; 
    font-size: 12px;
}

#footer-social a {
    margin-right: 20px;
}

#footer-social a i {
    background-color: #c69f73;     <--- THIS IS THE ICON'S CIRCLE'S BACKGROUND COLOR
    color: #ffffff;                   <--- THIS IS THE ICON'S COLOR
    margin-right: 5px; 
    width: 30px; 
    height: 30px; 
    line-height: 30px; 
    border-radius: 50%;
}


If you find yourself with any questions regarding this, please don't hesitate to open up a new support ticket and let us know! :-)



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

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



109. Moving the top bar below the logo image in Hemlock

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



The top bar includes your navigation menu, your social network icons, and your search function.
By default, it sits above your header's logo image. If you'd instead like to move your top bar to sit below your logo image, you can follow the steps below. 

Please note! The first section of this article will go over shifting the top-bar beneath the logo image. After doing this, the top-bar will no longer be "sticky", meaning that it won't stick to the top of the browser screen as the visitor scrolls down the page. If that's ok with you, you only need to accomplish the first section of these instructions. 

However, if you'd like to move the top-bar beneath the logo image AND keep the top-bar sticky when scrolling, this is also possible to do! There are just more steps involved. To move the top-bar and have it remain sticky, you'll want to complete both the first section of the steps below AND the second section of steps. Let's get started!




MOVE THE TOP-BAR BELOW THE LOGO IMAGE

Note: We recommend installing the code editor plugin called WPide when adjusting your theme's files. While accessing your theme files from within Appearance > Editor may be easy, the WPide plugin includes lovely line numbers which will make the below instructions much easier to follow!

Open up the theme's "header.php" file.
Between Lines 66 - 94, you'll see a big block of code beginning with header id="header" and
ending with /header.

This block of code looks like:

    <header id="header">
        
        <div class="container">
            
            <div id="logo">
                
                <?php if(!get_theme_mod('sp_logo')) : ?>
                    
                    <?php if(is_front_page()) : ?>
                        <h1><a href="<?php echo home_url(); ?>"><img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="<?php bloginfo( 'name' ); ?>" /></a></h1>
                    <?php else : ?>
                        <h2><a href="<?php echo home_url(); ?>"><img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="<?php bloginfo( 'name' ); ?>" /></a></h2>
                    <?php endif; ?>
                    
                <?php else : ?>
                    
                    <?php if(is_front_page()) : ?>
                        <h1><a href="<?php echo home_url(); ?>"><img src="<?php echo get_theme_mod('sp_logo'); ?>" alt="<?php bloginfo( 'name' ); ?>" /></a></h1>
                    <?php else : ?>
                        <h2><a href="<?php echo home_url(); ?>"><img src="<?php echo get_theme_mod('sp_logo'); ?>" alt="<?php bloginfo( 'name' ); ?>" /></a></h2>
                    <?php endif; ?>
                    
                <?php endif; ?>
                
            </div>
            
        </div>
    
    </header>


Copy this block of code and paste it onto the blank Line 26 (right above where it says nav id="navigation" ).





Be sure to go back down and remove that original block of header code below, otherwise you'll have two logo images appearing. Save the file when you're finished.

Then, within Appearance > Customize > Custom CSS, add the following:

#navigation {position: relative; margin-bottom: 70px;}
#header {margin-bottom: 0; padding-top: 0;}
.featured-area {margin-top: 70px;}




MAKE THE TOP-BAR STICKY AGAIN

So now your top-bar is below your logo image but it no longer "sticks" to the top of the screen when you scroll down the page. If you'd like to make it sticky once again, we'll need to install and implement a plugin that is not on the WordPress Plugin Directory. 

Download the necessary jQuery plugin from its website: http://stickyjs.com/

You don’t need to unzip the plugin package that you download. Within the plugin’s package, find the folder titled “jquery.sticky”. Copy everything within this file.

Within your WordPress, install the code editor plugin called "WPide" if ( http://wordpress.org/plugins/wpide ). This will let us access and edit the necessary theme files.  

Navigate to WP Dashboard > WPide > themes > hemlock > and open the "js" folder. 

Click the little "add new file" icon (it looks like a little white piece of paper with a green " + " plus-sign over it) and create a new file within the theme’s “js” folder. Title this file “jquery.sticky.js”. Paste the code you copied from the plugin's file into this new file and save.

Next, navigate to Hemlock's “functions.php” file. Scroll down to the section titled “Register & enqueue styles/scripts”. Add a new line among the others for this plugin and insert this line of code:

wp_register_script('jquery.sticky', get_template_directory_uri() . '/js/jquery.sticky.js', 'jquery', '', true);



Further down, we’ll also need to enqueue the script. 

Add the following code to your list of enqueued scripts:

wp_enqueue_script('jquery.sticky');



Save changes to this file.

Lastly, navigate to the “solopine.js” file, which is within Hemlock's "js" folder. 

Copy and paste the following bit of code onto blank Line 4. This is the blank Line beneath the “use strict”; line of code at the top of the document.

// Sticky Menu 
var $wpAdminBar = $('#wpadminbar'); 
if ($wpAdminBar.length) { 
$("#navigation").sticky({topSpacing:$wpAdminBar.height()}); 
} else { 
$("#navigation").sticky({topSpacing:0}); 
}




Save changes when finished.

If it doesn’t function right away or if your site goes white below the top-bar, you will want to clear any cache tools you have operating on your WordPress and/or your web browser. 

You're all set now!


110. Turn Oleander's featured area slider into an image gallery slider



Oleander's featured area slider allows you to highlight posts and/or pages of your choosing in a full-width spread. If you would prefer to use the slider as an image gallery instead of a featured post/page element, it's very possible to do! 




1 ) CREATE PAGES FOR YOUR IMAGES

Because the slider only recognizes posts or pages, we'll create a series of "dummy" pages. For each image you'd like to feature in the slider, you can create 1 dummy page. 

Give the pages any title you'd like. 
Assign one of your desired images as each of the page's "Featured Image". 
To learn how to assign one, check out: How do I add a Featured Image?

When finished, publish each page. 


2 ) DETERMINE YOUR PAGES' ID NUMBERS

Next, we'll need to determine the unique ID numbers of each dummy page you just created. Every time you publish a post or page, WordPress assigns it a number. We will use our newly-created dummy pages' ID numbers to target them for the slider. 

To learn how to determine a page's ID number, please check out: How to determine a post, page, or category ID

Note down each of your page's ID numbers. 


3 ) ADD YOUR IMAGES TO THE SLIDER

Navigate to WP Dashboard > Appearance > Customize > Featured Area Settings

Where it says "Select featured post/page IDs", enter your pages' ID numbers into the field. 
Please be sure to separate each page ID with a comma. 

Your dummy pages should now be displaying in your slider. 


4 ) HIDE THE SLIDER'S TEXT & HYPERLINK OVERLAY

To then hide the text overlay and the hyperlink function that covers the slider's image (so visitors can't click through to your dummy page), you can navigate to WP Dashboard > Appearance > Customize > Custom CSS, and copy & paste in the following code:

.feat-overlay {display: none;}


If you would also like to hide the left and right arrow icons that appear when you hover over your slider, you can copy & paste the following into your Custom CSS box as well:

.featured-area .bx-controls-direction {display: none;}


5 ) MAKE YOUR SLIDER AUTO-ROTATE

Lastly, to make your slider auto-rotate through the different images, we can add a timer function to it. 

You can reference the following article for the necessary steps: Add a timer to Oleander's slider


111. Add simple hyperlink text menu to Oleander's footer

If you'd like to insert a simple horizontal text menu into your footer's copyright text area, it's simple to do with some basic HTML and CSS! This can be perfect for adding a "disclaimer" or "privacy policy" link. 

Our blog themes will always have at least one text area in the footer of the theme. Generally, these are used to insert copyright text, though can also be used for any sort of notification or message you'd like. You can use this text box to insert a simple horizontal text menu. 

Navigate to WP Dashboard > Appearance > Customize > Footer Settings > Footer Copyright Text.



You may already have some copyright text in this "Footer Copyright Text" field and that's totally ok. 

To the RIGHT of the copyright text that is already there,  paste in this code:

<div id="footer-menu">
<ul>
<li><a href="LINK-URL">Menu Item 1</a></li>
<li><a href="LINK-URL">Menu Item 2</a></li>
<li><a href="LINK-URL">Menu Item 3</a></li>
</ul>
</div>

In the above code, be sure to replace the "LINK-URL" dummy text with the URL you want link to direct to. Change the "Menu Item 1" text next to it to whatever you want your link titled. 

For example, if you're planning on having  "Privacy Policy" and "Disclaimer" links, yours would look something like this:

<ul id="footer-menu">
<li><a href="https://example.com/privacy-policy">Privacy Policy</a></li>
<li><a href="https://example.com/disclaimer">Disclaimer</a></li>
</ul>


Save changes when finished. 

Lastly, navigate to WP Dashboard > Appearance > Customize > Custom CSS > and insert this code:

#footer-menu {display: inline-block;}
#footer-menu li {
display: inline-block;
margin-right: 10px;
font-size: 12px;
line-height: 24px;
}
#footer-copyright p {margin-right: 25px;}


Be sure to save changes when finished.

 



112. Add simple hyperlink text menu to Laurel's Footer

If you'd like to insert a simple horizontal text menu into your footer's copyright text area, it's simple to do with some basic HTML and CSS! This can be perfect for adding a "disclaimer" or "privacy policy" link. 

Our blog themes will always have at least one text area in the footer of the theme. Generally, these are used to insert copyright text, though can also be used for any sort of notification or message you'd like. You can use this text box to insert a simple horizontal text menu. 

Navigate to WP Dashboard > Appearance > Customize > Footer Settings > Footer Copyright Text.



You may already have some copyright text in this "Footer Copyright Text" field and that's totally ok. 

To the RIGHT of the copyright text that is already there,  paste in this code:

<div id="footer-menu">
<ul>
<li><a href="LINK-URL">Menu Item 1</a></li>
<li><a href="LINK-URL">Menu Item 2</a></li>
<li><a href="LINK-URL">Menu Item 3</a></li>
</ul>
</div>

In the above code, be sure to replace the "LINK-URL" dummy text with the URL you want link to direct to. Change the "Menu Item 1" text next to it to whatever you want your link titled. 

For example, if you're planning on having  "Privacy Policy" and "Disclaimer" links, yours would look something like this:

<div id="footer-menu">
<ul>
<li><a href="https://example.com/privacy-policy">Privacy Policy</a></li>
<li><a href="https://example.com/disclaimer">Disclaimer</a></li>
</ul>
</div>


Save changes when finished. 

Lastly, navigate to WP Dashboard > Appearance > Customize > Custom CSS > and insert this code:

#footer-menu {
display: block;
margin-top: 10px;
}
#footer-menu ul li {
display: inline-block;
margin-right: 15px;
}

Be sure to save changes when finished.

 



113. Why is my site title appearing twice in my browser tab?

If your site title is appearing twice in your browser tab, it's likely caused by an SEO plugin you have enabled. No worries, though! We have a quick fix.

Navigate to WP Dashboard > Appearance > Editor > and, on the right, open up the "header.php" theme file. Toward the top of this document, you should see the following line of code:

<title><?php wp_title('-', true, 'right'); bloginfo('name'); ?></title>


SEO Double Title Screenshot


You can replace that line of code with the following instead:

<title><?php wp_title('-', true, 'right'); ?></title><span class="redactor-invisible-space"></span>


Be sure to save the changes made to the theme file when you're finished.

114. Make Redwood's logo area full-width

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



By default, Redwood's logo image is centered within a container that is 1080px wide. If you have a larger logo image or full-width hero image that you'd like to exceed this 1080px width container, you can follow these steps to remove the width restriction on the logo image area.

We will need to access the theme's "header.php" file.
You can typically access this file via Appearance > Editor, via FTP, or via a code editor plugin such as WPide (recommended).


Within the "header.php" file, on Line 71, you will see the following code:

<div class="container">

You can delete this bit of code.

Then, on Line 95, you will see this bit of code:

</div>

You can delete this code as well.


Be sure to save the file when you're finished.

115. Have your Instagram Footer area display in 2 rows on mobile

Please note: This FAQ article is specifically for the Rosemary, Redwood, Florence, Oleander, and Hemlock themes. 



The Instagram Footer area, inserted via the trusty "WP Instagram Widget" plugin, will shrink down when viewed on smaller screen sizes. If you would prefer to have your Instagram Footer area "break" onto 2 separate rows when viewed on mobile devices, please find your theme below and follow the instructions. 



ROSEMARY


Rosemary's default Instagram Footer will display 6 Instagram images in 1 row across the bottom of your site.

If you would like your Instagram Footer area to appear in 2 rows of 3 images each when viewed on mobile screen sizes, you may copy and paste the following code into WP Dashboard > Appearance > Customize > Custom CSS

@media only screen and (max-width: 960px) {
#instagram-footer .instagram-pics li {
width: 33.3%;
margin-bottom: -3px;
}
}



REDWOOD


Redwood's default Instagram Footer will display 8 Instagram images in 1 row across the bottom of your site. When it is viewed on small mobile devices, the Instagram Footer area will reduce to 1 row of 4 images. 

If you would like your Instagram Footer area to appear in 2 rows of 4 images each when viewed on mobile screen sizes, you may copy and paste the following code into WP Dashboard > Appearance > Customize > Custom CSS

@media only screen and (max-width: 960px) {
#instagram-footer .instagram-pics li {width: 25%;}
}

@media only screen and (max-width: 767px) {
#instagram-footer .instagram-pics li {display: inline !important;}
}




FLORENCE


Please note: this is for the "WP Instagram Widget" plugin and not for the "Instagram Slider Widget" plugin. 

Florence's default Instagram Footer will display 8 Instagram images in 1 row across the bottom of your site. 

If you would like your Instagram Footer area to appear in 2 rows of 4 images when viewed on mobile screen sizes, you may copy and paste the following code into WP Dashboard > Appearance > Customize > Custom CSS

@media only screen and (max-width: 960px) {
#footer-instagram .instagram-pics li {width: 25%;}
}




HEMLOCK


Please note: this is for the "WP Instagram Widget" plugin and not for the "Instagram Slider Widget" plugin. 

Hemlock's default Instagram Footer will display 8 Instagram images in 1 row across the bottom of your site. 

If you would like your Instagram Footer area to appear in 2 rows of 4 images when viewed on mobile screen sizes, you may copy and paste the following code into WP Dashboard > Appearance > Customize > Custom CSS


@media only screen and (max-width: 960px) {
#footer-instagram .jr-insta-thumb ul li, #footer-instagram .instagram-pics li {
width: 25%;
}
}




OLEANDER


Oleander's default Instagram Footer area will display 8 Instagram images in 1 row across the bottom of your site. When it is viewed on small mobile devices, the Instagram Footer area will reduce to 1 row of 4 images. 

If you would like your Instagram Footer area to instead appear in 2 rows of 4 images when viewed on mobile screen sizes, you may copy and paste the following code into WP Dashboard > Appearance > Customize > Custom CSS.

@media only screen and (max-width: 960px) {
#instagram-footer .instagram-pics li {width: 25%;}
}

@media only screen and (max-width: 767px) {
#instagram-footer ul.instagram-pics > li {display: inline !important;}
}



If you find yourself with any questions, feel free to open up a new support ticket and let us know!

116. Beginning Basics: Getting Started with Sitka

We've compiled a documentation file that goes over everything from installing your Sitka theme to adjusting layouts, updating the theme, and more.

 Please feel free to acquaint yourself with the guide here: SITKA DOCUMENTATION 

If you find yourself with any questions whatsoever, don't hesitate to open up a new support ticket and let us know! We'd be happy to assist. 

117. CASSIA & HICKORY ARE RETIRING

After nearly 6 years, our Cassia and Hickory themes will be retiring from the marketplace.  

When we initially launched Solo Pine, Cassia and Hickory were our first themes. Our babies! They've been immensely meaningful to us. It's never an easy decision to pull a theme and it's not something we take lightly. However sentimental we are for them, the reason for retiring the two themes essentially boils down to their ability to adapt.  As the web changes, themes need to be able to adapt to continue functioning efficiently, securely, and intuitively. We've reached a point where Hickory and Cassia would require significant overhauling of their code structure to bring them up to current standards. 

We will be supporting our Cassia and Hickory themes via our support site (https://solopine.ticksy.com) for 6 months. Even if your support coverage has expired, please feel free to open up a new ticket with any theme-related questions via a support ticket during this time.

As of today, July 5, 2019, Cassia and Hickory will no longer be sold. They will no longer be updated. 
 
We will continue to support the two themes via our support site for 6 months. On January 5, 2020, we will no longer provide support coverage for our Cassia and Hickory themes. 

We understand this may be disappointing for those using Cassia and Hickory. We know some customers have faithfully used one or the other on their blogs for years. It's truly not a decision we've made lightly and sincerely apologize for any complications this may cause. 

Should you have any questions or concerns, we encourage you to reach out to us! 

118. 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;}

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


120. Adding a category description to your category pages

By default, your category pages will display the category title and your category posts (depending on the theme)-- yet no summary. If you'd like to add a bit of category description text on each of your category pages, it's quite easy! Please find the instructions for your particular theme below:









REDWOOD

To create your descriptions for each Category, navigate to WordPress Dashboard > Posts > Categories > Click 'Edit' for the category you would like to add a description to. Enter your desired description text into the form titled "Description" and click "Update" when finished.

Next, we'll need to add a bit of simple code to your theme's "category.php" theme file.
You can typically access this via WP Dashboard > Appearance > Editor > "category.php".

On Line 14, you will see this bit of lonely code:

</div>

On the blank line right BELOW this bit of code, copy and paste the following:

<div class="category-description"><p><?php echo category_description(); ?></p></div>

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

Lastly, copy and paste the following into Appearance > Customize > Custom CSS:

.category-description {margin-top: 50px; margin-bottom: 70px;}

Be sure to save when you're finished.




ROSEMARY

To create your descriptions for each Category, navigate to WordPress Dashboard > Posts > Categories > Click 'Edit' for the category you would like to add a description to. Enter your desired description text into the form titled "Description" and click "Update" when finished.

Next, we'll need to add a bit of simple code to your theme's "category.php" theme file.
You can typically access this via WP Dashboard > Appearance > Editor > "category.php".

On Line 14, you will see this bit of code:

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

On the blank line right BELOW this bit of code, copy and paste the following:

<div class="category-description"><p><?php echo category_description(); ?></p></div>

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

Lastly, copy and paste the following into Appearance > Customize > Custom CSS:

.category-description {margin-top: 50px; margin-bottom: 70px;}

Be sure to save when you're finished.



HEMLOCK

To create your descriptions for each Category, navigate to WordPress Dashboard > Posts > Categories > Click 'Edit' for the category you would like to add a description to. Enter your desired description text into the form titled "Description" and click "Update" when finished.

Next, we'll need to add a bit of simple code to your theme's "category.php" theme file.
You can typically access this via WP Dashboard > Appearance > Editor > "category.php".

On Line 14, you will see this bit of code:

<div id="main">

On the blank line right BELOW this bit of code, copy and paste the following:

<div class="category-description"><p><?php echo category_description(); ?></p></div>

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

Lastly, copy and paste the following into Appearance > Customize > Custom CSS:

.category-description {margin-top: 50px; margin-bottom: 70px;}

Be sure to save when you're finished.





FLORENCE

To create your descriptions for each Category, navigate to WordPress Dashboard > Posts > Categories > Click 'Edit' for the category you would like to add a description to. Enter your desired description text into the form titled "Description" and click "Update" when finished.

Next, we'll need to add a bit of simple code to your theme's "category.php" theme file.
You can typically access this via WP Dashboard > Appearance > Editor > "category.php".

On Line 14, you will see this little bit of code:

</div>

On the blank line right BELOW this bit of code, copy and paste the following:

<div class="category-description"><p><?php echo category_description(); ?></p></div>

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

Lastly, copy and paste the following into Appearance > Customize > Custom CSS:

.category-description {margin-top: 50px; margin-bottom: 70px;}

Be sure to save when you're finished.




CASSIA

To create your descriptions for each Category, navigate to WordPress Dashboard > Posts > Categories > Click 'Edit' for the category you would like to add a description to. Enter your desired description text into the form titled "Description" and click "Update" when finished.

Next, we'll need to add a bit of simple code to your theme's "archive.php" theme file.
You can typically access this via WP Dashboard > Appearance > Editor > "archive.php".

On Line 31, you will see this little bit of code:

<div id="main">

On the blank line right BELOW this bit of code, copy and paste the following:

<div class="category-description"><p><?php echo category_description(); ?></p></div>

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

Lastly, copy and paste the following into Appearance > Cassia Options > Custom CSS:

.category-description {margin-top: 50px; margin-bottom: 70px;}

Be sure to save when you're finished.




HICKORY

To create your descriptions for each Category, navigate to WordPress Dashboard > Posts > Categories > Click 'Edit' for the category you would like to add a description to. Enter your desired description text into the form titled "Description" and click "Update" when finished.

Next, we'll need to add a bit of simple code to your theme's "category.php" theme file.
You can typically access this via WP Dashboard > Appearance > Editor > "category.php".

On Line 4, you will see this little bit of code:

<div class="content sidebar">

On the blank line right BELOW this bit of code, copy and paste the following:

<div class="category-description"><p><?php echo category_description(); ?></p></div>

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

Lastly, copy and paste the following into Appearance > Hickory Options > Custom CSS:

.category-description {margin-top: 50px; margin-bottom: 70px;}

Be sure to save when you're finished.




OLEANDER

To create your descriptions for each Category, navigate to WordPress Dashboard > Posts > Categories > Click 'Edit' for the category you would like to add a description to. Enter your desired description text into the form titled "Description" and click "Update" when finished.

Next, we'll need to add a bit of simple code to your theme's "category.php" theme file. 
You can typically access this via WP Dashboard > Appearance > Editor > "category.php".

On Line 10, you will see this bit of lonely code:

</div>

On the blank line right ABOVE this bit of code, you can copy and paste the following:

<div class="category-description"><p><?php echo category_description(); ?></p></div>

Be sure to save changes to the file when finished. 

Lastly, navigate to Appearance > Customize > Custom CSS and copy & paste in the following to style the category description text a bit:

.category-description {margin: 30px 0;}

Be sure to save when you're finished. 



SPROUT & SPOON

To create your descriptions for each Category, navigate to WordPress Dashboard > Posts > Categories > Click 'Edit' for the category you would like to add a description to. Enter your desired description text into the form titled "Description" and click "Update" when finished.

Next, we'll need to add a bit of simple code to your theme's "category.php" theme file. 
You can typically access this via WP Dashboard > Appearance > Editor > "category.php".

On Line 6, you will see this bit of lonely code:

</div>

Create a new, blank line directly ABOVE this bit of code.
On this new, blank line (of what is now Line 6), you can copy and paste the following:

<div class="category-description"><p><?php echo category_description(); ?></p></div>

Be sure to save changes to the file when finished. 

Lastly, navigate to Appearance > Customize > Custom CSS and copy & paste in the following to style the category description text a bit:

.category-description {margin: 30px 0;}

Be sure to save when you're finished. 



LAUREL

To create your descriptions for each Category, navigate to WordPress Dashboard > Posts > Categories > Click 'Edit' for the category you would like to add a description to. Enter your desired description text into the form titled "Description" and click "Update" when finished.

Next, we'll need to add a bit of simple code to your theme's "category.php" theme file.   You can typically access this via WP Dashboard > Appearance > Editor > "category.php".

On Line 10, you will see this bit of code:

<div class="sp-container">

On the blank line directly ABOVE this bit of code, (Line 9), you can copy and paste the following:

<div class="category-description"><p><?php echo category_description(); ?></p></div>

Be sure to save changes to the file when finished. 

Lastly, navigate to Appearance > Customize > Custom CSS and copy & paste in the following to style the category description text a bit:

.category-description {margin-top: 40px; text-align: center;}

Be sure to save when you're finished. 




ALDER

To create your descriptions for each Category, navigate to WordPress Dashboard > Posts > Categories > Click 'Edit' for the category you would like to add a description to. Enter your desired description text into the form titled "Description" and click "Update" when finished.

Next, we'll need to add a bit of simple code to your theme's "category.php" theme file. You can typically access this via WP Dashboard > Appearance > Editor > "category.php".

On Line 19, you will see this bit of code:

<div class="sp-container <?php if(get_theme_mod('alder_sidebar_archive') == true) : ?>isfullwidth<?php endif; ?>"></div>

On the blank line directly BELOW this bit of code, (Line 20), you can copy and paste the following:

<div class="category-description"><p><?php echo category_description(); ?></p></div>

Be sure to save changes to the file when finished. 

Lastly, navigate to Appearance > Customize > Custom CSS and copy & paste in the following to style the category description text a bit:

.category-description {margin-bottom: 60px; text-align: center;}

Be sure to save when you're finished. 





121. Add Category Index to the Homepage or Blog in Laurel

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




Laurel 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: Laurel's Category Index Shortcode.


Alternatively, if you wish to display a Category Index on your homepage or blog page which contains your published 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 postfeed page). 

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:

[laurel_index title="Our latest adventures" cat="travel" amount="3" cols="3" offset="1"]


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

On Line 15 down from the top of the document, you'll see this line of code:

<div id="main" <?php if(get_theme_mod('laurel_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('[laurel_index title="Our latest adventures" cat="travel" amount="3" cols="3" offset="1"]'); ?>
</div>





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('[laurel_index title="Featured Desserts for Autumn" cat="desserts" amount="3" cols="3" display_date="no" display_title="yes"]'); ?>
    <?php echo do_shortcode('[laurel_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. 


122. Changing font family in Laurel - CSS Selectors

Please note: This article is specifically for the Laurel theme



This list of Laurel'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 Laurel'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 Laurel, please don't hesitate to open up a new support ticket and let us know!




/* ----- GENERAL BODY TEXT ----- */
p,.post-entry,.post-entry p
 
/* ----- HEADER AREA ----- */
/* Navigation menu items */    #nav-wrapper .menu li a 
/* Top-bar search text */    #show-search input
 
/* ----- FEATURED AREA SLIDER ----- */
/* Category */   .feat-overlay .cat a 
/* Post title */   .feat-overlay h2 a 
/* Summary text */   .feat-overlay p 
/* Slider read more button */   .feat-read-more a 
/* ----- PROMO BOXES ----- */
/* Promo box titles */   .promo-overlay  h4 
/* ----- POST HEADER ----- */
/* Post header title */    .post-header h2 a,.post-header h1 
/* Post header category */    .post-header .cat a 
/* ----- POST & PAGE CONTENT ----- */
/* Theme's body text */    .post-entry p 
/* Post excerpts */    .post-entry.is-excerpt p 
/* Post/Page blockquotes */    .post-entry blockquote p 
/* Post/Page numbered lists & bulletted lists */    .post-entry ul li,.post-entry ol li 
/* 'Read More ' post button */    .post-entry .read-more
 
/* 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 */   .index-item .grid-item .post-header h2 a 
/* Index post category */   .index-item .grid-item .post-header .cat a 
/* ----- CONTACT FORM 7  ----- */
/* Name, email, subject, message, etc. labels */   .wpcf7 p 
/* Input fields */   .wpcf7 input, .wpcf7 select, .wpcf7 textarea 
/* Submit button */   .wpcf7-submit 


/* ----- ARCHIVE PAGE ----- */
/* Browsing category, tag, etc. banner text */   .archive-box span 
/* Banner's category, tag, etc. title */   .archive-box h1 


/* ----- POST & PAGE FOOTER ----- */ 
/* Post date */   .post-meta .date a 
/* Post/page "On" & "By" text */   .post-meta .by 
/* Post author */   .post-meta .author a 
/* Post tags */   .post-tags a 
/* Previous Post / Next Post */    .post-pagi-title 
/* Previous Post / Next Post post title */   .post-pagination a 


/* ----- AUTHOR BOX ----- */
/* "About" text */   .author-content h5 .about-italic 
/* Post author name */   .author-content h5 a 
/* Author bio text */   .author-content p
 
/* ----- YOU MIGHT ALSO LIKE ----- */
/* Section's title */   .post-related h4.block-heading 
/* Post titles */   .item-related h3 a 
/* Post date */   .item-related span.date
 
/* ----- POST COMMENTS ----- */
/* Section's title */   .post-comments h4.block-heading 
/* "Reply" button */   .post-comments span.reply a 
/* "Leave a Reply" Text */   #respond  h3 
/* "Cancel Reply" button */   #respond h3 small a 
/* Name, email, website, etc. */   #respond label 
/* Post comment button */   #respond #submit 
/* Commentator's name */   .thecomment .comment-text h6.author,.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 */    .pagination a 

/* ----- WIDGETS ----- */
/* Widget titles */   .widget-title 
/* Solo Pine's latest posts widget post titles */   .side-pop.list .side-pop-content h4 a 
/* Solo Pine's latest posts widget date */   .side-pop.list .side-pop-content span.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 
/* WP text widget */     .textwidget
/* 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 ----- */
/* Instagram widget title */   .instagram-title 
/* Footer social icon text */   #footer-social a span 
/* Footer text */   #footer-bottom .copyright p 

123. Targeting text elements in Rosemary

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



Below, we've noted nearly all of Rosemary's text elements and how to target them with CSS in order to change font-size, font-family, etc. Should you have any questions regarding the below elements, want any clarifications, or would like a hand adjusting font-size/font-family of elements within Rosemary, please don't hesitate to open up a new support ticket and let us know!



/* Menu Items */
#nav-wrapper .menu li a {...;}
#nav-wrapper .menu li.current-menu-item > a, #nav-wrapper .menu li.current_page_item > a, 
#nav-wrapper .menu li a:hover {...;}
 
 
/* Top Bar Search */
#top-search input {...;}
 
 
/* Slider Overlay */
.feat-item .cat a {...;}
.feat-item .post-header h2 a {...;}
.feat-item .post-header .date {...;}
.feat-item .read-more {...;}
 
 
/* Promo Boxes */
.promo-area .promo-overlay h4 {...;}
 
 
/* Post Header */
.post .post-header .cat a {...;}
.post-header h2 a, .post-header h1 {...;}
.post .post-header .date {...;}
 
 
/* Post & Page Body Text */
 p {...;}
.post-entry blockquote p {...;}
.post-entry ul li, .post-entry ol li {...;}
.post-entry h1 {...;}
.post-entry h2 {...;}
.post-entry h3 {...;}
.post-entry h4 {...;}
.post-entry h5 {...;}
.post-entry h6 {...;}
.post .post-entry a .more-button {...;}
 
 
/*Post Footer Elements */
.post .meta-comments a {...;}
.post .meta-share {...;}
.author-content h5 a {...;}
.author-content p {...;}
.post-box-title {...;}
.item-related h3 a {...;}
.item-related span.date {...;}
.post-comments h4.post-box-title {...;}
.thecomment .comment-text span.author, .thecomment .comment-text span.author a {...;}
.thecomment .comment-text span.date {...;}
.post-comments span.reply a {...;}
#respond h3 {...;}
#respond label {...;}
#respond #submit {...;}
 
 
/* Grid Item Elements */
.grid-item .post-header .cat a {...;}
.grid-item .post-header h2 a {...;}
.sp-grid .post .list-meta .date {...;}
 
 
/* Pagination Elements */
.pagination a {...;}
 
 
/* Sidebar Widget */
#sidebar .widget-title {...;}
#sidebar .widget ul li a {...;}
#sidebar .widget .tagcloud a {...;}
.side-pop.list .side-pop-content h4 a {...;}
.side-pop-content span.sp-date {...;}
#sidebar .promo-overlay h4 {...;}
 
 
/* Footer Elements */
#footer .copyright.left {...;}
#footer .copyright.right {...;}


.


124. Adding a newsletter sign-up form to Oleander

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



Oleander comes with pre-stylings included for the "Mailchimp for WordPress" plugin. In order to add a MailChimp newsletter sign-up form widget to your sidebar, you can follow the instructions below.
We'll need to first create a MailChimp Account, install the necessary plugin, and then set up your newsletter widget.





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 a "List" within your MailChimp account. This is where all of your subscribers' information will be kept. 

To create a MailChimp List:
Log into your MailChimp account > In the top menu area, click "Lists" > Click the "Create List" button > Fill in the requested information like List name & the email address you will be sending your newsletter from, etc. > finalize creating your List. 

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 plugin onto your WordPress. Please be sure you're using this specific plugin. 


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 Oleander demo?

If you would like your newsletter sign-up form to look just like Oleander's demo, you can navigate to WP Dashboard > MailChimp for WP > Forms.

In the big text box, replace the code you see within with the following code instead:

<div class="subscribe">
    <div class="subscribe-overlay">
        <div class="subscribe-inner">          
            <div class="subscribe-form">
                <input type="email" name="EMAIL" placeholder="Your email address" required />
                <input type="submit" value="Subscribe" />
            </div>           
        </div>
    </div>
</div>


Be sure to save changes when you're finished.


3. ADDING THE NEWSLETTER WIDGET TO YOUR SITE

SIDEBAR AREA: To add the newsletter form to your sidebar, you can navigate to Appearance > Widgets > Drag & drop the widget titled "MailChimp Sign-Up Form" from the selection on the left into the box titled "Sidebar" on the right.
Save when finished.

FOOTER WIDGET AREA: To add the newsletter form to your footer area, you can navigate to Appearance > Widgets > Drag & drop the widget titled "MailChimp Sign-Up Form" from the selection on the left into the box titled "Footer 1", "Footer 2", or "Footer 3" on the right.
Save when finished.


125. Installation & Setup: Getting Started with Laurel


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




Whether you're brand new to WordPress or would just like a quick lesson on basic Laurel 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 Laurel and you're ready to get started-- great!

When you purchase a Laurel license from ThemeForest & download the theme package, you will receive a zipped folder titled "themeforest-18399837-laurel-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 "laurel.zip".

Important: DO NOT unzip this "laurel.zip" folder! This particular .zip folder should remain zipped.




"laurel.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 "laurel.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 Laurel 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 "laurel.zip".





Back to Top


CREATING A POST


Laurel 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 WP Dashboard > Posts > Add New


POST FORMATS


Pre-WP 5.0/Gutenberg update: Above your content box & toolbar, you'll see a series of tabs titled Standard, Gallery, Video, and Audio. Select whichever tab you'd like your post format to be in. Each tab will give you different input boxes depending on the content you'd like to add.

After WP 5.0/Gutenberg update: 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: http://solopine.com/laurel/sustainable-gardening-in-portland/



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 "+ Add Media" button within the "Gallery Post Format Options" box that has appeared. Select whatever images you'd like from your WordPress Media Library. 
Example of a gallery post: http://solopine.com/laurel/hiking-the-isle-of-skye/



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". When you preview or publish your post, the video will appear. 
Example of a video post: http://solopine.com/laurel/secret-beaches-of-the-olympics/

If you have also selected either post layout options which include the full-width featured image, you have the option of adding a custom background image that will appear behind your video player. To assign your custom image, click the "+ Add Media" button in the section titled "Custom Video Background Image". 



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". When you preview or publish the post, the track will appear. 
Example of an audio post: http://solopine.com/laurel/the-haunting-tunes-of-lord-huron/

If you have also selected either post layout options which include the full-width featured image, you have the option of adding a custom background image that will appear behind your audio player. To assign your custom image, click the "+ Add Media" button in the section titled "Custom Audio Background Image".

If your audio file is hosted via "Spotify", please be sure to select the check-box option titled "Spotify Link". This will ensure your audio player box is the correct size.





Once you've determined your post format, 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. 




POST LAYOUTS

You can set your singular post pages' layout globally via WP Dashboard > Appearance > Customize > Post Settings > Set default post layout

Choose from "Standard" layout (with sidebar), "Full Width" layout (no sidebar), "Standard Layout with Full Width Image", or "Full Width Layout with Full Width Image". 

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". Within is a menu titled "Template".  Choose your desired layout option. 





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.

To learn about how to add the "Read More"  button seen on the demo site to your posts, check out this article:  How do I add the "Read More" button to posts in Laurel?



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

  

 


For the "Page blog" template option, as soon as you select this template a new section titled "Page Blog Settings" will appear further down the screen. These settings allow you to display a feed of your published posts, like a blog feed. You can choose how many posts to show, blog layout, whether to include the sidebar, whether to include the Featured Area, and more. 

Once you've published your new page, it will not automatically appear in your main menu. For a tutorial on adding items to your main menu, 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





Laurel offers a unique shortcode 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.

In order to activate this shortcode option, you'll first want to ensure you've installed & activated the required Solo Pine Shortcode plugin. This plugin comes included with the theme. 


When you first activate Laurel, you should notice a banner notification across the top of your dashboard advising you to install specific required & recommended plugins.



Install & activate the Solo Pine Shortcode plugin by clicking the "Begin installing plugins" link. Check the boxes next to the plugins > select "Install" from the drop-down menu > and click "Apply".

After, follow the same steps yet select "Activate" from the drop-down menu (plugins need to be both installed AND activated to function).


For steps on how to implement and customize your Category Index feature, please refer to this article: Laurel's Category Index Shortcode.


 

Back to Top


HOMEPAGE 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 homepage 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 & 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 Laurel's demo logo with your own. 

Within this Customizer screen, you can also change where your logo image displays, adjust the size of your logo image, and even use a text logo instead of an image! 

For more detailed instructions on Laurel's various header & logo options, please reference this article: Setting up Laurel's Logo & Header Options



Back to Top


CREATING A MAIN MENU


Setting up Laurel's main menu is quite simple! For a walk-through on how to go about it as well as more specific how-to tutorials, 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: "Display Featured Image", "Hide Featured Image" or "Hide featured image only on single post pages"".





Back to Top


ADDING SOCIAL ICONS


First, please ensure you've installed and activated the bundled plugin called "Laurel Core". You should see a notification banner across the top of your WordPress Dashboard asking you to install required plugins, including this "Laurel 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 "Laurel 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

Once you enter your username into a particular social network's text box, its icon will appear in your top-bar & footer social icon areas. 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, navigate to WP Dashboard > Appearance > Widgets.

Drag the widget titled "Laurel: Social Icons" into your Sidebar's widget area. 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.


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 Laurel?



Back to Top


ENABLING THE FEATURED AREA SLIDER





Laurel's featured area slider displays any number of posts or pages of your choosing in a full-width element toward the top of the homepage.


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.

Laurel gives you two options for assigning an image to represent a post in the featured area slider:

  1. One option is to simply assign a Featured Image to your post. By default, this is the image that the featured area slider (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. Laurel also allows you to assign a specific image to represent the post in the featured area slider, separate from your post's Featured Image. To assign an alternate featured slider image, navigate to your post's create/edit screen and look in the meta box titled "Post Settings". Here, you can choose your "Custom Slider Image" which will only appear in the featured area slider to represent your post.


CHOOSING YOUR FEATURED AREA SLIDER'S POSTS:

Within Appearance > Customize > Featured Area Settings, you have 3 options for choosing which posts appear in your featured area:


  1. All latest posts: By default, the area will display your 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





Back to Top


SETTING UP YOUR PROMO BOXES




The 3 boxes below the featured area slider on Laurel's demo site are called Promo Boxes. These boxes allow you to draw special attention to any post, page, or general URL you'd like.

To set up your promo boxes, navigate to Appearance > Customize > Promo Box Settings.

Here, you can enable/disable the promo boxes and input your various promo box preferences.





For each of the 3 promo boxes, you have the option to enter a title, select an image, and input the URL you'd like that specific promo box to link to.



Back to Top


SETTING UP YOUR PROMO BOX WIDGETS




Laurel offers a special widget called "Laurel: Promo Box" to be used in your Sidebar area. 

This widget is similar to the regular Promo Box feature (explained in the section above) in that 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 "Laurel: Promo Box" widget into the sidebar area.

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 WIDGET




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

For steps on setting your newsletter form up, please check out this article:  How to setup Laurel'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 within the post's create/edit screen. This allows you to enable the sidebar on your singular post page on a post-by-post basis. Within the post's create/edit screen, scroll down to the "Post Settings" box. There will be a section titled "Post Layout" which lets you choose a layout with or without sidebar by clicking on the layout image you prefer.


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 "Templates" 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.
On the right, you will see the 2 widget areas in the theme.

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

First, ensure you've installed/activated the plugin called Smash Balloon Social Photo Feed. Once installed, it will be titled "Smash Balloon Instagram Feed". Navigate 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]



SOCIAL ICON AREA:
The footer's social icon area is directly connected with Laurel's top-bar social icon area. To choose which social icons you'd like to appear, enter your username for each social network platform within Appearance > Customize > Social Media Settings.

For more information, please reference the section above titled "Adding Social Icons".


COPYRIGHT TEXT AREA:
At the very bottom of the theme is a bar which features a text area to include copyright or disclaimer text. You are not required to include a copyright or disclaimer statement. In fact, you can type whatever you'd like in this area!

To edit the footer text area, look within
WP Dashboard > Appearance > Customize > Footer Settings.



Back to Top



Setting up your webshop

Laurel is compatible with the popular WooCommerce shop plugin. For instructions on how to get your webshop up and running, check out our full article here: Setting up your webshop.


Back to Top



For help troubleshooting issues in Laurel or to see some fun customization tutorials, check out all of Laurel's FAQ Articles here!  Laurel 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

126. Add an email icon to Hemlock

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


To add an email icon to your Hemlock social icons which would allow visitors to send you an email, you can follow these steps:

Hemlock Email Icon Screenshot #1


Adding an email social icon to your top-bar


Navigate to WP Dashboard > Appearance > Editor > and open up the theme's "header.php" file. Beginning on Line 49, you'll see a long list of the various social network icon options. At the bottom of the list, on the blank Line 58, you can copy and paste the following bit of code:

<a href="mailto:YOUR-EMAIL-ADDRESS-HERE?subject=ADD-SUBJECT-LINE-TEXT-HERE &body=ADD-DEFAULT-BODY-TEXT-HERE" target="_blank"><i class="fa fa-envelope-o"></i></a>


Hemlock Email Icon Screenshot #2


There are three optional elements within the above code that you can replace in order to customize how the email looks when a user clicks on the email icon:

Mail to: Replace the "YOUR-EMAIL-ADDRESS-HERE" dummy text in the code with the email address you would like the emails to automatically be addressed to.

Subject: Replace the "ADD-SUBJECT-LINE-TEXT-HERE" dummy text with the text you'd like to automatically appear in the email's subject line.

Body: Replace the "ADD-DEFAULT-BODY-TEXT-HERE" dummy text with any text you'd like to automatically appear in the body of the email. If you'd like the email body to be blank, you can simply remove the dummy text.

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


Adding an email social icon to your footer


Hemlock Email Icon Screenshot #3


To add an email social icon to your footer, navigate to WP Dashboard > Appearance > Editor > and open up the theme's "footer.php" file. 

Beginning on Line 32, you'll see a long list of the various social network icon options. On the blank Line 41, copy & paste the following code:

<a href="mailto:YOUR-EMAIL-ADDRESS-HERE?subject=ADD-SUBJECT-LINE-TEXT-HERE &body=ADD-DEFAULT-BODY-TEXT-HERE" target="_blank"><i class="fa fa-envelope-o"></i><span> Email</span></a>


Hemlock Email Icon Screenshot #4


There are four optional elements within the above code that you can replace in order to customize how the email looks when a user clicks on the email icon:

Mail to: Replace the "YOUR-EMAIL-ADDRESS-HERE" dummy text in the code with the email address you would like the emails to automatically be addressed to.

Subject: Replace the "ADD-SUBJECT-LINE-TEXT-HERE" dummy text with the text you'd like to automatically appear in the email's subject line.

Body: Replace the "ADD-DEFAULT-BODY-TEXT-HERE" dummy text with any text you'd like to automatically appear in the body of the email. If you'd like the email body to be blank, you can simply remove the dummy text.

Icon title: At the end of the code where it says "Email" between the two "span" tags, feel free to change this to whatever text you'd like. This text will appear after the social icon within the footer.

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


Adding an email social icon to your social icon widget


Hemlock Email Icon Screenshot #5


To add the email icon to your social icon widget, you can navigate to WP Dashboard > Appearance > Editor > "inc" folder > "widgets" folder > and open the file titled "wocial_widget.php". 

Beginning on Line 55 is a long list of the available social networks. Create a new, blank line immediately following the last option for "RSS" and before the closing "/div" tag. On this blank line, copy and paste the following:

<a href="mailto:YOUR-EMAIL-ADDRESS-HERE?subject=ADD-SUBJECT-LINE-TEXT-HERE &body=ADD-DEFAULT-BODY-TEXT-HERE" target="_blank"><i class="fa fa-envelope-o"></i></a>


Hemlock Email Icon Screenshot #6


To customize the "to" address, subject line, and body text of the email that will pop up for users, follow the previously noted steps above. When you're finished, be sure to save any changes to the "social_widgets.php" file.

127. Have Promo Boxes open in a new browser tab

Please note: This article is specifically for the Oleander, Laurel, and Redwood themes. 


REDWOOD THEME

To have your 3 Promo Boxes open in a new browser tab, we can add a little bit of code to their HTML code element. In order to access the necessary theme file, you will need to do so via FTP or via a code editor plugin such as WPide (http://wordpress.org/plugins/wpide). We recommend WPide for its ease. 

Once you've installed and activated WPide, you can navigate to WP Dashboard > WPide > themes > redwood > "inc" folder > "promo" folder > and open up the file titled "promo.php". 

In this document, there are 3 sections of code. Each section controls one of the 3 promo boxes. We'll need to make a code adjustment to each of these 3 sections to have them open in a new browser tab. 

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

<?php if(get_theme_mod('sp_promo1_url')) : ?><a href="<?php echo get_theme_mod('sp_promo1_url'); ?>" class="promo-link"></a><?php endif; ?>

You can replace that line of code with the following code instead:

<?php if(get_theme_mod('sp_promo1_url')) : ?><a target="_blank" href="<?php echo get_theme_mod('sp_promo1_url'); ?>" class="promo-link"></a><?php endif; ?>


Next, on Line 16, you'll see this line of code:

<?php if(get_theme_mod('sp_promo2_url')) : ?><a href="<?php echo get_theme_mod('sp_promo2_url'); ?>" class="promo-link"></a><?php endif; ?>

You can replace that with the following code instead: 

<?php if(get_theme_mod('sp_promo2_url')) : ?><a target="_blank" href="<?php echo get_theme_mod('sp_promo2_url'); ?>" class="promo-link"></a><?php endif; ?>


Lastly, on Line 27, you'll see this line of code for the 3rd Promo Box:

<?php if(get_theme_mod('sp_promo3_url')) : ?><a href="<?php echo get_theme_mod('sp_promo3_url'); ?>" class="promo-link"></a><?php endif; ?>

You can replace that line of code with the following code instead:

<?php if(get_theme_mod('sp_promo3_url')) : ?><a target="_blank" href="<?php echo get_theme_mod('sp_promo3_url'); ?>" class="promo-link"></a><?php endif; ?>


Save changes to the file when finished. 

If you have a cache tool operating on your WordPress and/or browser, it's recommended you clear the cache afterward. 




OLEANDER THEME 

To have your 3 Promo Boxes open in a new browser tab, we can add a little bit of code to their HTML code element. In order to access the necessary theme file, you will need to do so via FTP or via a code editor plugin such as WPide (http://wordpress.org/plugins/wpide). We recommend WPide for its ease. 

Once you've installed and activated WPide, you can navigate to WP Dashboard > WPide > themes > oleander > "inc" folder > "promo" folder > and open up the file titled "promo.php". 

In this document, there are 3 sections of code. Each section controls one of the 3 promo boxes. We'll need to make a code adjustment to each of these 3 sections to have them open in a new browser tab. 

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

<?php if(get_theme_mod('sp_promo1_url')) : ?><a href="<?php echo get_theme_mod('sp_promo1_url'); ?>" class="promo-link"></a><?php endif; ?>

You can replace that line of code with the following code instead:

<?php if(get_theme_mod('sp_promo1_url')) : ?><a target="_blank" href="<?php echo get_theme_mod('sp_promo1_url'); ?>" class="promo-link"></a><?php endif; ?>


Next, on Line 26, you'll see this line of code:

<?php if(get_theme_mod('sp_promo2_url')) : ?><a href="<?php echo get_theme_mod('sp_promo2_url'); ?>" class="promo-link"></a><?php endif; ?>

You can replace that with the following code instead: 

<?php if(get_theme_mod('sp_promo2_url')) : ?><a target="_blank" href="<?php echo get_theme_mod('sp_promo2_url'); ?>" class="promo-link"></a><?php endif; ?>


Lastly, on Line 45, you'll see this line of code for the 3rd Promo Box:

<?php if(get_theme_mod('sp_promo3_url')) : ?><a href="<?php echo get_theme_mod('sp_promo3_url'); ?>" class="promo-link"></a><?php endif; ?>

You can replace that line of code with the following code instead:

<?php if(get_theme_mod('sp_promo3_url')) : ?><a target="_blank" href="<?php echo get_theme_mod('sp_promo3_url'); ?>" class="promo-link"></a><?php endif; ?>


Save changes to the file when finished. 

If you have a cache tool operating on your WordPress and/or browser, it's recommended you clear the cache afterward. 




LAUREL THEME 

To have your 3 Promo Boxes open in a new browser tab, we can add a little bit of code to their HTML code element. In order to access the necessary theme file, you will need to do so via FTP or via a code editor plugin such as WPide (http://wordpress.org/plugins/wpide). We recommend WPide for its ease. 

Once you've installed and activated WPide, you can navigate to 
WP Dashboard > WPide > themes > oleander > "inc" folder > "promo" folder > and open up the file titled "promo.php". 

In this document, there are 3 sections of code. Each section controls one of the 3 promo boxes. We'll need to make a code adjustment to each of these 3 sections to have them open in a new browser tab. 

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

<?php if(get_theme_mod('laurel_promo1_url')) : ?><a href="<?php echo esc_url(get_theme_mod('laurel_promo1_url')); ?>" class="promo-link"></a><?php endif; ?>

You can replace that line of code with the following code instead:

<?php if(get_theme_mod('laurel_promo1_url')) : ?><a target="_blank" href="<?php echo esc_url(get_theme_mod('laurel_promo1_url')); ?>" class="promo-link"></a><?php endif; ?>


Next, on Line 25 or 26, you'll see this line of code:

<?php if(get_theme_mod('laurel_promo2_url')) : ?><a href="<?php echo esc_url(get_theme_mod('laurel_promo2_url')); ?>" class="promo-link"></a><?php endif; ?-->

You can replace that with the following code instead: 

<?php if(get_theme_mod('laurel_promo2_url')) : ?><a target="_blank" href="<?php echo esc_url(get_theme_mod('laurel_promo2_url')); ?>" class="promo-link"></a><?php endif; ?>


Lastly, on Line 38 or 39, you'll see this line of code for the 3rd Promo Box:

<?php if(get_theme_mod('laurel_promo3_url')) : ?><a href="<?php echo esc_url(get_theme_mod('laurel_promo3_url')); ?>" class="promo-link"></a><?php endif; ?>


You can replace that line of code with the following code instead:

<?php if(get_theme_mod('laurel_promo3_url')) : ?><a target="_blank" href="<?php echo esc_url(get_theme_mod('laurel_promo3_url')); ?>" class="promo-link"></a><?php endif; ?>


Save changes to the file when finished. 

If you have a cache tool operating on your WordPress and/or browser, it's recommended you clear the cache afterward. 





128. Installation & Setup: Getting Started with Florence

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



Whether you're brand new to WordPress or would just like a quick lesson on basic Florence 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.


To skip directly to a specific section in the article, please use this index:




INSTALLING THE THEME

So you've purchased Florence & you're ready to get started-- great!

When you purchase a Florence license from ThemeForest & download the theme package, you will receive a zipped folder titled "themeforest-9574909-florence-a-responsive-wordpress-blog-theme".
Unzip this first folder.

Within the unzipped theme package, you will find a number of folders such as demo content, logo image files, etc. There is also 1 additional zipped folder within, titled "florence.zip".

Important: DO NOT unzip this folder! This "florence.zip" folder should remain zipped.




"florence.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 "florence.zip" file > Click the "Install Now" button.


Screenshot


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 Florence 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 "florence.zip".





Back to Top



POSTS

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




CREATING A POST

To create a post, go to WordPress Dashboard > Posts > Add New.

Pre-WP 5.0/Gutenberg update: Above your content box & toolbar, you'll see a series of tabs titled Standard, Gallery, Video, and Audio. Select whichever tab you'd like your post format to be in. Each tab will give you different input boxes depending on the content you'd like to add.

After WP 5.0/Gutenberg update: 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. 




POST FORMATS


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: http://solopine.com/florence/floral-wallpaper/



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 the Gallery Post format, scroll down to the "Post Format Option" box. Click the "Pick Images" button and select whatever images you'd like from your WordPress Media Library.
Example of a gallery post: http://solopine.com/florence/pacific-northwest/



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. When you preview or publish your post, the video will appear.
Example of a video post: http://solopine.com/florence/cosmic-love/



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. When you preview or publish the post, the track will appear.
Example of an audio post: http://solopine.com/florence/my-silver-lining/



Once you've determined your post format, 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. 



POST LAYOUT

You can set your singular post pages' layout globally via WP Dashboard > Appearance > Customize > General Settings > Post Layout. Choose from "Sidebar" layout or "Full Width" layout (no sidebar). 

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 General Settings > 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'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



PAGES

A standard, static page is similar to creating a post in many ways, and is ideal for creating an 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 page with sidebar layout (default) or a full-width layout.
You can select this via the drop-down menu in the "Page Attributes" section titled "Template".

Screenshot of Classic WP Editor:


Screenshot of Gutenberg (WP 5.0) Editor:



Once you've published your new page, it will not automatically appear in your main menu. 

For a tutorial on adding items to your main menu, 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 page (described above)-- a category page is generated by WordPress after you add a category to your main menu.

First, ensure you've assigned the category to at least 1 post. Then, navigate to 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.




Back to Top



HOMEPAGE 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 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 homepage 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 & website in general. For example, within the "General Settings" tab, you can choose your homepage's layout and enable/disable he 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.

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



CREATING A MAIN MENU

Setting up Florence's main menu in the top-bar is quite simple! For a walk-through on how to go about it as well as more specific how-to tutorials, 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 post by navigating to Appearance > Customize > Post Settings > And checking the box next to "Hide featured image from top of post"





Back to Top



ADDING SOCIAL ICONS

First, please ensure you've installed and activated the bundled plugin called "Florence Core". You should see a notification banner across the top of your WordPress Dashboard asking you to install required plugins, including this "Florence Core" plugin. If you don't see this banner notification right away, you may need to navigate to WP Dashboard > Appearance. Once the "Florence Core" plugin is activated, the Social Media Settings section will appear within your Customizer. 


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 URL into this box unless prompted to do so. Only your related username is required.

Once you enter your username into a particular social network's text box, its icon will appear in your top-bar area and footer social icon area. If you leave a social network's box blank, the social icon will not appear in the top-bar or footer area.





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 Florence?



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, your posts, and/or your archive pages (category pages, tag pages, etc.) navigate to Appearance > Customize > General Settings. Here, you can choose from the various layout options to either include the sidebar or have a full-width layout without the sidebar.


ADDING WIDGETS TO YOUR SIDEBAR:
To add, remove, or edit your sidebar widgets, navigate to Appearance > Widgets.
On the left, you will see a list of the available widgets to choose from.
On the right, you will see a few different widget areas in the theme.

To add a widget to your sidebar, simply drag & drop a widget on the left into the widget area titled "Sidebar".





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.





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





Back to Top


SETTING UP YOUR PROMO BOX WIDGETS

 Florence includes a special widget called "Florence: 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 "Florence: Promo Box" widget into the sidebar area.



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 WIDGET



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

For steps on setting your newsletter form up, please check out this article:  How to setup Florence's newsletter widget


Back to Top




The footer area is the lower portion of the theme that will appear on all pages of your site. It includes:




ADDING INSTAGRAM WIDGET TO FOOTER:
Similar to the section above regarding "Setting up your Sidebar", the footer has a widget area titled "Footer Instagram" 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". Navigate to WP Dashboard > Instagram Feed > and click the big blue button to connect your Instagram account (if it isn't already). 

To add the widget, navigate to Appearance > Widgets.  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]

Save changes. 



SOCIAL ICON AREA:
The footer's social icon area is directly connected with Florence's top-bar social icon area. To choose which social icons you'd like to appear, enter your username for each social network platform within Appearance > Customize > Social Media Settings.

For more information, please reference the section above titled "Adding Social Icons"



COPYRIGHT TEXT AREA:
At the very bottom of the theme is a bar which features a "Back to Top" button on the right and the option to include copyright or disclaimer text on the left. You are not required to include a copyright or disclaimer statement. In fact, you can type whatever you'd like in this area!

To edit the text in this Copyright Text area, look within
Appearance > Customize > Footer Settings > Footer Copyright Text.






Back to Top


Instagram footer screenshot images by the talented @withhearts


Setting up your webshop

Florence 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 Florence or to see some fun customization tutorials, check out all of Florence's FAQ Articles here!



Back to Top

129. How to setup Hickory's widgetized homepage

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


One of Hickory's features is the ability to widgetize an entire page for easy customization and assembly. In this tutorial, we'll go over how to setup Hickory's widgetized homepage.

Navigate to Appearance > Hickory Options > Homepage Options > Select Homepage Layout. Here, you have 3 options for your homepage layout-- Grid Layout, List Layout, and Widgetized Homepage Layout.
Select "Widgetized Homepage Layout". Save changes when you're finished.

Hickory's Widgetized Homepage Screenshot #1


Next, go to Appearance > Widgets. On the right-hand side of the screen, there will be a widget area titled "Main Widget Area". This is where you can drag and drop the various widgets noted on the left side of the screen.
To delete and edit the widgets within your homepage's "Main Widget Area", click the widgets placed within it to reveal each one's settings/options.
To rearrange the order in which the widgets appear on your homepage, simply drag and drop them where you'd like them to appear within the widget area.

Hickory's Widgetized Homepage Screenshot #2



Screenr Video Walk-thru

Want more? Check out: Screenr Video on How to Setup Hickory's Widgetized Homepage



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

131. Auto-apply the Continue Reading button in all posts in Florence

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


The "Continue Reading" button in Florence is an excellent tool-- It gives your site's visitors a taste of your posts as well as keeps your homepage tidy & more easily navigable. By default, you will need to manually insert WordPress's Read More tag into your posts in order to have the "Continue Reading" button appear on your homepage posts. To learn how to go about this, check out: How do I get the "Continue reading" link?

Another option is to have WordPress automatically apply this Read More tag into all of your posts. This is a great option if your site already has a large number of published posts you'd rather not go through and manually apply the Read More tag to. Or, if you'd like the ease of simply not worrying about this extra step for all future posts.

Florence Read More Screenshot #1




Auto-apply "Continue Reading" button to all Standard Posts


To have the "Continue Reading" button auto-apply to all legacy & future posts (standard post format), we will make a slight adjustment to your theme's file(s).

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

On Line 71, you'll see the code for the "Continue Reading" button. It looks like this:

<?php the_content(); ?>


Replace that line of code with the following code instead:

<?php if(is_single()) : ?>
    <?php the_content(__('<span class="more-button">Continue Reading</span>', 'solopine')); ?>
<?php else : ?>
    <p><?php the_excerpt(); ?></p>
    <p><a href="<?php echo get_permalink(); ?>" class="more-link"><span class="more-button">Continue Reading</span></a></p>
<?php endif; ?>


Be sure to save the changes to your theme file when you're finished.




Changing the post summary length  



FOR STANDARD LAYOUT POSTS:

To set the number of words that will display from your post before the "Continue Reading" button appears, you can follow these steps: 

Navigate to WP Dashboard > Appearance > Theme Editor > and open up the file titled "functions.php". 
Please be very careful what you delete or add in this file! It is very sensitive. 

Scroll to the bottom of the file.
Beginning on Line 259, you'll see the section titled "THE EXCERPT".
Within this section, there is a line that looks like:

return 200;



The "200" number value determines the number of words in your post that will display on the homepage before the Read More tag kicks in. You can change this number value to whatever you prefer.

Be sure to save any changes to this file when you're finished.



FOR GRID LAYOUT POSTS

To adjust the number of words that appear in your post summary with Grid Layout, you can navigate to WP Dashboard > Appearance > Theme Editor > and open up the file titled "content-grid.php". 

On Line 26, you will see this line of code:

<p><?php echo sp_string_limit_words(get_the_excerpt(), 32); ?>…</p>


Do you see the "32" number value? This means that 32 words will appear in the summary before the summary ends. You can change this to whatever number you prefer. 

Save changes to the file when finished. 





132. How to add a comment counter to Florence

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





To add a comment counter to Florence's homepage under each post, you can follow a few easy steps. 

Please note: This will only add a comment counter to your homepage posts if you are using the standard or full-width post layout option. The List and Grid post layouts do not have the social share icons visible on the homepage.

Navigate to WP Dashboard > Plugins > Plugin Editor.
In the upper-right of the screen, you'll see a drop-down menu with the words "Select plugin to edit". 
From this drop-down, choose the "Florence Core" plugin. Click the "Select" button. 
On the right, click the "inc" folder. 
Finally, open the file titled "social_share.php". 

On Line 27, you'll see the following line of code:


<?php if ( comments_open() ) : ?><a href="<?php echo get_permalink(); ?>#comments_wrapper"><i class="fa fa-comments"></i></a><?php endif; ?>


Replace that line of code with the following code instead:


<?php if(comments_open()) : ?>
    <div class="comment-counter"><?php comments_popup_link('No Comments', '1 Comment', '% Comments', '', ''); ?></div>
<?php endif; ?>


Save the file when you're finished.


Next, navigate to WP Dashboard > Appearance > Theme Editor > and open up the "comments.php" file.
On Line 2, you'll see this line of code:

<div class="post-comments" id="comments_wrapper">


Replace that line of code with the following instead:

<div class="post-comments" id="comments">


Save changes to the file when finished. 

Lastly, within Appearance > Customize > Custom CSS/Additional CSS, copy & paste the following: 


.comment-counter {
display: inline-block;
margin-left: 15px;
}


Save changes. 

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

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


135. How do I setup / troubleshoot my Featured Area slider in Hemlock?

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


Setting up Hemlock's Featured Area slider:

In your WP dashboard > Appearance > Customize > Featured Area Settings

Here you can enable/disable the slider on your homepage, select a specific post category that will then populate the slider, hide the category name from displaying/overlaying the featured image on the slider, and choose the number of slides that will appear in the slider.

*Please note: The slider is coded to display 3 slides at a time. If you choose to have more than 3 slides display, the remainders will display when the user chooses to scroll over to them.


Can I choose which specific posts appear in the slider instead of an entire category?

Yes, there is a way to work around this. We recommend creating a new category titled something like "Featured." When you wish to have a particular post appear in the featured area, simply assign this "Featured" category to it along with any other categories that apply.

Within Appearance > Customize > Feature Area Settings, ensure that your "Featured" category is chosen.

If a category is not selected for the Featured Area slider, it will automatically display your Most Recent posts.


My Featured Area is not showing up!

No worries! This often due to simple mistakes. Please make sure you have checked the box next to "Enable Featured Slider" within Appearance > Customize > Featured Area Settings on your WP dashboard.

Also, make sure that you have assigned a Featured Image to your post. The Featured Area slider will pull the post's Featured Image to display. When you are creating/editing a post, there is a box on the bottom-right of the page titled "Featured Image." This is where you will need to upload the desired image.

For help on assigning a featured image, check out: How do I add a Featured Image?


What can I do if my Featured Area images are displaying in different sizes?

The images in the Featured Area slider need to be at least 650 x 440 px. If they are under these dimensions, WordPress cannot upscale them to fit the space correctly. However, if your images are larger than 650 x 440 px and are still displaying in wonky sizes, you may need to regenerate/refresh your images. We highly recommend the plugin called Regenerate Thumbnails.

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



137. Why are my posts' Featured Images missing from my RSS feed?

By default, WordPress won't automatically pull your post's Featured Image into the RSS feed. This can result in images not appearing on your Bloglovin', Feedly, or other RSS-based accounts.

To make your RSS feed include your images, we recommend installing & activating the plugin called Featured Image in RSS w/ Size and Position.

Please note: While this plugin should immediately help your RSS feed recognize and include posts' featured images, it can take some platforms (like Bloglovin', Feedly, etc.) up to 24 hours to re-crawl & scrape your site again for updated data.

138. Make Rosemary's logo area full-width

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


By default, Rosemary's logo image is centered within a container that is 1080px wide. If you have a larger logo image or full-width hero image that you'd like to exceed this 1080px width container, you can follow these steps to remove the width restriction on the logo image area.

We will need to access the theme's "header.php" file.
You can navigate to WP Dashboard > Appearance > Theme Editor > and open the "header.php" file. 

Within "header.php" file, on Line 68, you will see the following code:

<div class="container">


You can delete this code.

Then, on Line 92, you will see this bit of code:

</div>


You can delete this code as well.

Be sure to save the file when you're finished.

Lastly, navigate over to WP Dashboard > Appearance > Customize > Custom CSS/Additional CSS. Copy and paste the following code:

#logo img {
max-width: 100%;
width: 100%;
}


Be sure to save when you're finished.

For full-width images, we recommend using images with a width of at least 1920px.

Keep in mind that your image will size down proportionately based on the width of the device's screen (for example, imagining how the image will display on a mobile phone as opposed to a desktop screen), so using an image with a height of approximately 500px may be ideal. 

139. Targeting text elements in Florence - CSS Selectors

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



This list of Florence'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 Florence's text elements and how to target them with CSS in order to change their font-family using the "Easy Google Fonts" plugin. 

You can also use the following CSS selectors if you needed to apply another styling change to the text. For example, changing color or font-weight. This code can be pasted into your Appearance > Customize > Custom CSS box with the related parameters.  

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




/* ----- GENERAL BODY TEXT ----- */
p,.post-entry,.post-entry p


/* ----- MENU ITEMS ----- */
/* Top-bar menu items */   #navigation-wrapper .menu li a 


/* ----- POST HEADER - STANDARD POST ----- */
/* Post category */   .post-header .cat a 
/* Post title */   .post-header h2 a,.post-header h1 


/* ----- POST HEADER - GRID POST ----- */
/* Post category */   .post-header .cat a    
/* Grid item post title */   .grid-item .post-header h2 a 


/* ----- POST HEADER - LIST POST ----- */
/* Post category */   .post-header .cat a 
/* List item post title */   .list-item .post-header h2 a 


/* ----- POST & PAGE CONTENT ----- */
/* Post/page body text */   .post-entry p 
/* Blockquote */   .post-entry blockquote p 
/* Numbered lists */   .post-entry ol li 
/* Bulletted lists */   .post-entry ul li 

/* H-tags */
.post-entry h1 
.post-entry h2 
.post-entry h3 
.post-entry h4 
.post-entry h5 
.post-entry h6 

/* Post's Continue Reading */   .more-button 


/* ----- POST FOOTER ----- */
/* Post date & author name */   .post-meta .meta-info 


/* ----- HOMEPAGE POST PAGINATION ----- */
/* Older Posts / Newer Posts */   .post-pagination a 


/* ----- AUTHOR BOX ----- */
/* Author name */   .author-content h5 a 
/* Author bio */   .author-content p 


/* ----- YOU MIGHT ALSO LIKE ----- */
/* Section title */   .post-related .block-heading 
/* Post title */   .item-related h3 a 
/* Post date */   .item-related span.date 


/* ----- POST COMMENTS ----- */
/* Section title */   .post-comments .block-heading 
/* Comment author name */   .thecomment .comment-text span.author,.thecomment .comment-text span.author a 
/* Comment date */   .thecomment .comment-text span.date 
/* Comment text */   .comment-text p 
/* Leave a reply */   #respond h3 
/* Name, email, website, etc. */   #respond label 
/* Post comment */   #respond #submit 


/* ----- SIDEBAR WIDGETS ----- */
/* Widget title */   .widget-heading 
/* Widget body text */   .widget p 
/* Post widget post title */   .side-pop.list .side-pop-content h4 a 
/* Post widget post date */   .side-pop-content span.sp-date 
/* WP widget listed items */   .widget ul li a 
/* Tag widget */   .widget .tagcloud a 


/* ----- FOOTER AREA ----- */
/* Social icon text */   #footer-social a span 
/* Copyright/disclaimer text */   #footer-copyright 
/* Back to top button */   #footer-copyright .to-top 



140. Add text menu to Rosemary's footer


If you'd like to insert a simple horizontal text menu into your footer area, it's simple to do with some basic HTML and CSS! 

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

From approximately lines 18 - 19, you should see:

<p class="copyright left"><?php echo wp_kses_post(get_theme_mod('sp_footer_copyright_left')); ?></p>
<p class="copyright right"><?php echo wp_kses_post(get_theme_mod('sp_footer_copyright_right')); ?></p>

On blank line 20, beneath the "copyright right" line of code, paste in the following code:


<div id="footer-menu">
<ul>
<li><a href="LINK-URL">Menu Item 1</a></li>
<li><a href="LINK-URL">Menu Item 2</a></li>
<li><a href="LINK-URL">Menu Item 3</a></li>
<li><a href="LINK-URL">Menu Item 4</a></li>
</ul>
</div>



In the above code, be sure to replace the "LINK-URL" dummy text with the URL you want link to direct to as well as changing the "Menu Item" titles to whatever title you want your link to have. 

If you want more menu items than the 4 examples above, copy and paste additional lines.
Otherwise, if you don't require 4 menu items, feel free to delete any lines you don't need. 

Save changes when finished. 

Lastly, navigate to WP Dashboard > Appearance > Customize > Custom CSS > and insert this code:

#footer-menu {
display: block;
clear: both;
}
#footer-menu ul li {
display: inline-block;
margin-right: 15px;
}
#footer-menu ul li a {
font-size: 12px;
letter-spacing: 1px;
}

Be sure to save changes when finished.

 

141. How do I import the demo content?

Important to note: To ensure all content is imported correctly, please be sure to have installed all of the required plugins that are noted at the top of your WP Dashboard when you first installed & activated the theme.

Also good to note: While the XML file can import the demo site's content (demo posts, demo pages, demo menu items), it cannot import the Customizer settings (such as pre-set layouts). You will need to select your homepage layout, preferred colors, enable/disable sidebar, etc. within the theme's Customizer section. It only takes a moment to do! 


When downloading your theme from ThemeForest, be sure to choose the download option "All files and documentation". This will include the theme's demo content XML file within a folder titled "demo" or "demo content". You'll import this XML file into your WordPress Dashboard to import the various demo site posts, pages, images, etc. for your theme. 







This will import the demo site's images, posts, pages, etc.  



Importing widgets and Customizer settings 

Please note that the WordPress Importer won't import the Customizer settings or widgets from the demo website. You can download the Customizer and Widget import files from your theme below:

Rosemary
Redwood
Sprout & Spoon
Laurel
Alder

Please note that Hawthorn and Sitka have built in full demo import options. Check out the Hawthorn guide and the Sitka guide.

Once you have the 2 additional import files, you can follow these steps:

IMPORTING THE DEMO SITE WIDGETS AND CUSTOMIZER SETTINGS:



142. 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';}

143. Alder's Category Index Shortcode

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



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

THE CATEGORY INDEX SHORTCODE


First, make sure you've installed the required "Alder 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.

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:

 

[alder_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

[alder_index title="travel"]


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






CATEGORY

[alder_index cat="travels"]


We've inserted the parameter cat="" into the standard [alder_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:


[alder_index title="travel" cat="travels"]



 


AMOUNT OF POSTS

[alder_index amount="4"]


We've inserted the parameter amount="" into the standard [alder_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:

[alder_index title="travel" cat="travels" amount="4"]






COLUMNS

[alder_index cols="4"]


We've inserted the parameter cols="" into the standard [alder_index] shortcode.  
"Cols" refers to how many columns the category index grid will display your posts in. 
Alder'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:

[alder_index title="travel" cat="travels" amount="4" cols="4"]

 




DISPLAY POST TITLE?

[alder_index display_title="no"]


We've inserted the parameter display_title="no" into the standard [alder_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:

[alder_index title="travel" cat="travels" amount="4" cols="4" display_title="no"]





DISPLAY POST CATEGORIES?

[alder_index display_cat="yes"]


We've inserted the parameter display_cat="" into the standard [laurel_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:

[alder_index title="travel" cat="travels" amount="3" cols="3" display_cat="yes"]






DISPLAY POST IMAGE?

[alder_index display_image="no"]


We've inserted the parameter display_image="" into the standard [alder_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:

[alder_index title="travel" cat="travels" amount="4" cols="4" display_image="no"]






DISPLAY CATEGORY/VIEW ALL LINK?

[alder_index cat_link="no"]


We've inserted the parameter cat_link="" into the standard [alder_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:

[alder_index title="travel" cat="travels" cat_link="no"]






CUSTOM CATEGORY LINK TEXT

[alder_index cat_link_text="all destinations"]


We've inserted the parameter cat_link_text="" into the standard [alder_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:

[alder_index title="travel" cat="travels" cat_link_text="all destinations"]






SET POST OFFSET

[alder_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 [alder_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: 

[alder_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! Stack your shortcodes upon each other to create dynamic pages of content! Be creative!

144. Add Promo Boxes to Hemlock

Please note: This tutorial is specifically for the Hemlock theme.



Some of our themes, like Redwood and Oleander, offer an element called Promo Boxes which are 3 horizontally-aligned hyperlinked images. By default, Hemlock doesn't include this feature, though it is possible to manually insert Promo Boxes onto its post feed/blog page. 

To do so, navigate to Hemlock's WP Dashboard > Appearance > Editor > and open up the file titled "index.php". 

On Line 7, you will see this code:

<div class="container <?php if(get_theme_mod( 'sp_sidebar_home' )) : ?>sp_sidebar<?php endif; ?>">


BELOW this line of code, on blank Line 8, copy and paste the following block of code:

<div class="promo-area">
    
    <div class="promo-item" style="background-image:url('YOUR-IMAGE-URL-HERE')">
        <a href="YOUR-LINKING-URL-HERE" class="promo-link"></a>
        <div class="promo-overlay">
            <h4>PROMO BOX 1 TITLE</h4>
        </div>
    </div>
    
    <div class="promo-item" style="background-image:url('YOUR-IMAGE-URL-HERE')">
        <a href="YOUR-LINKING-URL-HERE" class="promo-link"></a>
        <div class="promo-overlay">
            <h4>PROMO BOX 2 TITLE</h4>
        </div>
    </div>
    
    <div class="promo-item" style="background-image:url('YOUR-IMG-URL-HERE')">
        <a href="YOUR-LINKING-URL-HERE" class="promo-link"></a>
        <div class="promo-overlay">
            <h4>PROMO BOX 3 TITLE</h4>
        </div>
    </div>
    
</div>


In this block of code, there are 3 sections.  Each section is related to 1 of the 3 Promo Boxes. 
Please be sure to replace the dummy YOUR-IMAGE-URL-HEREYOUR-LINKING-URL-HERE, and PROMO BOX TITLE text for each section with your own images, links, and text. 

NoteFor linking in an image, we recommend first uploading it to your WordPress Media Library. Once in your library, click the image and a box will pop up with its unique URL. Use this URL to pull in your desired image to the Promo Box.

Be sure to save changes when finished.


Lastly, navigate to WP Dashboard > Appearance > Customize > Custom CSS and copy & paste in the following code:

/****************************************/
/* Promo Area
/****************************************/
.promo-area {
    overflow:hidden;
    margin-bottom:60px;
}
.promo-item {
    display: table;
    width:293px;
    float:left;
    margin-right:30px;
    height:200px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding:16px;
    position:relative;
}
.promo-item:last-child {
    margin-right:0;
}
.promo-overlay {
    height: 100%;
    display: table-cell;   
    vertical-align: middle;   
    text-align:center;
    border:1px solid #fff;
}
.promo-overlay  h4 {
    color:#000;
    line-height:1.5em;
    padding:8px 12px 8px 13px;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:2px;
    background:#fff;
    display:inline-block;
    max-width:60%;
}
.promo-link {
    position: absolute; 
    height: 100%; 
    width: 100%;
    top: 0;
    left:0;
    z-index: 999999;
    display: block
}

@media only screen and (min-width: 942px) and (max-width: 1170px) {
.promo-item {
    width:293px;
    height:172px;
}}

@media only screen and (min-width: 768px) and (max-width: 960px) {
.promo-item {
    width:230px;
    height:135px;
    margin-right:18px;
}}

@media only screen and (max-width: 767px) {
.promo-item {
    width:100%;
    height:176px;
    margin-bottom:30px;
}}

@media only screen and (min-width: 480px) and (max-width: 768px) {
.promo-item {
    width:100%;
    height:200px;
    margin-bottom:30px;
}
.promo-item:last-child {
    margin-bottom:0;
}}


Save changes to your Custom CSS when finished. 


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


146. How to create a static homepage & separate blog page

By default, your homepage will also display your post feed, listing all of your latest posts for visitors to see. If you would like to instead have your homepage be a static page and your post feed display on a separate page, you can follow these instructions.

First, create your new homepage and blog pages within WP Dashboard > Pages > Add New.
For this tutorial, we will be naming our static homepage "Home" and our post feed page "Blog".


Static Homepage Screenshot #1


Next, navigate to Settings > Reading. At the top of this screen, you'll see a section titled "Front page displays" or "Your homepage displays". Click the little bubble next to the "A static page" option.
From this option's "Front page" drop-down menu, select your newly created "Home" page.
From the "Post page" drop-down menu, select your newly created "Blog" page.


Static Homepage Screenshot #2


Be sure to save changes when you're finished.

The last step involves adding your "Home" and "Blog" pages to your navigation menu.
To do so, go to Appearance > Menus. Click the "Pages" drop-down menu on the left, check the boxes next to your "Home" and "Blog" pages, and add them to the menu. Drag and drop them to wherever you'd like them to be positioned in your menu. Be sure to save when finished.
For more information and tips on setting up your menu, check out: How do I set up my navigation menu?


Static Homepage Screenshot #3


Now, when you refresh your site, your homepage will display your newly created "Home" page and your "Blog" page will now display your post feed.


Static Homepage Screenshot #4


Static Homepage Screenshot #5


147. Add a "Read More" link to your "About Me" widget




The About Me widget, often placed in a sidebar, can be a great little tool to welcome visitors to your site and introduce yourself. The widget area is a bit small, though, if you'd like to write a substantial amount of text. One option is to add a "Read More" link at the end of your short "About Me" widget text which will link visitors to your "About" page should they wish to continue learning about who you are in more detail.

Navigate to Appearance > Widgets > Set up your "About Me" widget as you'd like.
After the bit of text you enter into your widget, copy and paste the following bit of HTML code:

<a href="your-linking-URL-here">Read More...</a>


Please be sure to replace the dummy "your-linking-URL-here" text with the URL of your "About" page, or whatever page you'd like to link visitors to via this link. In the above code, we've set the wording to say "Read More..." though you are very welcome to change this to say whatever you'd prefer.

Be sure to save changes to your "About Me" widget when you're done.


148. Adjust Redwood's featured area slider timer

Please note: This FAQ article is specifically for the Redwood theme.




To adjust the auto-rotation of Redwood's slider, you can do so within the "solopine.js" file.

To get started, we like to recommend installing a code editor plugin such as WPide which will allow you to not only access the necessary theme file, but will also apply lovely line numbers to the file.
If you would rather not use a code editor plugin, you can make the change via FTP.

After WPide is installed and activated, you can navigate to WP Dashboard > WPide > themes > redwood > "js" folder > and open up "solopine.js".

Between Lines 12 - 22, you will see the following block of code for the featured area slider:

// BXslider
    $('.featured-area .bxslider').bxSlider({
        pager: false,
        auto: ($(".bxslider div.feat-item").length > 1) ? true: false,
        pause: 7000,
        nextText: '<i class="fa fa-angle-right"></i>',
        prevText: '<i class="fa fa-angle-left"></i>',
        onSliderLoad: function(){
            $(".sideslides").css("visibility", "visible");
        }
    });


Within, you can see a line of code which control the slider's auto-rotate speed:

pause: 7000,


The "pause" function tells the slider how often to rotate. By default, it is set to "7000". This is measured in milliseconds, so the slider will rotate every 7 seconds. You are very welcome to adjust the slider's speed by increasing or decreasing the number value.

Be sure to save changes when finished.



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

150. How to setup Sprout & Spoon's newsletter widget

Please note: This article is specifically for the Sprout & Spoon theme. 


Sprout & Spoon comes with custom CSS stylings for the "MailChimp for WordPress" plugin. This plugin allows you to insert a newsletter sign-up form in either your Sidebar area, beneath a Post on its singular page, or beneath the homepage's Featured Area.

If you would like to apply the same stylings to your newsletter form as seen on Sprout & Spoon'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 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 Sprout & Spoon demo?

If you would like your newsletter sign-up form to look just like Sprout's demo, you can navigate to WP Dashboard > MailChimp for WP > Forms.

In the big text box, replace the code you see within with the following code instead:

<div class="subscribe-box">
 
    <div class="subscribe-text">
      <h4>Never Miss a Recipe!</h4>
      <p>Sign up and 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>


Note: If you'd like to change the text from "Never Miss a Recipe!" to something else, you can do so on the 4th line of the above code. 

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 desired widget area on the right side of the screen. 


151. How to setup Alder's newsletter widget

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



Alder 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 beneath your Featured Area element. 

When a visitor adds their email via the form, it is saved to your chosen MailChimp mailing audience list. 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 Alder'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 Alder 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 Alder'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>


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 Widget Area Under Featured Area or Sidebar widget areas on the right side of the screen.




152. Changing font size in Florence - CSS Code

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



Would you like to change the font size of any of Florence's text elements? Below, we've noted nearly all of Florence'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 code next to it, and paste it into WordPress Dashboard > Appearance > Customize > Custom CSS.
We've listed each item with its default font size, so feel free to adjust it to whatever pixel size you prefer.

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: 16px;}
/* ----- MENU ITEMS ----- */
/* Top-bar menu items */   #navigation-wrapper .menu li a {font-size: 11px;}
/* Top-bar social icons */   #top-social a {font-size: 14px;}
/* ----- POST HEADER - STANDARD POST ----- */
/* Post category */   .post-header .cat a {font-size: 11px;}
/* Post title */   .post-header h2 a, .post-header h1 {font-size: 24px;}
/* ----- POST HEADER - GRID POST ----- */
/* Post category */   .post-header .cat a {font-size: 11px;}   
/* Grid item post title */   .grid-item .post-header h2 a {font-size: 18px;}
/* ----- POST HEADER - LIST POST ----- */
/* Post category */   .post-header .cat a {font-size: 11px;}
/* List item post title */   .list-item .post-header h2 a {font-size: 18px;}
/* ----- POST & PAGE CONTENT ----- */
/* Post/page body text */   .post-entry p {font-size: 16px;}
/* Blockquote */   .post-entry blockquote p {font-size: 18px;}
/* Numbered lists */   .post-entry ol li {font-size: 16px;}
/* Bulletted lists */   .post-entry ul li {font-size: 16px;}
/* H-tags */
.post-entry h1 {font-size: 27px;}
.post-entry h2 {font-size: 24px;}
.post-entry h3 {font-size: 21px;}
.post-entry h4 {font-size: 19px;}
.post-entry h5 {font-size: 17px;}
.post-entry h6 {font-size: 15px;}
/* Post's Continue Reading */   .more-button {font-size: 11px;}
/* ----- POST FOOTER ----- */
/* Post date & author name */   .post-header .post-date {font-size: 15px;}
/* ----- HOMEPAGE POST PAGINATION ----- */
/* Older Posts / Newer Posts */   .post-pagination a {font-size: 11px;}
/* ----- AUTHOR BOX ----- */
/* Author name */   .author-content h5 a {font-size: 14px;}
/* Author bio */   .author-content p {font-size: 16px;}
/* Author social icons */   .author-content a i.fa {font-size: 14px;}
/* ----- YOU MIGHT ALSO LIKE ----- */
/* Section title */   .post-related .block-heading {font-size: 14px;}
/* Post title */   .item-related h3 a {font-size: 11px;}
/* Post date */   .item-related span.date {font-size: 11px;}
/* ----- POST COMMENTS ----- */
/* Section title */   .post-comments .block-heading {font-size: 14px;}
/* Comment author name */   .thecomment .comment-text span.author, .thecomment .comment-text span.author a {font-size: 11px;}
/* Comment date */   .thecomment .comment-text span.date {font-size: 11px;}
/* Comment text */   .comment-text p {font-size: 16px;}
/* Leave a reply */   #respond h3 {font-size: 14px;}
/* Name, email, website, etc. */   #respond label {font-size: 14px;}
/* Post comment */   #respond #submit {font-size: 11px;}
/* ----- SIDEBAR WIDGETS ----- */
/* Widget title */   .widget-heading {font-size: 11px;}
/* Widget body text */   .widget p {font-size: 16px;}
/* Latest post widget post title */   .widget ul.side-newsfeed li .side-item .side-item-text h4 a {font-size: 13px;}
/* Latest post widget post date */   .widget ul.side-newsfeed li .side-item .side-item-text .side-item-meta {font-size: 11px;}
/* WP widget listed items */   .widget ul li a {font-size: 13px;}
/* Tag widget */   .widget .tagcloud a {font-size: 10px !important;}
/* ----- FOOTER AREA ----- */
/* Instagram widget title */   #footer-instagram h4.block-heading {font-size: 14px;}
/* Social icons */   #footer-social a i.fa {font-size: 14px;}
/* Social icon text */   #footer-social a span {font-size: 11px;}
/* Copyright/disclaimer text */   #footer-copyright {font-size: 11px;}
/* Back to top button */   #footer-copyright .to-top {font-size: 10px;}



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

154. How do I add the "Continue Reading" button to posts in Alder?

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



The "Continue Reading" link in Alder is a wonderful tool-- It gives your site's visitors a taste of your posts as well as keeps your homepage tidy & more easily navigable instead of displaying 100% of every post.

Alder gives you the option of either manually adding the "Continue Reading" link to each post, or, auto-applying the "Continue Reading" link to all posts with the click of a button.

Both options have pros & cons. We'll go over the differences between the two and how to enable either option below.




MANUALLY ADDING THE CONTINUE READING BUTTON:

Please note: This option is for the Homepage and Archive Page layout option that displays the "Full Post Layout". The "Read More" button is auto-applied for the List Layout. See further below for adjusting this layout option. 

 

Also known as the "Read More" tag, you can add the "Continue Reading" button to a post within the post's "create/edit" screen. Some people prefer the customizability of this option as they can choose where within the post they'd like to place the button and just how much content of the post they'd like shown on the homepage.

The downside is that manually inserting the "Read More" tag can be a bit tedious as it needs to be inserted into each of your posts.

To add a "Read More" tag to your post, you can navigate to the post's create/edit screen. In your post's toolbar, note the second-to-last icon. When you hover over it, it will say "Insert Read More Tag".




Clicking this icon will insert a dashed horizontal line with the word "MORE" centered within it. This is your "Read More Tag". 

You can drag & drop this horizontal line anywhere in the post's body where you'd like the "Read More" button to appear. WordPress will display all of the text above this "MORE" line, and will hide everything beneath it until the visitors clicks through to your singular post page.

Please also remember to navigate to WP Dashboard > Appearance > Customize > General Settings > Homepage/Archive Post Summary Type > and selected the "Use Read More Tag" option. 



AUTO-APPLYING THE CONTINUE READING BUTTON:

Another option would be to have the theme automatically apply this "Read More" tag into all of your posts. This is a great option if your site already has a large number of posts that you'd rather not go through and manually apply the "Read More" tag to. Or, if you'd like the ease of simply not worrying about this extra step for all future posts.

One thing to note is that this method uses the WordPress"excerpt" function. This function will filter out any HTML code including images and hyperlinks inserted at the beginning of your post (not including the Featured Image), so your excerpt will only display static text, not pictures or hyperlinks.

If it's important to you to have hyperlinked text or images within your post summary on the homepage/blog post page, you may want to consider the option above for manually inserting the "Read More" button.

To auto-apply the "Read More" tag to all of your posts, navigate to WP Dashboard >Appearance > Customize > General Settings > Homepage/Archive Post Summary Type > and choose the "Use Excerpt" option. 




It's that easy! 

 

 



CHANGING THE AUTO-APPLY WORD COUNT TO LENGTHEN/SHORTEN POST EXCERPTS:

If you use the option to auto-apply the "read more" tag to your posts, WordPress uses the "excerpt" function. WordPress determines where to place the "Read More" tag within your post based on how many words it counts through from the start of the post.

By default, Alder's excerpt will count through a particular number of words before placing the "Read More" tag depending on which blog layout option you're using:

You can change the number of words by making a slight adjustment to the theme's related layout file. See the instructions for each layout option below.


TO CHANGE THE EXCERPT WORD LENGTH FOR STANDARD/FULL POSTS

Navigate to WP Dashboard > Appearance > Editor > and open up the file titled "content.php"
On Line 103, you will see this line of code:

<p><?php echo alder_string_limit_words(get_the_excerpt(), 68); ?>…</p>


Do you notice the "68" number value in that code? This is the number of words the standard post layout's excerpt will display before automatically adding in the "Continue Reading" button. 

You can change the "68" number value to whatever number you prefer.
Please save changes to the file when finished.



TO CHANGE THE EXCERPT WORD LENGTH FOR LIST LAYOUT POSTS

Navigate to Appearance > Editor > and open up the file titled "content-list.php"
On Line 27, you will see this line of code:

<p><?php echo alder_string_limit_words(get_the_excerpt(), 26); ?>…</p>


Do you notice the "26" number value in that code? This is the number of words the list post layout's excerpt will display. 

You can change the "26" number value to whatever number you prefer.
Please save changes to the file when finished. 

155. Add text menu to Redwood's footer


If you'd like to insert a simple horizontal text menu into your footer area, it's simple to do with some basic HTML and CSS! 

Navigate to WP Dashboard > Appearance > Customize > Footer Settings > Footer Copyright Text field. If you have text in this field already, go to the very end of that text within the "Footer Copyright Text" field. 

Paste in the following code:

<div id="footer-menu">
<ul>
<li><a href="LINK-URL">Menu Item 1</a></li>
<li><a href="LINK-URL">Menu Item 2</a></li>
<li><a href="LINK-URL">Menu Item 3</a></li>
<li><a href="LINK-URL">Menu Item 4</a></li>
</ul>
</div>

In the above code, be sure to replace the "LINK-URL" dummy text with the URL you want link to direct to as well as changing the "Menu Item" titles to whatever title you want your link to have. 

If you want more menu items than the 4 examples above, copy and paste additional lines.
Otherwise, if you don't require 4 menu items, feel free to delete any lines you don't need. 

Save changes when finished. 

Lastly, navigate to WP Dashboard > Appearance > Customize > Custom CSS > and insert this code:

p.copyright {float: left;}
#footer-menu {float: right;}
#footer-menu ul li {
display: inline-block;
margin-left: 20px;
}
#footer {padding-bottom: 30px;}
@media only screen and (max-width: 768px) {
p.copyright {
float: none;
text-align: center;
}
#footer-menu {
float: none;
text-align: center;
margin-top: 20px;
}}

Be sure to save changes when finished.

 

156. Installation & Setup: Getting Started with Redwood

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





Whether you're brand new to WordPress or would just like a quick lesson on basic Redwood 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 and more.


To skip directly to a specific section in the article, please use this index:



INSTALLING THE THEME

So you've purchased Redwood & you're ready to get started-- great!

When you purchase a Redwood license from ThemeForest & download the theme package, you will receive a zipped folder titled "themeforest-11811123-redwood-a-responsive-wordpress-blog-theme".
Unzip this first folder.

Within the unzipped theme package, you will find a number of folders such as demo content, logo image files, etc. There is also 1 additional zipped folder within, titled "redwood.zip".

Important: DO NOT unzip this folder! This particular .zip folder should remain zipped.





"redwood.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 "redwood.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 Redwood 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 "redwood.zip".






Back to Top


POSTS


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




CREATING A POST


To create a post, go to WordPress Dashboard > Posts > Add New.


Pre-WP 5.0/Gutenberg update: Above your content box & toolbar, you'll see a series of tabs titled Standard, Gallery, Video, and Audio. Select whichever tab you'd like your post format to be in. Each tab will give you different input boxes depending on the content you'd like to add.

After WP 5.0/Gutenberg update: 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: http://solopine.com/redwood/summer-soiree-inspiration/


Gallery Post

A gallery post allows you to create a slideshow-type gallery at the top of your post. After clicking the "Gallery" tab to choose this post format option, click the "Pick Images" button within the "Gallery Images" box that has appeared. Select whatever images you'd like from your WordPress Media Library.
Example of a gallery post: http://solopine.com/redwood/my-latest-adventure/


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. When you preview or publish your post, the video will appear.
Example of a video post: http://solopine.com/redwood/fragments-of-iceland/


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. When you preview or publish the post, the track will appear.
Example of an audio post: http://solopine.com/redwood/lykke-li-no-rest/




POST LAYOUTS

You can set your singular post pages' layout globally via WP Dashboard > Appearance > Customize > General Settings > by checking or un-checking the box option titled "Enable sidebar on posts". 

When you first create a new post, its layout will automatically be set via whether or not you've selected this "Enable sidebar on posts" option or not. 

Additionally, you can change a post's layout on a post-by-post basis. To do so, open the post's edit screen. Scroll down below your post body text box to where you'll see a section titled "Post Options". Within the "Post Layout" drop-down, you can choose your desired layout.

 


In this section, you can also assign a "Custom Slider Image" to this post which will represent the post in the featured area slider and not its standard Featured Image. 




FEATURED IMAGE & CATEGORIES

Once you've determined your post format & post 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.

 




PUBLISH, PREVIEW, OR SAVE


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.

To learn about how to add the Continue Reading button seen on the demo site to your posts, check out this article: How do I add the "Continue Reading" button to posts in Redwood?



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




Once you've published your new page, it will not automatically appear in your main menu. For a tutorial on adding items to your main menu, 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 page (described above)-- a category page is generated by WordPress after you add a category to your main menu.

First, ensure you've assigned the category to at least 1 post. Then, navigate to 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.







Back to Top


HOMEPAGE 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 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 homepage 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 & 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.

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


CREATING A MAIN MENU

Setting up Redwood's main menu in the top-bar is quite simple! For a walk-through on how to go about it as well as more specific how-to tutorials, 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 post by navigating to Appearance > Customize > Post Settings > And checking the box next to "Hide featured image from top of post".





Back to Top


ADDING SOCIAL ICONS


First, please ensure you've installed and activated the bundled plugin called "Redwood Core". You should see a notification banner across the top of your WordPress Dashboard asking you to install required plugins, including this "Redwood Core" plugin. If you don't see this banner notification right away, you may need to navigate to WP Dashboard > Appearance. Once the "Redwood Core" plugin is activated, the Social Media Settings section will appear within your Customizer. 

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 URL into this box unless prompted to do so. Only your related username is required.

Once you enter your username into a particular social network's text box, its icon will appear in your top-bar & footer social icon areas. If you leave a social network's box blank, the social icon will not appear in the top-bar or footer areas.





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 Redwood?



Back to Top


ENABLING THE FEATURED AREA SLIDER





SETTING UP THE SLIDER:
Redwood's featured area slider is a large area toward the top of the homepage where you can feature eye-catching images linking to your posts. There are a few steps to ensure your slider works perfectly:

  1. First, ensure your posts have featured images assigned. This is the image that the slider will pull in to represent your post by default unless you've assigned a "Custom Slider Image" (this feature added in Redwood version 1.2)
    For more information, check out: How do I add a Featured Image? 
  2. To have your slide images display in their best quality, please ensure that the source images are at least 1080px in width & 660px in height. If your featured images are smaller than 1080x660 pixels, WP will upscale them to fit the slider's container size which may result in image graininess.
  3. Lastly, navigate to Appearance > Customize > Featured Area Settings > and check the box next to "Enable Featured Slider". Be sure to save. This will enable your slider on your homepage.



CHOOSING YOUR SLIDER'S POSTS:
Within Appearance > Customize > Featured Area Settings, you have 3 options for choosing which posts appear in your featured area slider.


  1. All latest posts: By default, the slider will display all of your latest posts.
  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 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 slider. To learn how to identify a post or page's ID, check out: How to determine a post, page, or category ID






CUSTOMIZING YOUR SLIDER:
To have your featured area slider display the full width of the page, you can check out this FAQ article on how to go about it here: Make Redwood's slider full-width.



Back to Top


SETTING UP YOUR PROMO BOXES




The 3 boxes below the featured area slider on Redwood's demo site are called Promo Boxes. These boxes allow you to draw special attention to any post, page, or general URL you'd like.

To set up your promo boxes, navigate to Appearance > Customize > Promo Box Settings.

Here, you can enable/disable the promo boxes, enable/disable the thin white interior border, and input your various promo box preferences.





For each of the 3 promo boxes, you have the option to enter a title, select an image, and input the URL you'd like that specific promo box to link to.



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, your posts, and/or your archive pages (category pages, tag pages, etc.) navigate to Appearance > Customize > General Settings. Here, you can check or uncheck the boxes next to "Disable Sidebar on Homepage", "Disable Sidebar on Posts", etc.

In Redwood version 1.2, we've included a plugin called "Solo Pine Meta Fields". When activated, this plugin will add a new meta box on your posts' create/edit screens. In this box, you can choose from the "Post Layout" options to have that particular post be full-width or include the sidebar. 


ADDING WIDGETS TO YOUR SIDEBAR:
To add, remove, or edit your sidebar widgets, navigate to Appearance > Widgets.
On the left, you will see a list of the available widgets to choose from.
On the right, you will see a few different widget areas in the theme.

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





Back to Top


SETTING UP YOUR PROMO BOX WIDGETS



Redwood includes a special widget called "Redwood: Promo Box" to be used in your sidebar widget area.

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 "Redwood: Promo Box" widget into the sidebar area.

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


The footer area is the lower portion of the theme that will appear on all pages of your site. It includes:







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

First, ensure you've installed/activated the plugin called Smash Balloon Social Photo Feed. Once installed, it will be titled "Smash Balloon Instagram Feed". Navigate 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]


SOCIAL ICON AREA:
The footer's social icon area is directly connected with Redwood's top-bar social icon area. To choose which social icons you'd like to appear, enter your username for each social network platform within Appearance > Customize > Social Media Settings.

For more information, please reference the section above titled "Adding Social Icons".



COPYRIGHT TEXT AREA:
At the very bottom of the theme is a bar which features a text area to include copyright or disclaimer text. You are not required to include a copyright or disclaimer statement. In fact, you can type whatever you'd like in this area!

To edit the text in this Copyright Text area, look within
Appearance > Customize > Footer Settings.



Back to Top


Setting up your webshop

Redwood 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 Redwood or to see some fun customization tutorials, check out all of Redwood's FAQ Articles here!



Back to Top


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



158. Make Laurel's Featured Area Slider as wide as the content container

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





By default, Laurel's Featured Area Slider will display at 100% width of your theme's container. If you would prefer to instead have your Featured Area Slider only be as wide as the content's container (for example, the width that your posts display in your blog feed), this is an easy customization! 

First, we will need to access the Featured Area Slider's theme file. In order to do so, we recommend installing the code editor plugin called WPide http://wordpress.org/plugins/wpide ). Once WPide is installed and activated, you can navigate to WP Dashboard > WPide > themes > laurel > "inc" folder > "featured" folder > and open up the file titled "featured.php". 

On the first line of this document, you will see this code:

<div id="featured-area" <?php if(get_theme_mod( 'laurel_promo' ) == true) : ?>class="promo-active"<?php else : ?>class="promo-inactive"<?php endif; ?>>


Push this line of code down in order to make the first line within the document blank.  Next, on what is now the first, blank line of the document, you can copy and paste the following bit of code:

<div class="sp-container">

The first few lines of within your "featured.php" file will now look like this:

<div class="sp-container">
<div id="featured-area" <?php if(get_theme_mod( 'laurel_promo' ) == true) : ?>class="promo-active"<?php else : ?>class="promo-inactive"<?php endif; ?>>
    
    <div class="sideslides">

Lastly, you can scroll to the very bottom of the document. 

On the last line of the document, you'll see this bit of code:

</div>

Directly below this on a blank line, you will repeat this same bit of code.  The last few lines of code in your "featured.php" file will now look like this:

     </div>
    
</div>
</div>

Be sure to save changes when finished.  If you have a cache tool operating on your WordPress and/or browser, you may need to clear the cache in order to see the changes. 

If you would like to add some spacing between your Featured Area Slider and the navigation menu, you can then navigate to Appearance > Customize > Custom CSS and copy & paste in the following.  I've set the spacing to be 50px, however you are of course very welcome to adjust this to whatever you prefer. 

#featured-area {
margin-top: 50px;
}

Save changes when finished. 

 

159. How to setup Laurel's newsletter widget

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


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

When a visitor adds their email via the form, it is saved to your chosen MailChimp mailing list. 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 Laurel'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 ( https://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 Laurel 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 Laurel'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>Sign up and 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>


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 "Sign up and 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 desired widget area on the right side of the screen.


160. Installation & Setup: Getting Started with Alder

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




Whether you're brand new to WordPress or would just like a quick lesson on basic Alder 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, and more.


To skip directly to a specific section in the article, please use this index:



INSTALLING THE THEME


So you've purchased Alder and you're ready to get started-- great!

When you purchase an Alder license from ThemeForest & download the theme package, you will receive a zipped folder titled "themeforest-19940618-alder-a-responsive-wordpress-blog-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 "alder.zip".

Important: DO NOT unzip this "alder.zip" folder! This particular .zip folder should remain zipped.

 



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





Back to Top


CREATING A POST


Alder 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

----------

Pre-WP 5.0/Gutenberg update: Above your content box & toolbar, you'll see a series of tabs titled Standard, Gallery, Video, and Audio. Select whichever tab you'd like your post format to be in. Each tab will give you different input boxes depending on the content you'd like to add.

After WP 5.0/Gutenberg update: 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: http://solopine.com/alder/top-5-cherry-blossom-festivals/


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: http://solopine.com/alder/americas-national-parks-on-a-budget/


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: http://solopine.com/alder/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: http://solopine.com/alder/coachellas-stellar-star-lineup/




Post Featured Image & Post Categories

Once you've determined your desired post format, 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. 




POST LAYOUT

You can set your singular post pages' layout globally via WP Dashboard > Appearance > Customize > General Settings > Post Layout. Choose from "Sidebar" layout, "Full Width" layout (no sidebar), or "Full Width Narrow" layout. 

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 from the "Template" drop-down. 





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.

To learn about how to add the "Read More"  button seen on the demo site to your posts, check out this article:  How do I add the "Read More" button to posts in Alder? 



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


  


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



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

In order to activate this shortcode option, you'll first want to ensure you've installed & activated the required Alder Meta Fields plugin. This plugin comes included with the theme package. 


When you first activate Alder, you should notice a banner notification across the top of your dashboard advising you to install specific required & recommended plugins.




Install & activate the Alder Meta Fields plugin by clicking the "Begin installing plugins" link. Check the boxes next to the plugins > select "Install" from the drop-down menu > and click "Apply".

After, follow the same steps yet select "Activate" from the drop-down menu (plugins need to be both installed AND activated to function).


For steps on how to implement and customize your Category Index feature, please refer to this article: Alder's Category Index Shortcode


 

Back to Top


HOMEPAGE 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 homepage 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 & 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 Alder'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 Alder's main menu is quite simple! For a walk-through on how to go about it as well as more specific how-to tutorials, 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: "Display Featured Image", "Hide Featured Image" or "Hide featured image only on single post pages"".





Back to Top


ADDING SOCIAL ICONS

First, please ensure you've installed and activated the bundled plugin called "Alder Core". 

To install and activate this plugin, navigate to WP Dashboard > Appearance > Install Plugins. Once you activate this plugin, your social icon options (as well as many more Customizer options) will appear. 


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

Once you enter your username into a particular social network's text box, its icon will appear in your top-bar & footer social icon areas. 

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, navigate to WP Dashboard > Appearance > Widgets.

Drag the widget titled "Alder: Social Icons" into your sidebar's widget area. 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.


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 Alder? 



Back to Top


ENABLING THE FEATURED AREA





Alder's featured area displays 3 posts or pages of your choosing in a boxed element toward the top of the homepage.


ENABLING YOUR FEATURED AREA:

To enable your featured area, 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.

 

Alder gives you two options for assigning an image to represent a post in the featured area:

  1. Featured Image: One option is to simply assign a Featured Image to your post. 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: Alder also allows you to assign a specific image to represent the post in the featured area, 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.
  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






Back to Top


SETTING UP YOUR INSTAGRAM HEADER/FOOTER





Alder's header has a widget area titled "Instagram Header" where you can add in a widget to display your Instagram images in a full-width element.  It also has a widget area in the Footer titled "Instagram Footer" if you prefer to place your Instagram feed there. 

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. Depending on where you want your Instagram feed to display (header or footer), drag a "Custom HTML" widget from the left into either your "Instagram Header" widget area OR your "Instagram Footer" widget area. 

Then, copy & paste in the plugin's shortcode within that "Custom HTML" widget:

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





Back to Top





SETTING UP YOUR PROMO BOX WIDGETS




 

Alder offers a special widget called "Alder: Promo Box" to be used in your sidebar area. 

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 "Alder: Promo Box" widget into the sidebar area.

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





Alder 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 the area beneath your featured area element.

For steps on setting your newsletter form up, please check out this article:  How to setup Alder'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. 

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.
On the right, you will see the 3 widget areas in the theme.

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:





SOCIAL ICON AREA:

The footer's social icon area is directly connected with Alder's top-bar social icon area. To choose which social icons you'd like to appear, enter your username for each social network platform within Appearance > Customize > Social Media Settings.

For more information, please reference the section above titled "Adding Social Icons".


COPYRIGHT TEXT AREA:
On either side of Alder's footer social icons 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 area, look within
WP Dashboard > Appearance > Customize > Footer Settings.


INSTAGRAM FOOTER FEED:

Like the optional Instagram feed in the theme's Header area, there is also the option of having your Instagram feed appear in the Footer area instead. You can reference the steps above on how to setup your Instagram header/footer area




Back to Top


Setting up your webshop

Alder is compatible with the popular WooCommerce shop plugin. For instructions on how to get your webshop up and running, check out our full article here: Setting up your webshop.


Back to Top




For help troubleshooting issues in Alder or to see some fun customization tutorials, check out all of Alder's FAQ Articles here!  Alder 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

161. 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 "JavaScript Options" and the "CSS Options". Save changes and empty the cache. 

Run your site through the Google Search Console "Mobile Friendly Test" again and see what it now says. Still having issues? Don't hesitate to let us know via a new support ticket!

162. Adjust Grid layout's summary length in Hemlock

Please note: This article is specifically for the Hemlock theme


When you implement the Grid Layout option in Hemlock, it will display a little image thumbnail followed by an excerpt of your post's text. By default, this is set to display 19 words before it ends in a "...". 

If you would like to adjust how many words WordPress displays in your Grid Layout post summary, you can follow the steps below:



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

Note: Please be very careful what you add or delete in this file as it is very sensitive!

Scroll to the bottom of the document. 
Here, you will see this block of code:

//////////////////////////////////////////////////////////////////
// THE EXCERPT
//////////////////////////////////////////////////////////////////
function custom_excerpt_length( $length ) {
    return 19;
}
add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );

function new_excerpt_more( $more ) {
    return '…';
}
add_filter( 'excerpt_more', 'new_excerpt_more' );


Do you see the number "19" toward the top of the code block?

This is the number which determines how long your Grid Layout post summary will be. You may change this "19" to whatever number you prefer. 

When you're finished, be sure to save changes to the file. 


163. Targeting text elements in Oleander: CSS Selectors

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




This list of Oleander'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 Oleander's text elements and how to target them with CSS in order to change their font-family using the "Easy Google Fonts" plugin. 

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



/* ----- GENERAL THEME BODY TEXT ----- */
p,.post-entry,.post-entry p
/* ----- TOP-BAR ----- */
/* Top-bar search text */   #top-search input 
/* ----- NAVIGATION MENU ----- */     #nav-wrapper .menu li a 
/* ----- SLIDER ----- */
/* Slider category */   .feat-overlay .cat a  
/* Slider post title */   .feat-overlay h2 a 
/* Slider sub-title */     .feat-overlay p 
/* Slider read more button */   .feat-more 
/* ----- PROMO BOXES ----- */
/* Promo box title */   .promo-overlay h4 
/* Promo box sub-title */     .promo-overlay h4 span
 
/* ----- POST HEADER ----- */
/* Post header title */   .post-header h2 a,.post-header h1 
/* Post header "in" text */     .post-header .cat span 
/* Post header category */    .post-header .cat a 
/* Post header comment count */     .comment-box a 
/* ----- POST & PAGE CONTENT ----- */
/* Post/Page body text */    .post-entry p 
/* Post/Page blockquotes */   .post-entry .wp-block-quote p 
/* Post/Page numbered lists & bulletted lists */   .post-entry ul li,.post-entry ol li 
/* Post 'Continue Reading' button */   .more-button 
/* Post/Page H-tags */
.post-entry h1 
.post-entry h2 
.post-entry h3 
.post-entry h4
.post-entry h5 
.post-entry h6 
/* ----- ARCHIVE PAGES ----- */
/* Browsing category, tag, etc. banner text */   .archive-box span 
/* Banner's category, tag, etc. title */   .archive-box h1 
/* ----- POST & PAGE FOOTER ----- */ 
/* Post footer date */   .meta-info .meta-date 
/* Post/page "By" text */   .meta-info .by 
/* Post/page footer author name */   .meta-info a 
/* Social share button text */   .post-share a span 
/* ----- AUTHOR BOX ----- */
/* "About" text before author name */     .author-content h5 .about-italic 
/* Post author name */   .author-content h5 a 
/* Author bio text */   .author-content p 
/* ----- YOU MIGHT ALSO LIKE ----- */
/* Section's title */   .post-related h4.widget-title 
/* Post titles */   .item-related h3 a 
/* Post date */   .item-related span.date 
/* ----- POST COMMENTS ----- */
/* Section's title/counter */   .post-comments h4.widget-title 
/* Leave a reply */   #respond h3 
/* Name, email, website, etc. */   #respond label 
/* Post comment button */   #respond #submit 
/* Commentator's name */   .thecomment .comment-text h6.author,.thecomment .comment-text h6.author a 
/* Comment's date & time */   .thecomment .comment-text span.date 
/* Comment's text */   .thecomment p 
/* ----- POST PAGINATION ----- */
/* Homepage Older Posts/Newer Posts */   .pagination a  
/* In-post Previous Post/Next Post */    .post-pagination a 
/* ----- WIDGETS ----- */
/* Widget titles */   h4.widget-title 
/* Latest posts widget post titles */   .widget ul.side-newsfeed li .side-item .side-item-text h4 a 
/* Latest posts widget date */   .widget ul.side-newsfeed li .side-item .side-item-text .side-item-meta 
/* 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 
/* About widget text */   .about-widget p 
/* About widget title text */   .about-title 
/* Newsletter widget */   .widget_mc4wp_form_widget input 
/* ----- FOOTER AREA ----- */
/* Footer social icon text */   .footer-social a 
/* Footer copyright/disclaimer text */  #footer-copyright p 
/* Back to top */     .back-to-top 
/* ----- WOOCOMMERCE ----- */
/* WooCommerce buttons */     .woocommerce #respond input#submit,.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 


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


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