Table of Contents:
1. Theme-Installation2. Theme-Optionen3. Special Typography Styles4. Custom Menus5. Widgets6. Post Formats7. Page Templates8. Author Box on Single Posts9. Shortcodes10. Theme Translations11. Child Theme12. Print Doc / Save as PDF
Quick Specs (all Dorayaki measurements in pixels)
- Post Thumbnails: at least 670 pixel width / height flexible (450px ideal for Portfolio)
(see Settings / Media, helpful plugin for published posts: Regenerate Thumbnails)
- Standard Content Width (Blog): 630px
- Standard Sidebar Width: 280px
- Centered Page without Sidebar Width: 800px
- Slider image: 590 x 590 pixel (height flexible, see Slider settings)
- Header image: 1180 x 590 pixel (height flexible)
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.
Back to Top ↑
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. 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.
Back to Top ↑
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).
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”:
Now all content inside this div container will be fullwidth. You can add multicolumn shortcodes or images…
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…
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”.
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).
Back to Top ↑
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).
Back to Top ↑
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.
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>
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.
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>
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:
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.
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”.
Back to Top ↑
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.
Back to Top ↑
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.
Back to Top ↑
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.
Back to Top ↑
10. Theme Translations
Oita is ready for theme translations. You can add your own translation or customize an existing translation easily using the WordPress plugin Loco Translate. (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.)
Back to Top ↑
11. Child Theme for Customizations
If you want to customize the Oita theme a little further and you need to change the code in the styleeheet (style.css) or in any of the theme template files please consider creating a child theme for your changes. Using a child theme is quite easy and saves all your individual changes from being overwritten by a future update of the Oita parent theme. You can find more information on creating 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.
Back to Top ↑
11. Print Doc or save as PDF
To print out or save a PDF file of this Oita theme documentation, just click in the Print Friendly button below. You can choose to exclude images from your print file or delete certain parts of the text.