DOCUMENTATION – REEF

Reef is a simple, clean and minimal blog theme suitable for personal or professional blogs, company or organization blog websites, news, magazine websites. The theme is fully customizable and contains all the features needed for a complete blog website. It is Fully responsive, bbPress compatible, translation ready, cross-browser compatible, SEO friendly, RTL ready. No coding required at all to create a complete blogging website.

1.Theme Installation #

Via WordPress

  • Log in to the WordPress Administration Panels.
  • Go to the Appearance > Themes.
  • Click Add New.
  • In Search themes… type ‘reef’.
  • When ‘reef’ appears click Install button.
  • After Installing the theme Click Activate button.

Via FTP

  • Use your FTP software to browse to wp-content/themes folder.
  • Extract reef.zip and upload the folder.
  • Once it’s uploaded, go to your WordPress Admin, browse to Appearance > Themes.
  • Click the Activate link.

2.Adding Contents #

Posts

To create post on your site, it’s easy. Follow the below listed methods.

  • Go to Administration Panels.
  • Go to Posts and Click on Add New.
  • Give the title of the post and add the content.
  • Set the featured image for the post from right corner.
  • Set that post on the Category.
  • Click on Publish Button.
  • Add more post like the above methods.

Pages

To create page on your site, it’s easy. Follow the below listed methods.

  • Go to Administration Panels.
  • Go to Page and Click on Add New.
  • Give the title of the page and add the content.
  • Set the featured image for the post from right corner.
  • Click on Publish Button.
  • Add more page like the above methods.

Categories

To create categories, follow the below steps.

  • Go to Administration Panels
  • Go to Posts > Categories
  • Give the title of the category
  • Click on Save
  • The added category will appeared on the Add Post Page.

3.Widgets #

Reef comes with Added Custom Widget for About Author and Highlighted Post.

You can use Reef About Sidebar for showing detail about site Author and Reef Highlighted Posts for selecting a Category Post which you want to highlight on the sidebars. You have a custom widget’s area for the different widgets to place on the sidebar and footer.

     

 

Reef About Sidebar

Add this available widget on any of the added widget area.

Widget Title: Title for the Widget
Select Page: Add page you want to show as Author Description
Sub Title: Add your Job post or tagline

 

Reef Highlighted Posts

Add this available widget on any of the added widget area.

Widget Title: Title for the Widget
Select Category: Add Category to Highlight their posts
Number of posts: Set the number of posts

5.Colors #

Go to Appearance > Customize > Colors

Select the required color for;

  • Background
  • Site Title
  • Site Tagline
  • Site Primary

If preview is fine, Click on Save & Publish to save the changes.

6.Background Image #

Go to Appearance > Customize > Background Image

  • Select the best image for the site background.

If preview is fine, click on Save & Publish to save the changes.

 

8.How to Setup Slider / Banner? #

The image below shows customizer options for the sections shown above :

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

8.1.Slider / Banner Section #

Slider

  • From Customize section, go to Home Page.
  • Go to Slider.
  • Under Choose Post Option, select Slider.
  • Under Select Category, select a category you want to use as a slider. The posts which falls under this category will be treated as slider.
  • Check Auto Play option for automatic slide.
  • Provide the time in second.
  • Click Save & Publish.

Banner

  • From Customize section, go to Home Page.
  • Go to Slider.
  • Go to Single Banner.
  • Under Choose Post Option, select Slider.
  • Under Select Post, select a post you want to use as a banner.

Note: Slider will use the post’s featured images. Dummy image will be used if a post does not have featured image.

8.2.Control Section #

  • From Customize section, go to Home Page.
  • Go to Slider.
  • Check Show Control to activate it.
  • Click Save & Publish.

Note: Control section is available only for Slider not for Single Banner.

8.3.Video Section #

  • From Customize section, go to Home Page.
  • Go to Slider.
  • Select a page udner Youtube Video Url.
  • Click Save & Publish.

Note: The page you selected must contain a link of youtube video inorder to activate it.

9.Highlighted Posts #

Go to Appearance > Customize > Highlighted Posts

  • Select posts

Available Options;

  • Hide/Show Highlighted Posts Section

If preview is fine, Click on Save & Publish to save the changes.

10.Testimonial #

Go to Appearance > Customize > Testimonial

  • Select Pages

Available Options;

  • Hide/Show Testimonial Section

If preview is fine, Click on Save & Publish to save the changes.

11.Page Templates #

Go to Appearance > Customize > Page Templates

 

 

Service Page Template

  • Select Pages

If preview is fine, Click on Save & Publish to save the changes.

 

 

FAQ Page Template

  • Select Pages

If preview is fine, Click on Save & Publish to save the changes.

 

Contact

  • Select Pages

Add Contact Form 7 Shortcode to activate form in your theme. If preview is fine, Click on Save & Publish to save the changes.

Please add following markups in your Contact Form to get better design and effect.

<div class="kt-contact-form-area">
   <div class="kt-contact-form-area"> 
      <div class="form-group"> 
         [text* your-name id:cf-username class:form-control placeholder "Name *"] 
         <label for="cf-username">Name <sup>*</sup></label> 
      </div> 
      <div class="form-group"> 
         [email* your-email id:cf-email class:form-control placeholder "Email *"] 
         <label for="cf-email">Email <sup>*</sup></label> 
      </div> 
      <div class="form-group"> 
         [text* your-subject id:cf-subject class:form-control placeholder "Subject *"] 
         <label for="cf-subject">Subject <sup>*</sup></label> 
      </div> 
      <div class="form-group"> 
         [textarea* your-message id:cf-message class:form-control placeholder "Message *"] 
         <label for="cf-message">Message <sup>*</sup></label> 
      </div> 
      <div class="form-group"> 
         [submit id:cf-send class:form-control "Send Message"]<span class="ajax-loader"></span><button type="reset" class="cleaner">clear form <i class="fa fa-close"></i></button> 
      </div> 
   </div>
</div>

12.Theme Options #

Go to Appearance > Customize > Theme Option

Available Options;

  • Hide/Show Alternative Menu
  • Hide/Show Sticky Sidebar
  • Hide/Show Scroll top in mobile
  • Inner Banner Image change option

If preview is fine, Click on Save & Publish to save the changes.