“Clean Retina” WordPress ThemeTheme Instruction

1) Installation

a) Through Dashboard

• Log in to the WordPress Dashboard.
• Go to Appearance->Themes.
• Click on Install Themes at the top.
• Type Clean Retina in the search box and click on search button.
• You will see Clean Retina at the top.
• Then Click on Install Now to install the theme.

b) Manual Installation using FTP

• Go to Clean Retina page at http://wordpress.org/extend/themes/clean-retina .
• Click on Download button to your desktop.
• Unzip clean-retina.zip to your Desktop.
• Using an FTP client to access your host web server. Go to /wp-content/themes/ and make sure that you do not already have a clean-retina folder installed. If you do, then back it up and remove it from /wp-content/themes/ before uploading your copy of Clean Retina theme.
• Upload Clean Retina theme to /wp-content/themes/.
• Go to Appearance->Themes and activate Clean Retina theme from Dashboard.

---

2) Custom Menus

Clean Retina supports custom menu you can set it through following steps.

• Go to Appearance->Menus.
• Give your menu a name and build it up using little widgets on the right.
• You can add pages, categories or custom URL’s.
• Now simply select the theme location(Primary Menu in our case) for your newly created menus using a widget on the left. Afterwards, click Save.

See Menu Help for more information.

---

3) Customizing sidebar with widgets

As you may have probably noticed, after installing the theme, your side sidebar and footer sidebar is empty. We have provided you with an opportunity to completely customizing it to your liking with the use of WordPress Widgets

• Go to Appearance->Widgets.
• You can drag and drop widgets in each of positions.
• See Widget Help for more information.

Note: This theme has one extra widget with the theme i.e. Theme Horse:Custom Tag Cloud. It is used to show tag clouds with beautiful button design. Try it you may like it.

---

4) Custom Header

Clean Retina supports Custom Header Feature.

a) Header Image

• Go to Appearance->Header.
• Browse image from your computer and upload the image.
• Crop the Image according to your will.
• Click on Crop and Publish.
• Your website’s Header Image is now set.

Note: If you use small image(as logo) it will appear at just right side of the header text. So, better use small image(as logo) or header text, only one of at a time, for beautiful look. But if you using big image as header image(big and not logo/small image), it will appear just below the header text. So, if you are using big image you can use both header text and image.

b) Header Text

• Go to Appearance->Header.
• You can show/hide Header Text(i.e. Site Title and Site Description).
• You can also set the Header Text Color from Text Color Option.
• Click on Save Changes at last.

---

5) Custom Background

Clean Retina supports Custom Background Feature.

• Go to Appearance->Background.
• You can either set the image or color as background.
• You can see the background preview on the same setting page.
• Click on Save Changes.

NOTE:The background effect will only change the
content part but not in the header and footer part. If you want the change to reflect in the header and footer as well then write follwing custom CSS in Appearance->Customize/Theme Options->Design Options->Custom CSS input field to hide the Header and Footer pattern.

#branding, #colophon {
    background: none;
    border: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

And Save the Changes.

If you want to change header and footer pattern with your own image/color choice, then write follwing custom CSS in Appearance->Customize/Theme Options->Design Options->Custom CSS input field.

For Header:

#branding {
    background: none #YOUR-BACKGROUND-COLOR;
    border-bottom-color: #YOUR-BORDER-COLOR;
    -moz-box-shadow: 0 7px 0 #YOUR-SHADOW-COLOR;
    -webkit-box-shadow: 0 7px 0 #YOUR-SHADOW-COLOR;
    box-shadow: 0 7px 0 #YOUR-SHADOW-COLOR;
}

For Footer:

#colophon {
    background: none #YOUR-BACKGROUND-COLOR;
    border-top-color: #YOUR-BORDER-COLOR;
    -moz-box-shadow: 0 -7px 0 #YOUR-SHADOW-COLOR;
    -webkit-box-shadow: 0 -7px 0 #YOUR-SHADOW-COLOR;
    box-shadow: 0 -7px 0 #YOUR-SHADOW-COLOR;
}
}

And Save the Changes.

---

6) Homepage Layout Configuration

There are different layouts for the home page. You can choose the homepage layout by following the instructions given Below.

a. Normal Layouts for Home Page

You can select No Sidebar/No Sidebar, Full Width/No Sidebar, One Column/Left Sidebar/Right Sidebar according to your choice.

• Go to Appearance->Customize/Theme Options->Design Options->Home Page Layout Options.
• Check on the No Sidebar/No Sidebar, Full Width/No Sidebar, One Column/Left Sidebar/Right Sidebar layout.
• Click on Save all Changes.

Note:

You have to check on Your latest posts instead of static page. in Reading Settings sub-menu page of the Settings main menu.

b. Latest Posts listing display type on Home Page

You can select any of these above mentioned layouts, all these mentioned layouts show the latest posts in the content area. Now, you can also choose the display type for these posts(i.e. the content area-posts listing part). The display type are mentioned below one bye one.

i. Excerpt Display Type 1

• Go to Appearance->Customize/Theme Options->Design Options->Home Page Layout Options.
• Check on the Excerpt Display Type 1 layout.
• Click on Save all Changes.

Note:This display type shows the repective featured image, title, post meta information and excerpt of every posts. The size of the featured image shown is 700*290(width*height) in pixels.

ii. Excerpt Display Type 2

• Go to Appearance->Customize/Theme Options->Design Options->Home Page Layout Options
• Check on the Excerpt Display Type 2 layout.
• Click on Save all Changes.

Note:This display type shows the repective featured image, title, post meta information and excerpt of every posts. The size of the featured image shown is 330*330(width*height) in pixels.

iii. Full Content Display

• Go to Appearance->Customize/Theme Options->Design Options->Home Page Layout Options
• Check on the Full Content Display layout.
• Click on Save all Changes.

Note:This display type shows the title, post meta information and the whole content of the every posts. This way you can embed images and videos in the content and display them on the homepage.

c. Corporate Layout for Home Page

Our Theme offers one unique homepage layout named as Corporate Layout. Below is the instruction to set Corporate Layout for the homepage.

• Go to Appearance->Customize/Theme Options->Design Options->Home Page Layout Options.
• Check on the Corporate Layout and click on Save all Changes.
• After you choose the Corporate Layout, you can add the corporate layout content from Home’s Corporate Type Layout Options under Advanced Options Tab.
• There are input field to enter the image, redirect link, title and description. Upload an image, enter a title and description and give the redirect link. Note: You can add any link that could link outside of the website or link to pages,post, categories of the same website.
• After adding click on Save all Changes.

Note:You have to check on Your latest posts instead of static page in Reading Settings sub-menu page of the Settings main menu.

d. Static Page as Home Page

You can set any of your static page as home page.

• Go to Settings->Reading.
• Check on A static page in the Front page displays option.
• Select the Front page: just below fromt he drop down option.
• Click on Save Changes

---

7) Default Layout Configuration

There are different layouts and you can set any layout to be your default layout. Every page, post that don’t have their specific layout will follow have this default layout. Archives(i.e. category pages) will also follow this default layout. You can choose the default layout by following the instructions given below.

a) No Sidebar/No Sidebar, Full Width/No Sidebar, One Column/Left Sidebar/Right Sidebar

• Go to Appearance->Customize/Theme Options->Design Options->Home Page Layout Options.
• Check on the No Sidebar/No Sidebar, Full Width/No Sidebar, One Column/Left Sidebar/Right Sidebar layout.
• Click on Save all Changes.

---

8) Specific Layout Per Post/Page Configuration

This theme allows you to choose the specific layout for every post display and every page display. You can do so by following the steps give below.

• Go to Posts/Pages->All Posts/All Pages.
• Click on any Post/Page.
• You will see a box named Select layout for this specific Post only. in belower part below the text editor box. NoteIf you don’t find it, you will see Screen Options, click on it and check the Select layout for this specific Post only.
• If your select Default Layout set in Theme Settings
  , the layout set in the Default Layout Configuration will be layout for this post as well.
• You can select from No Sidebar/No Sidebar, Full Width/No Sidebar, One Column/Left Sidebar/Right Sidebar to be this post’s specific layout.
• Update the post to save the changes.

---

9) Set up Homepage Slider

• Go to Appearance->Customize/Theme Options->Featured Posts/Pages slider->slider options
• Set the number of sliders and other transition effects.
• Then go to featured post/page slider options below slider options
• Fill each input box with the Post/Page ID of the post/page which you want to use as slider.
• You can view Post ID by clicking Posts/Pages->All posts/pages in your Dashboard. The ID for each post/pages will be shown in right most side of screen.
• Remember that each post whose post/page id you are using for slider must have featured image minimum of size 962(width in px) and height according to your choice for slider image to show properly(Note: Better to use all images of same size.)
• After filling all input box with Post/Page ID click save.

NOTE: Slider works for the home page and static front page.

---

10) Plugin Support

a. Contact Form 7 Plugin Support

Our theme supports Contact Form 7 Plugin i.e. there is already css written for the Contact Form 7 which would show you contact form in very simple and beautiful design. You can view the demo here.

b. WP-PageNavi Plugin Support

Our theme supports WP-PageNavi Plugin to show pagination. The theme already has the wp_pagenavi() function coded within the theme. The theme also has written css in the style.css file that would show the WP-PageNavi pagination in a very beautiful way. So, just install the WP-PageNavi plugin and turn off the pagenavi plugin CSS from the backend in the WP-PageNavi Setting page. You can view the demo here.

c. Breadcrumb NavXt Plugin Support

Our theme supports Breadcrumb NavXt plugin. This plugin generates locational breadcrumb trails for your WordPress blog. These represent the hierarchy leading up to the current page rather than the actual path taken to arrive at the current page. The theme has the bcn_display() function coded within the theme. You can view the demo here.

---

11) Custom CSS

If you want to edit some CSS, you can follow the instructions below, your custom CSS will overwrite the theme’s CSS.

• In the dashboard. Go to Appearance->Customize/Theme Options->Design Options->Custom CSS input field.
• Write your custom CSS there.
• Click on Save All Changes.

---

12) How to disable Page Comments

• Go to the particular page on which you want to turn off the comments from dashboard.
• Look for the Discussion box somewhere below the editor box.
• If you don’t see it, click on the screen options in the right top part and check on the discussion checkbox. Then discussion box will appear below page editor
• Uncheck Allow checkbox in the Discussion box
• Click on Update.

---

13) Recommended Image Sizes

This theme depends heavily on Featured Images per post. Read more about Featured Images.

a. Slider Image

Width: 962px
Height: 390px

b. Featured Image per post for Home Excerpt Display 2 (Medium Image)

Width: 330px
Height: 330px

c. Featured Image per post for Home Excerpt Display 1 (Image Large)

Width: 700px
Height: 290px

NOTE: If you are switching from another theme, you will want to install and run the Regenerate Thumbnails WordPress plugin to resize your existing images.

---