Yoko-Theme Documentation

1. Theme features and requirements• forWordPress3.1+

• responsivelayoutwithCSS3MediaQueries:Thebloglayoutadjuststodifferentscreensizesandistherefore

optimizedformobiledevicessuchastabletpcsandsmartphones.

• HTM5(fallbackforIE<9)ansCSS3

• customlinkcolor,headerimage,backgroundandlogoimage

• optionaladditionalnavigationmenu(SubMenu)belowtheheaderimage

• simplethemeoptionspage

• Yokosociallinkswidgetwithminiicons(forRSS,twitter,facebook,flickr,vimeo,linkedinanddelicious)

• postformatsforstandard,aside,gallery,link,video,imageandquote

• threadedcommentswithgravatarsupport

• postthumbnails

• customCSSStylesfortheContact7formWordPressplugin

• Googlewebfonts(DroidSansandDroidSerif)

• translation-ready(currentlyEnglish,GermanandFrenchtranslationsavailable)

• cross-browsercompatible(testedinChrome,Firefox,Safari,InternetExplorer9and8)

• Shortcodesformultiblecolumns,infoboxesandtexthightlight

2. The theme installationYoucaninstalltheYokothemerightfromyourWordPressinstallationadminpanel.JustgotoAppearance/Themes

andclickonthetabInstall Themesandsearchfor„Yoko“.NowyoucanseetheYokothemepreviewandclickon

Install.

AfterinstallingYokoyoujusthavetoactivateitbyclickingtheActivatelinkinthe„Managaethemes“page.

3. Custom link color and logo imageTouseacustomlinkcolororlogoimageclickonAppearance / theme options.

Hereyoucantypeinyourownlinkcolorusingthehextermlike#009BC2(don’tforgetthesymbol#)oracolorterm

likered,blueorgreen.

Yourlogo imagecanhaveanindividualpixelsize.Justuploadyourlogoimage(jpgorpng)totheWordPressmedia

library,copytheimageURLandpaste the URL into the theme options page.

4. Custom Header ImageTouseanindividualheaderimagegotoAppearance / Header.

Hereyoucanuploadyourownheaderimage(size1102×350 Pixel),pickoneoftheotherheaderimagesthatcome

withtheYokothemeorchoosenottouseanheaderimageatall.

5. Custom BackgroundIntheadminpanelchooseAppearance / Backgroundtopickyourownbackgroundcolororuploadacustomback-

groundimage.

Yourbackgroundimagedoesn’thavetobeverybig,youcanprepareasmallimage(like100x100px)andchooseto

repeattheimagehorizontallyandvertically.Thiswayyourwebsiteloadsfasterintothebrowserbecauseyou

decreasedthebackgroundimagefilesize.

6. Customize the main navigationIfyouwanttocustomizetheapperanceofthemainmenu(atthetoprightsideofthethemelayout)youcanusethe

WordPresscustommenuoption.Justsetupyourindividualnavigationmenu(Appereance / Menus)andmarkitas

thePrimary NavigationintheThemeLocationsoptionfield(atthetopleftsideofthemenuadminpanel).

7. Additional navi ga tion menu (Sub Menu)OnemoreYokothemefeatureistheadditionalnavigationmenurightbelowtheheaderimage.

Tousethisadditionalmenuoptionsetupancustommenuwiththename»Sub Menu«underApperance/Menues.

Youcanuseuptosevenmainmenulinksandmultiplesubmenulinks.Justdrag’n’dropthesubmenulinksalittle

bittotherighttomarkthemassublevel.Afteryousaveyour»SubMenu«navigationmenuyouwillseeitinyour

bloglayout.

8. Use WordPress Post Formats

Yokoalsosupportsthenewpostformatsfeature(sinceWP3.1).Rightnowyoucanchooseyourpoststobe

stan dardposts,aside(ashortnote),gal lery,link,video,imageorquoteposts.

Thedifferentpostformatswillthenhavedifferentstylinginyourblogdesign.

9. Post ThumbnailsIntheYokothemeyoucanincludepostthumbnailsforstandardposts.

TheThumbnailimagesizeis140×140 Pixel.Toaddathumbnailtoapostjustuploaditusingtheoptionfield

»Featured image«inthe»EditPost«adminwindow.

TosetupyourdefaultimagesizesfortheWordPressmedialibrarygotoSettings / MediaintheAdminpanel.

Hereyoucansetyourthumbnailsizeto140x140pixel.

10. The Yoko Social Links widgetYokohasacustomwidgetwithminiiconstolinktoyoursocialprofilesiteslikeTwitter,Facebook,Flickr,Vimeo,

LinkedIn,DeliciousortoyourRSSFeed.

TousethewidgetschooseAppearance / Widgetsintheadminpanelanddrag’n’droptheYoko Social Links Wid-

getintooneofthetwosidebars.NowyoujusthavetochooseawidgettitleandfillinyourlinktextsandtheURLsto

yourprofilepages.

11. Author Info fieldToshowanauthordescriptiontextwithgravatarimagebeloweverysinglepostjustfilloutthe»Biographical Info«

inyourUser profile.

Afterupdatingtheinfotheauthorsbiographicalinfotheauthorfieldwillshowupautomaticallyattheendofeverysinglepostpage.

12. Threaded CommentsYokoalsosupportstheWordPressthreadedcommentsfeature.Therewillbeanreplybuttonaftereverycommenttoreplydirectlytoanindividualcomment.IfthebuttondoesnotshowupautomaticallyyoumighthavetoenablethethreadedcommentsoptionunderSettings / Discus-sion / Other com ments optionsfirst.

13. Shortcodes for multiple columns, info boxes and text highlight

Tosettextintotwo columnsusetheshortcodesinyourpostsorpages:[two_columns_one]putyourleftcolumntexthere...[/two_columns_one][two_columns_one_last]putyourrightcolumntexthere...[/two_columns_one_last][divider]

Tosetyourtextintothree columnsusetheshortcodeslikethis:[three_columns_one]putyourleftcolumntexthere...[/three_columns_one][three_columns_one]putyourmiddlecolumntexthere...[/three_columns_one][three_columns_one_last]putyourrightcolumntexthere...[/three_columns_one_last][divider]

Tosetyourtextintofour columnsusetheshortcodeslikethis:[four_columns_one]putyourfirstcolumntexthere...[/four_columns_one][four_columns_one]putyoursecondcolumntexthere...[/four_columns_one][four_columns_one]putyourthirdcolumntexthere...[/four_columns_one][four_columns_one_last]putfourthcolumntexthere...[/four_columns_one_last][divider]

The[divider]shortcodewillclearyourdivssothecolumnswillnotcollapseintoeachother.

Forinfo boxes (yellow, red or green)youcanusetheshortcodes:[yellow_box]yourinfotexthere...[/yellow_box][red_box]yourinfotexthere...[/red_box][green_box]yourinfotexthere...[/green_box]

Andtohighlight textwithalightyellowcolorjustputyourtextintotheshortcodes:[highlight]yourhightlightedtexthere...[/highlight]

14. Theme translationsYokoisreadyforthemetranslation.RightnowthereisthedefaultEnglish, a German and a FrenchtranslationforYokoavailable.YoucanaddyourowntranslationorcustomizeanexistingtranslationveryeasilybyusingtheWordPressplugin»CodestylingLocalization«.Atthepluginshomepageyoucanalsofindadetailedplugindescription.

IfyoutranslatedtheYokothemeinyourownlanguageitwouldbegreatifyoumakeyourworkalsoavailableforotherusers.Justcontactusatkontakt@elmastudio.desowecanaddyourtranslationtotheYokothemefolder.

15. Customizing Yoko by crea ting a child themeIncaseyouwanttocustomizetheYokothemealittlefurtherandyouthereforewanttochangethecodeinthethemesStyleeheetoranyofthethemetemplatefilespleaseconsidercreatingachildthemeforyourchanges.

Creatingachildthemeisveryeasyanditsavesallyourindividualchangesfrombeingover-writtenbyafutureupdateoftheYokotheme.YoucanfindmoreinformationoncreatingachildthemeintheWordPressCodex.

WehopeyouliketheYokoWordPresstheme.Ifyouhavefeedback,suggestionsorproblemswiththethemejustwriteusacommentontheYokothemepage:http://www.elmastudio.de/wordpress-themes/yoko/