Renkon Documentation

Demo / Buy the Theme

Video Tutorial

Renkon Image Measurements:
– Post Thumbnails: at least 800 pixel width or more
(see Settings / Media, helpful plugin for published posts: Regenerate Thumbnails)
– Standard Post Width: 720 pixel
– Post width Image Posts: flexible width (depending on image size)
– Header image: 1440 x 900 pixel (fixed)

1. Theme Installation

After the successful theme purchase you will receive an email including your individual theme download link. With this link you can download your Renkon theme folder (renkon.zip file).

1.1. Installation via the WordPress admin panel

After downloading the renkon.zip folder to your computer just go to “Appearance / Themes” in your WordPress admin panel and choose the “Install themes” tab menu. At the top of the page you find the smaller navigation link “Upload”. Via this link you an choose to upload your the renkon.zip file and click the “Install now” button. The Renkon theme will now be your active theme.

1.2. Installation via FTP

Alternatively you can also install the theme directly to your server with a FTP client (e.g. Filezilla). Just drop the un-ziped Renkon theme folder into your …/wp-content/themes/ folder. Now you can see the Renkon theme in your WordPress admin panel under “Appearance / Themes / Available Themes”. From there you can activate the Renkon theme.

2. Big Header Image

To include a big header image on your blog front page or your static home page, you can select one of the default Renkon header images or upload your own header image at Appearance / Header. The image size should be 1440 x 900 pixel (jpg or png). To avoid a delay in loading your website the image file size should be as small as possible. For Jpeg-Images you can use the online tool jpegmini.com to reduce the file size without loosing the image quality.

You can add the header image slogan on the Renkon theme options page (see Appearance / Theme Options).

3. Theme-Options

On the theme options page at “Appearance / Theme Options” you can find several easy-to-use options to customize the Renkon theme (see a screenshot of the Renkon theme options).

3.1. Custom Colors

First you can choose your own link color and the main background color by typing in a hex color value (like #dcdcdc) or by just clicking into the color field and using the color picker to choose your own colors.

3.2. Header Image Slogan

You can create the header image slogan for your big header image. The “Header Slogan Text” will be in big bold uppercase letters and the “Header Slogan Subtitle” will appear below in smaller italic serif font. If your header image is of very light colors you can also decide to use the dark header color option in the settings.

3.3. Big Thumbnails, Logo, Post Excerpts & Custom Texts

You can choose a category to create bigger thumbnail images on your blog homepage. By default the “featured” category will be used, but you can also include your own category slug in the theme options and choose a different category with bigger thumbnails.

Next you can upload your own logo image via the media uploader (Media / Add New) and include the image file URL into the custom logo theme option. Since Renkon has a transparent header on big screens, it’s important to use a transparent PNG image as your logo image. The logo image size is flexible, but the height should not me above 40px (since the fixed header on desktop screens has a height of 50 pixel).

In case you don’t want to include the more-tag into your posts you can check the Posts Excerpts box and show automatic post excerpts on your blog. Excerpts will only be used for standard posts.

If you want to customize the footer credit text you can include your own text in the theme option “Custom Footer Text”. Standard HTML (e.g. links) is allowed. You can also link to your social profiles like Twitter or Facebook in the author info box (on single posts) by adding custom links in the “Custom Author Links” option like:

<a href="https://twitter.com/yourtwittername">Twitter</a>, <a href="http://www.facebook.com/yourfacebookID">Facebook</a> and <a href="http://pinterest.com/yourpinterestname/">Pinterest</a>
3.4. Favicon and Apple Touch Icon

To include your own favicon you need to create a 16×16 pixel jpg image and generate a .ico favicon file using and online favicon generator. Now you have to upload the favicon.ico file into your Renkon theme folder via an FTP client and paste the favicon URL into the “Custom Favicon” text field on your theme options page.

Renkon also offers the option to include an Apple touch icon, so your blog can be saved with a nice App-like icon on iOS devices. Just create an 128×128 png image and upload your image using the media uploader. Copy and paste the file URL into the Custom Apple Touch Icon text field. You don’t need to create rounded corners or any glossy effects for your icon since Apple renders your icon automatically with these effects.

3.5. Share Buttons (Twitter, Google+, Facebook, Pinterest)

In the next theme option you can activate share buttons for Twitter, Google+, Facebook and Pinterest. Optional you can choose to show the buttons on single posts or / and on pages.

3.6. Custom CSS

You can also add custom CSS if you need to overwrite a style of the Renkon theme or include additional CSS styles (e.g. to support a plugin). If you have the Jetpack WordPress plugin already installed, it’s recommended to use the Jetpacks Custom CSS feature instead.

4. Typography Style Options

With the Renkon typography styles you can easily create very elegant and beautiful posts and feature your post and page contents. You can add all the extra styles in the HTMl editor of your posts or pages. (See the Renkon typography styles in the live demo).

4.1. DropCaps

You can style the first letter of a text paragraph with a dropcaps by wrapping this first letter in a span tag with the CSS class of “dropcaps”:

<span class="dropcaps">D</span>ropcaps are very elegant...
4.2. Highlighted Text

To include text in a non-serif, all uppercase text style just wrap your text in a span tag with the CSS class “highlight”:

<span class="highlight">This is colored, highlighted text</span> and this is standard styled text...
4.3. Side Notes

You can add left or right aligned side notes to your posts by adding a paragraph with the CSS class “sidenote-left” or “sidenote-right” above the main text paragraph:

<p class="sidenote-left"><span>Note Headline</span>Add your note here...</p>

Now you can add your main text paragraph...
4.4. Footnotes

To include footnotes to your posts, you can add a ul or ol list element below your main post content with the CSS class of “notes”.

<ul class="notes">
<li>first note...</li>
<li>second note...</li>
<li>third note...</li>
</ul>

5. Custom Menus

In the admin panel under “Appearance / Menus” you can set up your 2 custom menus for the Primary Navigation (at the top of the left off canvas sidebar) and the optional Footer Navigation (at the bottom of the right off canvas sidebar). The optional footer navigation does not support sub menus.

You can create your custom menus by adding any number of custom links, pages, categories, tags, post formats or posts and save them to your created menus. If you drag’n’drop the included menu items to the right you can create sub menus. Now you can choose your saved menus to be used in your theme via the “Theme Locations” box (see left top box in Custom Menus).

6. Widgets

In the right off canvas area you can include one-column and a two-column widget area by adding widgets to the “Right Sidebar, Single Column”, “Right Sidebar, Two-Columns Left” and the “Right Sidebar, Two-Columns Right” widget areas. You can also add widgets in the left off canvas area below your main navigation menu by adding widgets to the “Sidebar Left” widget area.

Next to the WordPress standard widgets and the supported Jetpack plugin widgets (e.g. Twitter widget, Image Widget or Blog Subscribe) you can use the following custom Renkon widgets:

6.1. Renkon Social Links

With the Social Links widget you have the option to link to your different social profile sites like Twitter, Facebook, Google+, YouTube, Flickr and many more with nice looking social icons. Just paste the URLs of your profiles into the provided URL field and save your settings. At the bottom of the widget you can also choose to open all links in a new or in the same browser window.

6.2. Renkon Flickr

The Flickr widget gives you the option to include a preview of your latest or a random collection of your Flickr images. You can choose the number of images to show and add an additional link to your Flickr profile.

6.3. Renkon About

The Renkon About widget offers you an easy option to tell your readers more about you and to include a profile picture in the widget. You can include your picture URL, the width and height value of the image (without px) and an about intro text and main text area (you can include HTML code in the text areas).

7. Post Formats

Since Renkon is a specialized photography blog theme, it only supports the WordPress post formats Standard, Image & Gallery. You can choose a post format in the field “Format” while writing or editing your posts. The Image and Gallery post format post will automatically have a thumbnail on your blog homepage, for standard posts you will need to include a “Featured Image” (with at least 800px width).

7.1. Image

To use the Image post format just include one or more images to a post using the “Add Media” upload button. Images can have a flexible width, this way you can easily feature very big images as well. If you include small images you should set them to align “center” in your image settings. Of course you can also set an image caption text by filling out the “Caption” text field in the image options lightbox.

7.2. Gallery

To create a gallery post you can upload any number of images to your post using the WordPresss “Add Media” uploader button. Inside the media upload lightbox window you can choose “Create a gallery” and select your images. The WordPress gallery shortcode “gallery” will automatically be included into your post:

[gallery]

Your image thumbnails should be at least 800 pixel wide, the gallery will automatically have three columns. You can change your thumbnail size settings via “Settings / Media” in the WordPress admin panel. In case you need to resize thumbnails in your already published posts, you can use the helpful WordPress plugin “Regenerate Thumbnails” (just save your new thumbnail settings and run the plugin).

For further options regarding the WordPress image gallery shortcode please have a look at the official WordPress codex website.

8. Page Templates (Archive and Fullwidth)

On pages you can choose the two Renkon page templates “Archive Page Template” and “Fullwidth Page Template” (see Page Attributes / Temptlate).

With the Archive Page Template option it’s very easy to create an Archive page for your blog. Just choose the template for an empty new page and the page will show a list of popular tags, your 50 recent posts and a monthly archive (see the sample Renkon archive page in the live demo). The fullwidth page template is great for creating multi-column contents with the Renkon shortcodes (see Fullwidth page example).

9. Author Box on Single Posts

If you want to show an author description text at the end of each standard post you only need to fill out the “Biographical Info” in the WordPress user profile. You can also insert links or other standard HTML. To link to your social profiles you can use the option on the theme options page.

10. Shortcodes

Renkon offers shortcodes for for multicolumn content, info boxes and buttons. You can find all shortcode codes ready to copy/paste on the Renkon Shortcode page in the Renkon live demo.

11. Theme Translations

Renkon is ready for theme trans­la­tions. You can add your own trans­la­tion or cust­o­mize an exis­ting trans­la­tion easily using the WordPress plugin Codestyling Localization. You can also find a detailed plugin description on the plugin homepage. (It would be great if you would like to make your Renkon translations available to other theme users. Please let us know, if you want to share your translation.)

12. Child Theme for Customizations

If you want to cust­o­mize the Renkon theme a little further and you need to change the code in the styleeheet (style.css) or in any of the theme tem­plate files please con­sider crea­ting a child theme for your changes. Using a child theme is quite easy and saves all your indi­vi­dual changes from being over­written by a future update of the Renkon parent theme. You can find more infor­ma­tion on crea­ting a child theme in the article “WordPress Child Theme Basics” on the Themeshaper blog.

To get started you can download the sample child theme folder for the Renkon theme. Download: Renkon Child-Theme.