--- title: "Yoko WordPress Theme for Blogs" author: "Ellen Bauer" date: 2011-04-26 lang: en source: https://elmastudio.de/en/yoko-wordpress-theme/ --- # Yoko WordPress Theme for Blogs ## The Yoko Theme Overview ![The header of the Yoko theme](https://elmastudio.de/wp-content/uploads/2026/09/yoko-header-card.jpg) 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. ![Yoko WordPress Theme](https://elmastudio.de/wp-content/uploads/2011/04/yoko-wordpress-theme-ipad-quer.png) *iPad Landscape mode, two-column layout.* ![Yoko WordPress Theme](https://elmastudio.de/wp-content/uploads/2011/04/yoko-wordpress-theme-ipad-hoch.png) ![Yoko WordPress Theme](https://elmastudio.de/wp-content/uploads/2011/04/yoko-wordpress-theme-iphone.png) *iPad por­trait mode and smartphones, one-column layout.* ## The theme features - 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. - HTM5 (fallback for IE < 9) - custom link color, header image, background and logo image - optional additional navigation menu (Sub Menu) below the header image - theme options page - Yoko social links widget with mini icons (for RSS, twitter, facebook, flickr, vimeo, linkedin and delicious) - post formats for standard, aside, gallery, link, video, image and quote (you need to have WordPress 3.1 installed) - threaded comments - post thumbnails - custom CSS Styles for the [Contact 7 form](https://contactform7.com/) WordPress plugin - Using of Google web fonts Droid Sans and Droid Serif - translation-ready (currently the English, German and French translations are available) ## The theme options 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 **wp-content/themes/…**. To use the Yoko theme after uploading it go to your WordPress admin panel and choose **Appearance / Themes**. Here you can see the Yoko theme in the list of available themes and you can choose to activate it. ## 1. Custom link color and logo image To use a custom link color or logo image go to **Appearance / theme options page**. ![Yoko WordPress Theme](https://elmastudio.de/wp-content/uploads/2011/04/yoko-wordpress-theme-10.jpg) Here you can type in your own link color using the hex term like **#009BC2** (don’t forget the symbol #) or a color term like **red, blue or green**. 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. ## 2. Custom Header Image To use an individual header image go to **Appearance / Header**. ![Yoko WordPress Theme](https://elmastudio.de/wp-content/uploads/2011/04/yoko-wordpress-theme-11.jpg) Here you can upload your own header image in the size 1102×350 Pixel, pick one of the other header images that come with the Yoko theme or choose not to use an header image at all. ## 3. Custom Background In the admin panel choose **Appearance / Background** to pick your own background color or upload a background image. ![Yoko WordPress Theme](https://elmastudio.de/wp-content/uploads/2011/04/yoko-wordpress-theme-12.jpg) The image doesn’t 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. ## 4. Customize the main navigation 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. ![Yoko WordPress Theme](https://elmastudio.de/wp-content/uploads/2011/04/yoko-wordpress-theme-04a.jpg) Just set up your individual navigation menu (Appereance / Menus) and mark it as the **Primary Navigation** in the Theme Locations option field (at the top left side of the menu admin panel). ## 5. Additional navigation menu (Sub Menu) One more Yoko theme feature is the optional additional navigation menu right below the header image. ![Yoko WordPress Theme](https://elmastudio.de/wp-content/uploads/2011/04/yoko-wordpress-theme-04.jpg) To use this additional menu option set up an custom menu with the name **„Sub Menu“** under **Apperance / Menues**. You can use up to seven main menu terms and multiple sub menu terms. Just drag’n’drop the sub menu terms a little bit to the right to mark them as sub level. After you save your „Sub Menu“ navigation menu you will see it in your blog layout. ## 6. Post Formats (WordPress feature since version 3.1) Yoko also supports the new post formats feature. Right now you can choose your posts to be **standard posts**, **aside** (a short note), **gallery**, **link**, **video**, **image** or **quote posts**. ![Yoko WordPress Theme](https://elmastudio.de/wp-content/uploads/2011/04/yoko-wordpress-theme-05.jpg) The different post formats will then have different styles in your blog design. ![Yoko WordPress Theme](https://elmastudio.de/wp-content/uploads/2011/04/yoko-wordpress-theme-06.jpg) *e.g. a gallery post will show one thumbnail image and the number of images that are in the image gallery.* ## 7. Post Thumbnails In the Yoko theme you can show to include post thumbnail. ![Yoko WordPress Theme](https://elmastudio.de/wp-content/uploads/2011/04/yoko-wordpress-theme-07.jpg) The Thumbnail image size is 140×140 Pixel (bigger images will automatically be resized). To add a thumbnail to a post just upload it using the option field **„Featured image“** in the „Edit Post“ admin window. ## 8. The Yoko Social Links widget 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. ![Yoko WordPress Theme](https://elmastudio.de/wp-content/uploads/2011/04/yoko-wordpress-theme-08.jpg) To use the widgets choose **Appearance / Widgets** in the admin panel and drag’n’drop the **Yoko Social Links Widget** into one of the two sidebars. In the Widgets Options you can add a widget title and your link texts and URLs. ## 9. Author description To show an author description text with gravatar image at the end of every post just fill out the „Biographical Info“ in the Users profile. ![Yoko WordPress Theme](https://elmastudio.de/wp-content/uploads/2011/04/yoko-wordpress-theme-09.jpg) After updating the info the author info field will show up automatically at the end of every single post page. ## 10. Threaded Comments 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’t show up you might have to enable the threaded comments option under Settings / Discussion / Other comments options. ## 11. Theme translations 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 [„Codestyling Localization“](https://wordpress.org/plugins/codestyling-localization/). At the [plugins homepage](https://www.code-styling.de/) you can find a detailed plugin description. ## 12. Customizing Yoko by creating a child theme 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 [child theme in the WordPress Codex](https://codex.wordpress.org/Child_Themes). We hope you like the Yoko WordPress theme. To ask any question about the theme or report a problem just write us a [comment](#reply-title) or a message using the [contact form](https://elmastudio.de/en/about/). We are looking forward to your feedback, questions and suggestions!