Rosemary - A Responsive WordPress Blog Theme

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