Rich Chique Theme Installation Manual
Purpose: This manual will help you install the Rich Chique Theme and point out specific features. Installing this theme is easy. Do not worry, this theme is a professional, streamlined WordPress theme business theme that doesn’t boast thousands of theme options, page makers, shortcodes or other unnecessary baggage that would just confuse you and mess up your site’s content.
Installation will be a breeze!
Just make sure to read this manual until the end, as these instructions will save you a lot of time. Note that it is out of the scope of this manual to explain WordPress basics. For all general WordPress questions, please consult the official documentation.
- Uploading and Activating the Theme
- Installing the Demo Content
- The Front Page
- Static Front Page Setup
- Setting up the Menus
- Setting Up the Icon Menu
- Setting Up Title, Logo, and Site Icons
- Configuring Colors
- Setting Up Header, Cover, and Hero Images
- Applying Page Templates
- Configuring Widgets
- Configuring Media Settings
- Adding Featured Images and Automatic Video Thumbnails
- Completing the Author Box
- Building Contact Forms, Social Sharing Buttons & Galleries
- Customizing the Theme
- Configuring Google and Other External Fonts
- Support & Installation Services
Uploading and Activating the Theme
Upload the Rich Chique.zip file via the theme upload function Themes » Install Themes » Upload in your WordPress Administration (wp-admin) and activate the theme.
Installing the Demo Content
This step is optional. If you want to install the content from the Rich Chique Theme Demo, complete the following steps:
- Download Demo Content (click).
- Unpack the richchique-theme-demo-content.zip file.
- Go to Tools » Import in your WordPress Admin and select “WordPress”.
- Click “Browse” and select the richchique-theme-demo-content.xml file. Do not upload the .zip file. Unpack it first as explained in step 2.
- Click “Upload file and import”.
- Assign your authors and check the box next to “Download and import file attachments” under Import Attachments.
- Click Submit and you are done. If you did not install and activate the WooCommerce plugin, you might get some “can not import” errors, which you can ignore.
- Due to the nature of WordPress imports, the front page widget content will not be imported and you will have to set it up manually.
The Front Page
The Rich Chique theme allows you to either show a list of posts on the front page, as in the demo or configure a static front page to create a more comprehensive landing page. You can skip the following step if you want to show a list of articles on the front page!
How to Create a Static Front Page?
Create a page named Home and a page named Blog. Apply the Front Page Template to the Home page (Attributes section on the right when editing the page).
Then go to Appearance » Customize » Static Front Page or Settings » Reading and choose “A static page” under “Front page displays. Set your Home page for Front and your Blog page for Posts page.
Static Front Page Setup
If you have created a front page as explained in the section above and applied the “Front Page Template” to it, we can now setup its content. The front page is fully widgetized and gives you almost endless possibilities of presenting your content. Feel free to include sliders, text, email opt-in forms, contact forms, WooCommerce products, …
To get started, please head to the Widget section of the Customizer (Appearance » Customize » Widgets). If you have setup the Front Page Template correctly you will see the expanded as well as the other ten front page widget areas listed on the left. The “Expanded Front Page Widget Area” covers the full-width of the screen, while the others have a left and right margin. I usually use the expanded one for including an image slider or video.
Each widget area allows you to add widgets, change the background and text-color and set how many widgets will appear in each row. Large stands large desktop screens, Medium usually would be tablets and Small stands for smart phones.
In a lot of cases you will probably add normal text-widgets since they do support HTML tags as well. However, you can add whatever available widget you have installed.
Let’s give you some examples:
As you can see, for the first section we use only one text widget, set the background to #f2f2f2 and chose the small centered box.
For this section, the widgtes per row have been set to “Large-3 | Medium-3 | Small-1” while I left the color settings untouched. I used simple text-widgets. The icons have been included with the WP SVG Icons Plugin mentioned above.
As you can see, building your front page is as simple as it gets. Just stack the front page widget areas on top of each other. No visual composer or anything else that would bloat up your site has been used. It will be lean and fast.
Setting up the Menus
Next, set up your Primary-, Icon- and Footer Menus under Appearance » Menu in your WordPress Administration.
If you have WooCommerce installed and activated, you will also see a “Menu Shop” in your menu location list.
The Primary, Footer, and Shop menu setup work like the standard WordPress themes. In general, you choose your pages, posts, categories, tags, WooCommerce endpoints, or custom links on the left and add them to the Primary Menu.
Make sure that you select the correct locations for your menu:
As you can see in the theme demo, the Primary and Shop Menu allow you to set up a multi-level drop down structures. To do this, simply drag and drop your menu items into the right position and stack accordingly:
Note: The Footer menu must have a flat one level structure.
Setting Up the Icon Menu
Click on the Create a new menu button next to the select menu box to create a new menu and select the Icon Menu location. To set up icons to your social networks like Twitter, Facebook, and others, simply copy and paste the URLs to custom link items and add them to the menu. The icons will automatically appear in your icon menu:
Setting up Icon CSS Classes
The following icons are available for social media sites (the list also shows the icons CSS classes):
- Twitter: icon-twitter
- Facebook: icon-facebook
- Pinterest: icon-pinterest
- Youtube: icon-youtube
- Vimeo: icon-vimeo
- Tumblr: icon-tumblr
- Flikr: icon-flikr
- LinkedIn: icon-linked-in
- Soundcloud: icon-soundcloud
- XING: icon-xing
- Shopping Cart: icon-basket
- Email: icon-email
- User Login: icon-user
- RSS: icon-rss
Enabling CSS Classes
To set up the icons with their CSS classes, make sure that menu CSS classes are enabled. In the top right corner on Appearance » Menu page, click “Screen Options” and tick the box next to “CSS Classes”:
Let us set up the Shopping Cart icon for example. Include the menu element to my WooCommerce Shopping Cart in the menu editor. Click on the menu element to show its options. Add the icon-basket CSS class into the CSS Classes field:
Should you know your way around CSS, feel free to add different icons as the ones listed above to the icon font. If you need help, feel free to write in and we can add the needed icons for you for a little service charge.
Any programmer familiar with CSS should be able to help you as well. The icons used are from Fontello. To automatically add the already existing icons, you find a config.json file for Fontello in the font folder of your theme.
Setting Up Title, Logo, and Site Icons
Set up your Logo or Page Title under Appearance » Customize » Site Identity. To set up an image logo, we recommend using a resized .png or an .svg file with a transparent background.
In particular, SVG logos can be quite good. Scalable vector graphics (SVG) provide an absolutely crisp and sharp looking logo without any unwanted pixilation (see http://richwp.com). You can export SVG files with Google Drawings (in your Google Drive) or with any better vector graphic program. These SVG files will not be displayed in IE8 or older browsers, but you aren’t likely to have many visits from users who still use these old browsers. In any case, it is important to test the logo to determine the size that best fits your design. Be sure to test your logo on smart phones and tablets, as well.
All color options for this theme can be found under Appearance » Customize » Colors. You can make this theme your own by exploring these color options and choosing a unique color scheme for your theme. To change colors that are not affected by the Customizer Color Settings, edit them directly in the style.css file of your theme or overwrite them with a Custom CSS plugin (there is one within Jetpack) or with a Child Theme.
Setting Up Header, Cover, and Hero Images
The Rich Chique Theme allows you to set up Front Page cover images, configure a cover image for your WooCommerce shop, and use your post- and page-featured images as hero images when in single post or page view. To do so, go to Appearance » Header in your WordPress Admin and follow the given options.
Additional to these hero images, the Rich Chique theme allows you to display widgets over them. See below, under Widgets, for details.
Applying Page Templates
The Rich Chique Theme comes with a variety of page templates that you can apply to your pages (not posts). The purpose of these page templates is to provide alternative layout options if you want to set up a static front page or simply focus your visitors’ attention directly on the page content. These templates can be useful for shop function pages like cart or checkout, where you don’t want to distract visitors from finishing a sale.
The Full-Width Page Template uses the whole content container width for the content, so that no sidebar will be displayed.
The Full-Width without Title Page Template does the same, except that it doesn’t display a title.
The Content-Width No Sidebar Page Template shows a centered content container without the sidebar.
You can also apply the Subpage List Page Template to a parent page to ensure that all of the page’s child pages will be listed under the content box.
The theme comes with several Widget Areas. Set up your widgets under “Appearance » Widgets” in your WordPress Admin.
IMPORTANT: If you want to use a sidebar, make sure that you have enough widgets added to fill the height of large screens. Since we use a so called sticky sidebar, you will have a white space gap at the top of the sidebar if you don’t have enough content added.
If you need additional widgets, try a plugin search under “Plugins » Add New”. You can find a rotating banner, advertising-related widgets, email sign up forms from your favorite email service, and much more.
For testing, feel free to copy and paste the following code into a text widget of one of the widget areas to display a 728 x 90px banner:
<div style="width:768px; max-width:100%; text-align:center; margin: 0 auto;"><a href="http://richwp.com/" target="_blank"><img src="http://richwp.r1e9.com/Rich Chique/wp-content/uploads/sites/16/2016/09/retina-728x90-1456x180-richwp-think-simplicity-black.png" /></a> </div>
Here is some sample code to use in a text-widget on the Hero Image Widget Areas, mentioned above:
<div class="large-8 medium-centered" style="background:rgba(255,255,255,0.75); text-align:left; border: 1px solid rgba(255, 255, 255, 0); border-radius: 15px; text-align:center;"> <div class="row"> <div class="columns"> <h3 style="margin-top:0.5rem">Optional Shop Widget Area</h3> <p>The perfect location for Sign Up and Subscription Forms or Special Discount Announcements!</p> </div> </div> </div>
Configuring Media Settings
The Rich Chique Theme natively creates all the relevant image sizes for your site. However, you might want to create thumbnails for your galleries or larger product images for your shop. You can set them up under Settings » Media in your WordPress Administration.
To install the theme on an established site on which you uploaded images before you activated the Rich Chique Theme, you should run a plugin to create the image sizes needed for the theme. We recommend the free “Regenerate Thumbnails” plugin, available here https://wordpress.org/plugins/regenerate-thumbnails/
Adding Featured Images and Automatic Video Thumbnails
In general, it is a good idea to add featured images to all your posts and pages! The theme will scale the featured images to the appropriate sizes. If you use this theme on an existing site, you can regenerate the necessary image sizes with a plugin as described above.
Many video thumbnail plugins are available to automatically create video thumbnails. We recommend Video Thumbnails, available at http://wordpress.org/extend/plugins/video-thumbnails/, but there are many others available.
Completing the Author Box
Complete the information to be displayed in the author box under Users » All Users » Edit or simply under Users » Your profile.
Building Contact Forms, Social Sharing Buttons & Galleries
In the RichWP theme demos as well as on most of our personal sites, we use the functionality of the WordPress Jetpack plugin to build our contact forms and add social sharing buttons and galleries, but feel free to use your own plugin of choice.
Before using gallery and video player plugins, you should ensure that they work well in a responsive environment.
Customizing the Theme
Besides using the built in customization options, feel free to modify the code in any way you like. For simple CSS modifications, a custom CSS plugin or the Custom CSS Functionality of the Jetpack plugin comes in handy. RichWP themes are Child Theme ready and we recommend to create a child theme for any other code modifications. This way your site stays update-proof.
For reference you find uncompressed versions of the CSS and JS code under wp-content/themes/richchique/assets/uncompressed.
Configuring Google and Other External Fonts
You can use Google and other external fonts with the Rich Chique Theme. For performance reasons, we did not include a list with hundred of fonts plus the other necessary option settings directly into the theme itself. The easiest way is to use external fonts is to install a plugin like this one WP-Google-Fonts, FontMeister or Fonto. There are more plugins providing this functionality out there, so feel free to try some and use the one that best fits your purpose.
If you want to target the site or posts titles with one of these plugins separately, you can use the following classes in the plugin settings:
#sitetitle – Site Title, will be shown instead of an image logo
.entry-title – Titles in loop as well as single post title
h5.entry-title – Titles in loop
h2.entry-title – Single post titles
Support & Installation Services
If you have problems and would like assistance, please contact us at RichWP Support.
We also offer services to install WordPress, with all the necessary plugins and your theme of choice. For more information, contact us at RichWP Services.