{"id":311256,"date":"2011-04-26T14:57:27","date_gmt":"2011-04-26T12:57:27","guid":{"rendered":"https:\/\/elmastudio.de\/yoko-wordpress-theme\/"},"modified":"2026-09-08T14:53:20","modified_gmt":"2026-09-08T12:53:20","slug":"yoko-wordpress-theme","status":"publish","type":"post","link":"https:\/\/elmastudio.de\/en\/yoko-wordpress-theme\/","title":{"rendered":"Yoko WordPress Theme for Blogs"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">The Yoko Theme Overview<\/h2>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ac9194cd1d25&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ac9194cd1d25\" class=\"wp-block-image size-large has-dark-ground wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"3200\" height=\"2400\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/elmastudio.de\/wp-content\/uploads\/2026\/09\/yoko-header-card.jpg\" alt=\"The header of the Yoko theme\" class=\"wp-image-316266\" srcset=\"https:\/\/elmastudio.de\/wp-content\/uploads\/2026\/09\/yoko-header-card.jpg 3200w, https:\/\/elmastudio.de\/wp-content\/uploads\/2026\/09\/yoko-header-card-720x540.jpg 720w, https:\/\/elmastudio.de\/wp-content\/uploads\/2026\/09\/yoko-header-card-1070x803.jpg 1070w, https:\/\/elmastudio.de\/wp-content\/uploads\/2026\/09\/yoko-header-card-768x576.jpg 768w, https:\/\/elmastudio.de\/wp-content\/uploads\/2026\/09\/yoko-header-card-1536x1152.jpg 1536w, https:\/\/elmastudio.de\/wp-content\/uploads\/2026\/09\/yoko-header-card-2048x1536.jpg 2048w, https:\/\/elmastudio.de\/wp-content\/uploads\/2026\/09\/yoko-header-card-1200x900.jpg?crop=1 1200w, https:\/\/elmastudio.de\/wp-content\/uploads\/2026\/09\/yoko-header-card-800x600.jpg?crop=1 800w, https:\/\/elmastudio.de\/wp-content\/uploads\/2026\/09\/yoko-header-card-600x450.jpg?crop=1 600w, https:\/\/elmastudio.de\/wp-content\/uploads\/2026\/09\/yoko-header-card-400x300.jpg?crop=1 400w, https:\/\/elmastudio.de\/wp-content\/uploads\/2026\/09\/yoko-header-card-200x150.jpg?crop=1 200w, https:\/\/elmastudio.de\/wp-content\/uploads\/2026\/09\/yoko-header-card-1320x990.jpg 1320w\" sizes=\"auto, (max-width: 3200px) 100vw, 3200px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Yoko is a modern and flexible WordPress Free-Theme. With the responsive Layout the theme  adjusts different screen sizes. Therefore the Yoko design is optimized for big desktop screens, tablet pcs like the iPad or small smartphone screens. To make your blog even more individual you can use the new post formats (like gallery, aside or quote), choose your own logo and header image, customize the background and link color. Just have a look at the Yoko live demo or download Yoko right away to test it on your own blog.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"485\" height=\"375\" src=\"https:\/\/elmastudio.de\/wp-content\/uploads\/2011\/04\/yoko-wordpress-theme-ipad-quer.png\" alt=\"Yoko WordPress Theme\"\/><figcaption class=\"wp-element-caption\">iPad Landscape mode, two-column layout.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"375\" height=\"485\" src=\"https:\/\/elmastudio.de\/wp-content\/uploads\/2011\/04\/yoko-wordpress-theme-ipad-hoch.png\" alt=\"Yoko WordPress Theme\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"190\" height=\"364\" src=\"https:\/\/elmastudio.de\/wp-content\/uploads\/2011\/04\/yoko-wordpress-theme-iphone.png\" alt=\"Yoko WordPress Theme\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><em>iPad por\u00adtrait mode and smartphones, one-column layout.<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The theme features<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>responsive layout with CSS3 Media Queries: The blog layout adjusts to different screen sizes and is therefore optimized for mobile devices such as tablet pcs and smartphones.<\/li>\n\n\n\n<li>HTM5 (fallback for IE &lt; 9)<\/li>\n\n\n\n<li>custom link color, header image, background and logo image<\/li>\n\n\n\n<li>optional additional navigation menu (Sub Menu) below the header image<\/li>\n\n\n\n<li>theme options page<\/li>\n\n\n\n<li>Yoko social links widget with mini icons (for RSS, twitter, facebook, flickr, vimeo, linkedin and delicious)<\/li>\n\n\n\n<li>post formats for standard, aside, gallery, link, video, image and quote (you need to have WordPress 3.1 installed)<\/li>\n\n\n\n<li>threaded comments<\/li>\n\n\n\n<li>post thumbnails<\/li>\n\n\n\n<li>custom CSS Styles for the <a href=\"https:\/\/contactform7.com\/\">Contact 7 form<\/a> WordPress plugin<\/li>\n\n\n\n<li>Using of Google web fonts Droid Sans and Droid Serif<\/li>\n\n\n\n<li>translation-ready (currently the English, German and French translations are available)<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">The theme options<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Just download the Yoko theme and unzip the themes folder. Upload the Yoko theme folder with an ftp program (like filezilla) into your WordPress installation folder <strong>wp-content\/themes\/\u2026<\/strong>.<br \/>\nTo use the Yoko theme after uploading it go to your WordPress admin panel and choose <strong>Appearance \/ Themes<\/strong>. Here you can see the Yoko theme in the list of available themes and you can choose to activate it.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">1. Custom link color and logo image<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To use a custom link color or logo image go to <strong>Appearance \/ theme options page<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"610\" height=\"227\" src=\"https:\/\/elmastudio.de\/wp-content\/uploads\/2011\/04\/yoko-wordpress-theme-10.jpg\" alt=\"Yoko WordPress Theme\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Here you can type in your own link color using the hex term like <strong>#009BC2<\/strong> (don\u2019t forget the symbol #) or a color term like <strong>red, blue or green<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Your logo image can have an individual pixel size. Just upload your logo image to the WordPress media library, copy the image URL and paste the URL into the theme options page.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">2. Custom Header Image<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To use an individual header image go to <strong>Appearance \/ Header<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"610\" height=\"468\" src=\"https:\/\/elmastudio.de\/wp-content\/uploads\/2011\/04\/yoko-wordpress-theme-11.jpg\" alt=\"Yoko WordPress Theme\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Here you can upload your own header image in the size 1102\u00d7350 Pixel, pick one of the other header images that come with the Yoko theme or choose not to use an header image at all.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">3. Custom Background<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In the admin panel choose <strong>Appearance \/ Background<\/strong> to pick your own background color or upload a background image.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"610\" height=\"468\" src=\"https:\/\/elmastudio.de\/wp-content\/uploads\/2011\/04\/yoko-wordpress-theme-12.jpg\" alt=\"Yoko WordPress Theme\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The image doesn\u2019t have to be very big, you can prepare a small image (like 100x100px) and choose to repeat the image horizontally and vertically. This way your website loads faster into the browser because you can decrease the background image file size.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">4. Customize the main navigation<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If you want to customize the apperance of the main menu (at the top right side of the theme layout) you can use the WordPress custom menu option.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"610\" height=\"227\" src=\"https:\/\/elmastudio.de\/wp-content\/uploads\/2011\/04\/yoko-wordpress-theme-04a.jpg\" alt=\"Yoko WordPress Theme\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Just set up your individual navigation menu (Appereance \/ Menus) and mark it as the <strong>Primary Navigation<\/strong> in the Theme Locations option field (at the top left side of the menu admin panel).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">5. Additional navigation menu (Sub Menu)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">One more Yoko theme feature is the optional additional navigation menu right below the header image.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"610\" height=\"470\" src=\"https:\/\/elmastudio.de\/wp-content\/uploads\/2011\/04\/yoko-wordpress-theme-04.jpg\" alt=\"Yoko WordPress Theme\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">To use this additional menu option set up an custom menu with the name <strong>\u201eSub Menu\u201c<\/strong> under <strong>Apperance \/ Menues<\/strong>. You can use up to seven main menu terms and multiple sub menu terms. Just drag\u2019n\u2019drop the sub menu terms a little bit to the right to mark them as sub level. After you save your \u201eSub Menu\u201c navigation menu you will see it in your blog layout.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">6. Post Formats (WordPress feature since version 3.1)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Yoko also supports the new post formats feature. Right now you can choose your posts to be <strong>standard posts<\/strong>, <strong>aside<\/strong> (a short note), <strong>gallery<\/strong>, <strong>link<\/strong>, <strong>video<\/strong>, <strong>image <\/strong>or <strong>quote posts<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"610\" height=\"191\" src=\"https:\/\/elmastudio.de\/wp-content\/uploads\/2011\/04\/yoko-wordpress-theme-05.jpg\" alt=\"Yoko WordPress Theme\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The different post formats will then have different styles in your blog design.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"610\" height=\"260\" src=\"https:\/\/elmastudio.de\/wp-content\/uploads\/2011\/04\/yoko-wordpress-theme-06.jpg\" alt=\"Yoko WordPress Theme\"\/><figcaption class=\"wp-element-caption\">e.g. a gallery post will show one thumbnail image and the number of images that are in the image gallery.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">7. Post Thumbnails<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In the Yoko theme you can show to include post thumbnail.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"610\" height=\"305\" src=\"https:\/\/elmastudio.de\/wp-content\/uploads\/2011\/04\/yoko-wordpress-theme-07.jpg\" alt=\"Yoko WordPress Theme\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The Thumbnail image size is 140\u00d7140 Pixel (bigger images will automatically be resized). To add a thumbnail to a post just upload it using the option field <strong>\u201eFeatured image\u201c<\/strong> in the \u201eEdit Post\u201c admin window.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">8. The Yoko Social Links widget<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Yoko has a custom widget with mini icons to link to your social profile sites like Twitter, Facebook, Flickr, Vimeo, LinkedIn, Delicious or to your RSS Feed.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"610\" height=\"272\" src=\"https:\/\/elmastudio.de\/wp-content\/uploads\/2011\/04\/yoko-wordpress-theme-08.jpg\" alt=\"Yoko WordPress Theme\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">To use the widgets choose <strong>Appearance \/ Widgets<\/strong> in the admin panel and drag\u2019n\u2019drop the <strong>Yoko Social Links Widget<\/strong> into one of the two sidebars. In the Widgets Options you can add a widget title and your link texts and URLs. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">9. Author description<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To show an author description text with gravatar image at the end of every post just fill out the \u201eBiographical Info\u201c in  the Users profile.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"610\" height=\"260\" src=\"https:\/\/elmastudio.de\/wp-content\/uploads\/2011\/04\/yoko-wordpress-theme-09.jpg\" alt=\"Yoko WordPress Theme\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">After updating the info the author info field will show up automatically at the end of every single post page.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">10. Threaded Comments<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Yoko also supports the WordPress threaded comments feature. There will be an reply button after every comment to reply directly to an individual comment. If the button downn\u2019t show up you might have to enable the threaded comments option under Settings \/ Discussion \/ Other comments options.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">11. Theme translations<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Yoko is ready for theme translation. Right now there is the default English and a German translation available. You can add your own translation or customize an existing translation very easily by using the WordPress plugin <a href=\"https:\/\/wordpress.org\/plugins\/codestyling-localization\/\">\u201eCodestyling Localization\u201c<\/a>.  At the <a href=\"https:\/\/www.code-styling.de\/\">plugins homepage<\/a> you can find a detailed plugin description.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">12. Customizing Yoko by creating a child theme<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In case you want to customize the Yoko theme a little further and you therefore change the code in the themes Styleeheet or any of the theme template files please consider creating a child theme for your changes. Creating a child theme is very easy and it saves all your individual changes from being overwritten by a future update of the Yoko theme. You can find more information on creating a <a href=\"https:\/\/codex.wordpress.org\/Child_Themes\">child theme in the WordPress Codex<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We hope you like the Yoko WordPress theme. To ask any question about the theme or report a problem just write us a <a href=\"#reply-title\">comment<\/a> or a message using the <a href=\"https:\/\/elmastudio.de\/en\/about\/\">contact form<\/a>. We are looking forward to your feedback, questions and suggestions!<\/p>\n\n\n\n\n\n","protected":false},"excerpt":{"rendered":"<p>The Yoko Theme Overview Yoko is a modern and flexible WordPress Free-Theme. With the responsive Layout the theme adjusts different screen sizes. Therefore the Yoko design is optimized for big desktop screens, tablet pcs like the iPad or small smartphone screens. To make your blog even more individual you can use the new post formats [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":312819,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_seo_schema_type":"","_wpcom_ai_launchpad_first_post":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[940],"tags":[1566,2068,1024,1052],"class_list":["post-311256","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-themes-en","tag-free-themes","tag-post-formats-en","tag-responsive-en","tag-wordpress-en-2"],"jetpack_shortlink":"https:\/\/wp.me\/phlOHV-1iYg","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/elmastudio.de\/wp-content\/uploads\/2026\/08\/yoko-card-4x3-1.png","_links":{"self":[{"href":"https:\/\/elmastudio.de\/en\/wp-json\/wp\/v2\/posts\/311256","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elmastudio.de\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elmastudio.de\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elmastudio.de\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/elmastudio.de\/en\/wp-json\/wp\/v2\/comments?post=311256"}],"version-history":[{"count":18,"href":"https:\/\/elmastudio.de\/en\/wp-json\/wp\/v2\/posts\/311256\/revisions"}],"predecessor-version":[{"id":316500,"href":"https:\/\/elmastudio.de\/en\/wp-json\/wp\/v2\/posts\/311256\/revisions\/316500"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elmastudio.de\/en\/wp-json\/wp\/v2\/media\/312819"}],"wp:attachment":[{"href":"https:\/\/elmastudio.de\/en\/wp-json\/wp\/v2\/media?parent=311256"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elmastudio.de\/en\/wp-json\/wp\/v2\/categories?post=311256"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elmastudio.de\/en\/wp-json\/wp\/v2\/tags?post=311256"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}