Oita Documentation

Demo / Buy the Theme

Oita Measurements:
– Post Width: 720 pixel (for images in full width)
– Images for Image Posts: max. 110px width
– Thumbnails for Galleries: min. 350px width (Settings / Media)
– left Off Canvas Sidebar: 340px width

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 Oita theme folder (oita.zip file).

1.1. Installation via the WordPress admin panel

After downloading the oita.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 oita.zip file and click the “Install now” button. The Oita 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 Oita theme folder into your …/wp-content/themes/ folder. Now you can see the Oita theme in your WordPress admin panel under “Appearance / Themes / Available Themes”. From there you can activate the Oita theme.

2. Theme-Optionen

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

2.1. Custom Colors

First you can choose your own link color, additional font color, off canvas sidebar background colors and 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.

2.2. Custom Logo, Post Excerpts, Custom Texts

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. It’s best to use a transparent PNG as a logo image. The logo image size is flexible, the image will resize automatically on smaller screens.

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, not on your post format posts and won’t show any included image thumbnails.

If you want to customize the footer 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 at 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>
2.3. 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 (like faviconr.com). Now you have to upload the favicon.ico file into your Oita theme folder via an FTP client and paste the favicon URL into the “Custom Favicon” text field on your theme options page.

The Oita theme also supports 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.

2.4. 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 your blogs front page and on single post pages, only on single post pages and/or on your blogs pages.

2.5. Custom CSS

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

3. Special Typography Styles

With the Oita 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 Oita typography styles in the live demo).

3.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...
3.2. Highlighted Text

To include text in a non-serif, colored highlighted 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...
3.3. Fullwidth Post Content

If you like to add fullwidth elements like multicolumn shortcodes or big images to your posts (with a width of 1100px), you can wrap this content in an addtional div container with the CSS class of “wide-content”:

<div class="wide-content">
Now all content inside this div container will be fullwidth. You can add multicolumn shortcodes or images...
</div>
3.4. 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...
3.5. 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>

4. 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).

5. 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 Oita widgets:

5.1. Oita 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.

5.2. Oita 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.

5.3. Oita Featured Video

The Featured Video widget is a very easy to use widget to show your favourite YouTube or Vimeo video in your sidebar or footer. Just include the embed code into the text area and choose a widget title if you want to use one. The video will scale automatically on different screen sizes.

5.4. Oita About

The Oita 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).

6. Post Formats

Oita supports the WordPress post formats: Aside, Status, Link, Quote, Image, Gallery, Video. You can choose a post format in the field “Format” while writing or editing your posts. With post formats you can create a more exciting reading and fun experience for your blog readers by including single videos, quotes or images as blog posts.

6.1. Quote

To create a quote you can use the “blockquote” symbol in the Visual Text editor or the b-quote button in the HTML editor. Then your code in the HTML editor should look like this:


<blockquote>Your quote text here...</blockquote>

If you want to include the quote author (maybe with a link) you can add the cite-tag in the following format:


<blockquote>Your quote text here...

<cite><a href="http://linktoquoteauthor.com">Quote Author</a></cite></blockquote>

6.2. Video

To post a video just select the video post format and paste the embed iframe code from a YouTube or Vimeo video (with the width of 720px) into your post. If you have trouble embedding the iframe code (in some cases the iframe code gets deleted after saving or editing a video post) you can install the Iframe WordPress plugin.

6.3. Link

To use the link post format your can include your link into the post and add a CSS class of “link” in the HTML editor:


<a class="link" href="http://linkurl.de/">This is the Link text</a>

6.4. 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 be included automatically into your post:

[gallery]

Your image thumbnails should be at least 350px in width. You can change the thumbnail size via “Settings / Media” in the WordPress admin panel. If you need to resize older thumbnail images you can use the WordPress plugin “Regenerate Thumbnails”.

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

6.5. Image

To use the Image post format include one or more images to a post using the “Add Media” upload button. Images can have a maximum width of 1100 pixel. If you include smaller images you should set them to align “center”.

7. Page Templates (Archive and Fullwidth)

On pages you can choose the two Oita 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 30 recent posts and a monthly archive (see the sample Oita archive page in the live demo). The fullwidth page template is great for creating multi-column contents with the Oita shortcodes.

8. 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 WordPres 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.

9. Shortcodes

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

10. Theme Translations

Oita 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 Oita translations available to other theme users. Please let us know, if you want to share your translation.)

11. Child Theme for Customizations

If you want to cust­o­mize the Oita 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 Oita 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 a starter child theme folder for the Oita theme. Download: Oita Child-Theme.