Nectar Documentation

Overview

Thank you for choosing Nectar for your website project. I hope that you find it makes your project easy to realize so that you can focus more time on growing your business.

Below, please find all of the documentation to customize your theme that you have just purchased. I have seperated this document into categories for your ease of use. You can use the top navigation to jump to any desired area.

If you have any questions or comments regarding your theme, please feel free to contact support. Also, if you are happy with the theme, I would be grateful for your feedback with a Review on the MOJO website. Thanks so much!

Back To Top

Installation

To install the Nectar Theme you will need WordPress v3.5 or newer. Installing the theme can be done two ways. You can upload the theme ZIP file using the built in WordPress theme upload, or copy the files through an FTP client.

Using the WordPress Theme Upload Option

Be sure to extract the file nectar-theme.zip from the "Nectar - Theme and Documentation" download before uploading. Using the "Nectar - Theme and Documentation" zip file directly will result in a "Missing Style Sheet" error.

  1. Login to your WordPress admin.
  2. Go to Appearance > Themes (in the left menu).
  3. At the top of the page, click the Add New button.
  4. At the top of the next page, click Upload Theme, then click Choose File button to select a file.
  5. Select the zipped theme file, nectar-theme.zip, and click Install Now
  6. After installation you will receive a success message confirming your new install.
  7. Click the link Activate.

Uploading by FTP

  1. Login to your FTP server and navigate to your WordPress themes directory.
    In many cases, this would be wp-content/themes.
  2. Extract the files from the zipped theme.
  3. Copy the folder Nectar to your themes directory.
  4. After the files finish uploading, login to your WordPress admin.
  5. Go to Appearance/Themes.
  6. Click on the image for Nectar.
  7. On the pop-up, click the Activate button.

Finished with Installation?

Once the theme is installed you can configure it for your content. See the sections below on configuring the theme to start adding your content.

Back To Top

Theme Options

Whenever a setting is changed in the Theme Options panel, scroll to the bottom of the page and click the Save Options button.

To access the Theme Options, go to Appearance / Theme Options in the left menu.

Note: Clicking the Restore Defaults button will erase all values for the entire Theme Options panel, not just the section that is currently being viewed. Use caution when clicking this button as you can lose valuable data if not careful.

Theme Options - General

Logo Upload

  • By default, Nectar will display your website name at the top of your site. If you wish to use a logo image instead, go to Logo and click the Upload button.
  • When the image uploader pops up, you will be given two options (Upload Files or Media Library). Choose the method you wish to add your logo, choose the image, and click the Select button.
  • If you wish to have a retina optimized logo, you will need to have a version of the logo with the same file name plus the addition of "@2x" to the end. For example, logo.png and logo@2x.png. The @2x version should be a size that is twice the dimensions of the regular version. For example, if the regular logo is 230px x 60px then the @2x version should be 460px x 120px. Both files should be located in the same directory of the Media Library.

Favicon Upload

  • A favicon is the small icon seen in the url or tab bar of most browsers. It's also referred to as a bookmark icon. Favicons should be either 16px (square) or 32px (square) and should be either a .png file or an .ico file. To add a favicon, use the Upload button.
  • When the image uploader pops up, you will be given two options (Upload Files or Media Library). Choose the method you wish to add your favicon, choose the image, and click the Select button.

Custom CSS

  • Nectar comes with the option to add custom CSS as needed to completely stylize every aspect of the site. To add new CSS rules, paste them into the textarea provided. Valid CSS standards should be followed when adding additional CSS.

Theme Options - Colors

Changing colors

  • To change the colors used throughout the site, select the option that you wish to change (Call to Action, Font, Menu Bar, etc). Click the Select Color button. A pop-up will appear, providing several options for selecting a new color. You can enter 6 digit hexadecimal codes in the top field, or you can use the color selector tools to view additional colors. If needed, the Default button for that color can be clicked to revert back to the default color for that option. The Default button is not to be confused with the Restore Default button which will erase all of your Theme Options custom settings.

Theme Options - Fonts

Changing the body font

  • Any Google Font can be used as the body font for the site. To use a Google Font, select a font from their site, and enter the font name into the Font for body text field. Names with spaces should be entered with the space included. For example, if you wanted to use the font Titillium Web, it should be entered as Titillium Web. If the body font field is left blank, then the default font will be used.

Changing the heading font

  • Any Google Font can be used as the heading font for the site. To use a Google Font, select a font from their site, and enter the font name into the Font for heading text field. Names with spaces should be entered with the space included. For example, if you wanted to use the font Titillium Web, it should be entered as "Titillium Web" (without the quotes). If the heading font field is left blank, then the body font value will be used.

Theme Options - Header

Call to Action

  • Nectar has an optional Call to Action bar that can be displayed in the header on all pages/posts. Enter your message into the Call to Action Text field. To change what the button says, enter your button text into the Call to Action Button Text field. Enter your URL into the Call to Action Button Link field.
  • When entering your URL into the Call to Action Button Link field, be sure to enter a full URL, including http:// or https:// such as http://www.your-website.com/your-link.
  • If you wish to simply display a message and no button, then leave the Call to Action Button Link field blank.

Theme Options - Homepage

Theme Options - Pages

  • Please refer to the Pages section.

Theme Options - Posts

  • Please refer to the Posts section.

Theme Options - Portfolio

Theme Options - Social

  • If you wish to display the Social Icons in the footer, check the box next to Display Footer Social Icons
  • If you wish to display the Social Icon Text, check the box next to Display Social Icon Text and then enter the desired text into the Social Icon Text field.
  • Choose which Social Icons are displayed in your footer by checking the appropriate boxes. Enter the URL for the appropriate page for any icons that are used. For example, if you wish to use the Facebook icon, make sure that the checkbox is selected, then enter the URL for your Facebook page you wish to promote: https://www.facebook.com/bottomlessdesign.
  • If you wish to use the Email icon, enter an email address in place of a URL: name@email.com
  • If you wish to use a link that doesn't have an icon represented, you can use the Custom Link option and enter the desired URL.

Footer Text

  • Enter desired text to the Left Footer Text field to change the text that appears on the left side of the footer. Leave blank to display the default text.
  • Enter desired text to the Right Footer Text field to change the text that appears on the right side of the footer. Leave blank to display the default text.

Theme Options - Analytics

Google Analytics

SEO Description

  • Enter your SEO description in the SEO Description field, which will appear on search results pages. The description should be no longer than 150 characters, including spaces.

Back To Top

Homepage

Setting up the homepage

  • By default, Nectar will display your latest posts on the homepage. To use the homepage as seen in the demo, click the Add New button to create a new page. Name it either Homepage or Home. Then look in the far right column for the Page Attributes section and select Homepage from the Template drop-down menu.
  • After creating the new Home page with the Homepage template, go to Settings/Reading (in the left navigation bar). For Front page displays, choose A static page, and for Front page select the newly created Home page from the drop-down menu. Then click Save Changes.

Homepage Slider

  • You can add and manage slides for the homepage slider by clicking the Slides link in the left menu. To add a new Slide, click Add New. Slides should be given a Title. Images for the slides should be entered in the Background Image section. The optimum size of the slider image is 1600px width x 800px height. To enter a Background Image, click the Upload button. You can drag and drop your image to the pop-up media uploader or click the Media Library link if you've already added the image to your Media Library. When selecting an image, be sure to include a Link URL. (Note: due to the nature of background images, this won't actually create a link, but leaving this field blank or set to None can sometimes create issues when uploading an image.) Once your image is selected, click the Insert into Post button.
  • Slides are displayed with a background-size: cover which means that the entire image will not always be visible at all sizes of browser windows, monitors, devices, etc. For this reason, it is recommended to not have any essential elements of the image too close to the edge.
  • Slides have an optional feature to display text. If you choose to display text with your slide, enter your text into the Description field and check the box for Show Text. When displaying text, the title of the slide will be displayed above the description.
  • You can add as many slides as you wish to the slider, although a good number is 1-4. It's not recommended to go over 6 slides. If you only choose a single slide, a static image will be shown in place of the slider. Slides will be displayed in the order they are posted (most recent first). If you need to adjust the order of the slides, edit the publish date/time accordingly.
  • To display the slider on the homepage, go to Theme Options / Homepage and check the box for Display Homepage Slider.
  • To change the speed of the slider, enter a number (in seconds) in the field labeled Slideshow Delay. (Note: This will also change the speed used for the slideshow shortcode).

Homepage Message - Theme Options / Homepage

  • To display the homepage message, go to Theme Options / Homepage and check the box for Display Homepage Message.
  • To change the text for the message, enter the text in the field labeled Homepage Message Text.
  • Additional, optional text can be entered in the field labeled Homepage 2nd Message Text.
  • To display the Featured Pages section on the homepage, check the box next to Display Homepage Featured Page Section, or uncheck it to hide it.
  • For each of the four Featured Pages, select from the drop-down menus any published pages to be displayed for that section. If the selected featured page has been given a Featured Image, the Featured Image will also display on the homepage.
  • To display the text excerpt below the Featured Image, check the box for Display Homepage Featured Page Excerpts. If you wish to control the text that is displayed for the Featured Page on the homepage, please refer to the Pages/Page Excerpt section.

Homepage Testimonials - Theme Options / Homepage

  • Enter the Testimonials Title text that will appear above the testimonials section on the home page.
  • Enter an optional Testimonials Description that will appear above the testimonials section on the home page.
  • Enter the Number of Testimonials to Show on the home page. To hide this section, enter: 0
  • Enter the Testimonial Delay in seconds between testimonials.
  • For information on the Testimonials Page Template, see the Page Templates section.
  • To display the Featured Posts section on the homepage, check the box next to Display Homepage Featured Posts Section, or uncheck it to hide it.
  • Enter a title to be displayed with this section in the Featured Posts Title field.
  • Select a category from the Featured Posts Category drop-down menu to be displayed on the homepage. You may wish to create a category such as Featured Posts, or use a category such as News, Events, etc.
  • Enter a number to determine the Number of Featured Posts to Show on the homepage.

Additional Homepage Content - Theme Options / Homepage

  • To display the Additional Homepage Content section, check the box next to Display Additional Homepage Content Section, or uncheck it to hide it.
  • Enter a title to be displayed with this section in the Additional Homepage Content Title field.


  • Content for the Additional Homepage Content section is entered on the page that was created with the Homepage Page Template (typically called Home or Homepage). Go to Pages (in the left navigation menu) and select the Home page. Images and content entered on the edit screen will appear in the Additional Homepage Content Section. You can use images, text, HTML, or shortcode here as you would on any other page.

Back To Top

Pages

Page Templates

  • Nectar comes with the following Page Template types: Default, Blog, Full Width, Homepage, Portfolio & Testimonial.
  • The Default template is the main template seen throughout the demo for any page that has a sidebar. When adding a new page, this will always be used unless another template is selected.
  • The Blog template is used for displaying the blog page when the homepage is set to the Homepage template. To use the Blog template, select it from the Page Template section in the far right column when adding a page. For more info on setting up the Blog page when using the Homepage template, please refer to the Posts section.
  • The Full Width template does not display a sidebar, otherwise, it's the same as the Default template. To use the Full Width template, select it from the Page Template section in the far right column when adding or editing a page.
  • The Homepage template is used for displaying the homepage as seen in the demo. To use the Homepage template, select it from the Page Template section in the far right column when adding a page. For more info on setting up the Homepage, please refer to the Homepage section.
  • The Portfolio template is used for displaying the portfolio page. To use the Portfolio template, select it from the Page Template section in the far right column when adding a page. For more info on setting up the Portfolio page, please refer to the Portfolio section.
  • The Testimonial template is used for displaying the testimonial page. To use the Testimonial template, select it from the Page Template section in the far right column when adding a page. For more info on setting up the Testimonial page, please refer to the Testimonials section.
  • To display the Featured Image on individual Pages, check the box next to Display Featured Image on Pages, or uncheck it to hide it. The optimum size for a Page Featured Image is 1200px width x 400px height. Whether you choose to display the Feature Image or not, you can still use the Add Media button to add an image anywhere within your page.

Page Excerpt

  • The Excerpt feature will give you control over what is displayed for a Featured Page that is displayed on the Homepage.
  • To use the Excerpt feature on a Page, go to the edit screen for the desired page.
  • You may need to make the option visible. If this is the case, go to the very top of the edit screen and click the Screen Options button on the right. A drop-down menu will appear with display options. Check the box next to Excerpt to make it visible.
  • With the Excerpt section visible, enter your text into the Excerpt field. It is possible to use HTML and links here.

Leave a Reply - Page Comments

If the bottom of your page displays the "Leave a Reply" section, this means that comments are turned on for that page.

To turn off comments for a page:

  • From the back-end of your site, go to Pages (in the left-hand navigation). Click on the link for the page you wish to remove the comments. This will bring you to the edit screen for that particular page.
  • The comment settings are in a section labeled Discussion. By default, Discussion is typically not visible. To make it appear, you will need to click the tab in the top-right corner of your screen for Screen Options. A drop-down menu will appear. Check the box for Discussion. Now scroll down the page.
  • You should now see a box for Discussion at the bottom of the page. Uncheck both options in Discussion. Then Save/Update your page. Repeat as necessary for all pages you wish to hide comments on.

Back To Top

Posts

Setup the Blog page

  • By default, Nectar will display your latest posts on the homepage. If you are using the homepage as seen in the demo, you will also need to create a page to display the blog.
  • First, go to Pages and click Add New. Name it something like Blog or News. Then look in the far right column for the Page Attributes section and select Blog from the Template drop-down menu.
  • After creating the new Blog page with the Blog template, go to Settings/Reading (in the left navigation menu). For Front page displays, choose A static page, and for Posts page select the newly created Blog page from the drop-down menu. Then click Save Changes.

Post Meta Data - Theme Options / Posts

  • Go to Appearance / Theme Options / Posts and you can choose to display or hide the following meta data from each post: Author, Date, Category, Tags, & Comment Count.
  • For each feature, check the box to display it, or uncheck the box to hide it.

Post Featured Image - Theme Options / Posts

  • It is recommended to use a Featured Image when creating a new post. The Featured Image will display a thumbnail alongside the post on the main blog page and any blog archive pages. The optimum size for a Post Featured Image is 1200px width x 400px height.
  • By default, the Featured Image will also be displayed at the top of the individual post as well. If you choose to turn off this second feature, you can uncheck the box for Display Featured Image on posts.
  • Whether you choose to display the Feature Image or not, you can still use the Add Media button to add an image anywhere within the body of your post.

Show Full Posts - Theme Options / Posts

  • If you wish to show the full post on the blog and blog archive pages, check the box next to Show Full Posts. (Note: this will not display full posts on the homepage template page--that will only display excerpts.)

Author Bio

  • To edit the Author Bio found at the bottom of every post and also on the sidebar of the author archive page, go to Users/Your Profile (in the left navigation menu). Scroll down to Biographical Info and enter your bio here. Click Update Profile.
  • A Gravatar account will be needed for your User profile image. If you already have a Gravatar account, whatever image you've uploaded to your Gravatar account will be displayed on the front-end of your site. If you do not yet have a Gravatar account, you will need to create a free account and use it to add an image to your email address. Please note: changes to your Gravatar (such as uploading an image) typically take several minutes before you will see them live on your site.

Back To Top

Portfolio

Setup the Portfolio page

  • To display the Portfolio Page, first, go to Pages and click Add New. Name it something like Portfolio. Then look in the far right column for the Page Attributes section and select Portfolio from the Template drop-down menu.
  • Images and text added to the Portfolio Template page will not be displayed on the Portfolio page, only the archive of Portfolio projects. If you wish to use the Portfolio page as one of the Featured Pages on the homepage, text should be entered into the Portfolio page Excerpt section. For more info on using the Excerpt, see the Page Excerpt section.
  • A Featured Image can be given to the Portfolio page which will be displayed at the top of the page.

Adding Projects

  • New portfolio items are added as Projects. Projects are added/edited in much the same way that Posts are added/edited. Images and text can be added as needed to the individual Portfolio post the same as any other post. Shortcodes can be used with any Portfolio Project.
  • Skills are used to order the projects (such as Photography, Graphic Design, Illustration). Skills are essentially Categories for Projects.

Back To Top

Testimonials

Page Templates

  • To display the Testimonials Page, first, go to Pages and click Add New. Name it something like Testimonials. Then look in the far right column for the Page Attributes section and select Testimonial from the Template drop-down menu.
  • Images and text added to the Testimonials Template page will not be displayed on the Testimonials page, only the archive of Testimonials. Testimonials can be displayed on their own section of the homepage, but if you wish to use the Testimonials page as one of the Featured Pages on the homepage, text should be entered into the Testimonials page Excerpt section. For more info on using the Excerpt, see the Page Excerpt section.
  • A Featured Image can be given to the Testimonials page which will be displayed at the top of the page.

Adding Testimonials

  • To add a new testimonial, go to Testimonials in the left menu and click the Add New link. Give the testimonial a Title, typically the name of the person providing the quote. Add the testimonial quote to the main body field.
  • It's recommended to give the testimonial a Featured Image of the person providing the quote.
  • There is also an optional field for a Testimonial URL that will be displayed on the main Testimonial page.

Back To Top

By default, any new page created will be adding to the navigational menu in the order created. If you wish to have greater control over your menu, go to Appearance / Menus

  • In the right-hand column, add a Menu Name and click Save
  • The left-hand column gives you options for adding pages to your menu. In the Pages section, click the View All link. Here, check the pages that you wish to add, then click Add to Menu.
  • The selected pages will all be added to the bottom of the right-hand column. Drag and drop them into the desired display order. It is possible to inset a page underneath and to the right of another page. Doing so will create a drop-down option.
  • When all of the pages are in the desired order, click Save Menu.
  • Click Manage Locations to assign your menu to the theme.
  • On the next screen, select your newly created menu from the Assigned Menu drop-down and click Save Changes.

Back To Top

Widgets

Content for your Sidebars and Footers are handled through Widgets. To access Widgets, go to Appearance / Widgets (in the left navigation menu).

  • There are three Sidebars: Main Sidebar, Page Sidebar, and Post Sidebar.
  • Main Sidebar is the default Sidebar. If you are planning on displaying the same content on both Pages and Posts, Main Sidebar should be used.
  • If Page Sidebar or Post Sidebar are left blank, they will default to displaying whatever is in Main Sidebar.
  • If you wish to display different content on either Pages or Posts, you can add different widgets to either. the Page Sidebar will display on any pages created with the Default and Testimonial page templates. The Post Sidebar will display on any individual post, the main blog page, and any post archive pages.
  • The Footer Widget section will display widgets in the footer of your site for every page/post other than the homepage.
  • The Homepage Footer Widget section will only display widgets in the footer of the homepage.
  • Widgets from the Available Widgets column can be dragged into any of the Sidebar/Widget sections. It is possible to reuse a Widget in multiple locations.
  • The Text Widget is a powerful option. You can enter a text message to display in one of the sections. You can enter HTML into the Text Widget. You can also add an image to a Text Widget. To add an image to a Text Widget, first add it to the Media Library. Then, enter the URL path to the image into the Text Widget in HTML. For example:
    <img src="http://yourdomain.com/wp-content/uploads/2013/06/yourimage.png">

Back To Top

Shortcodes

Nectar comes with simple to use shortcodes built right in, such as buttons and columns. Shortcodes can be added to any Page, Post, or Widget. To use the shortcodes, follow the instructions below.

Buttons

Button shortcodes can be added to any page, post, or widget. To add, use the following:

[button url="http://nectar.bottomlessthemes.com/" label="Example Button" color="#2a9a75" target="_blank"]

EXAMPLE BUTTON

The button shortcode supports 4 attributes: url, label, color (optional), and target (optional).

Columns

Columns shortcodes can be added to any page, post, or widget. Columns can be created as one half, one third, two thirds, or one fourth of the content area's width. To add, use the following:

[one_third] Example content 1 here. Lorem ipsum dolor sit amet, qui ex civibus qualisque adversarium, ad sea iusto scripta adipiscing. [/one_third] [one_third] Example content 2 here. Lorem ipsum dolor sit amet, qui ex civibus qualisque adversarium, ad sea iusto scripta adipiscing. [/one_third] [one_third_last] Example content 3 here. Lorem ipsum dolor sit amet, qui ex civibus qualisque adversarium, ad sea iusto scripta adipiscing. [/one_third_last]

Example content 1 here. Lorem ipsum dolor sit amet, qui ex civibus qualisque adversarium, ad sea iusto scripta adipiscing.Example content 2 here. Lorem ipsum dolor sit amet, qui ex civibus qualisque adversarium, ad sea iusto scripta adipiscing.Example content 3 here. Lorem ipsum dolor sit amet, qui ex civibus qualisque adversarium, ad sea iusto scripta adipiscing.

Notice the addition of "_last" to the last column's shorcode. This is necessary for the columns to display properly.

Use the following shortcode to display various column widths:
[one_fourth]...content goes here...[/one_fourth]
[one_half]...content goes here...[/one_half]
[three_fourth]...content goes here...[/three_fourth]
[one_third]...content goes here...[/one_third]
[two_third]...content goes here...[/two_third]

Images can be inserted into the column shortcode and HTML can also be used (such as links or bold/italic text).

Slideshow

Slideshow shortcode can be added to any page, post, or widget. Images can be any size, although it is recommended that they are all the same size. You can add as many images as you like to a slideshow--just place each image on a new line. The slideshow can also be wrapped inside of a column shortcode for further customization. To add, use the following:

[slideshow] <img src="http://yourdomain.com/imageurl-1.jpg" /> <img src="http://yourdomain.com/imageurl-2.jpg" /> <img src="http://yourdomain.com/imageurl-3.jpg" /> <img src="http://yourdomain.com/imageurl-4.jpg" /> [/slideshow]

An example of the slideshow shortcode in action can be seen here at the bottom of the page.

Back To Top

CSS

The main CSS file is the style.css file bundled with the theme. It is not recommended to change this file as any modifications will be lost if the theme is updated. Instead, please put new CSS rules in the Theme Options / General / Custom CSS field. It is possible to write new CSS rules there that will override any other CSS rules on the site. Data input there will be retained if the theme is updated to a later version.

If you wish to do further customization to the theme, such as editing theme files, it is strongly recommended to first set up a Child Theme.

Back To Top

Notes

SEO Titles

If you opt to import the demo data, this will also include the demo site's SEO. To change it, you can install the Yoast SEO plugin. Once installed and activated, you can go to SEO / Titles & Metas to change your Title and Meta Description information.

Jetpack Mobile

If you opt to activate Jetpack, it's possible that its Mobile feature will be activated automatically. As Nectar is mobile responsive by default, it's not necessary to use Jetpack Mobile. You can simply go to Jetpack / Settings and deactivate Mobile, or, if you're not using the other Jetpack features, you can go to Plugins and deactivate Jetpack altogether.

Back To Top

Credits

I've used the following images, icons, scripts or other files as listed. Big thanks to all of the countless hours of design, development, and testing that these fine individuals have contributed!


Thank you again for purchasing Nectar! I hope you enjoy using it as much as I enjoyed making it! Feel free to contact support with any questions or comments you may have.

-Adam

Back To Top