Moka is a minimal blog and magazine theme with an elegant, clean & fresh responsive design. You can use Moka as a simple and pure blog theme or you can create a custom front page with a featured sticky post or a featured post slider, a number of recent posts and lots of beautiful custom front page widgets.
Create your Custom Front Page
The Moka theme offers you two custom front page options. You can choose to feature a big sticky post at the top of your front page or a featured post slider. Next to the featured post options and a number of recent posts with thumbnails (you can choose between 3,6 or 9 recent posts) you can also create beautiful custom Moka front page widgets to make your blog even more personal and unique.
Beautiful Moka Front Page Widgets
After setting up your new front page you can add custom front page widgets like an About widget with an About image, a Quote widget with big typography, multi-column Recent Post widgets featuring your posts filtered by categories or custom designed tag/category clouds to your front page.
Moka Front Page Widgets and Search Form.
Quote Widget, a front page tagcloud and the Footer Widget Area.
Lots of flexible Theme Features
Besides the front page feature, Moka also comes with a pure and clean blog template, an Archives page template, a Full width page template, a 3-column footer widget area and a social links footer widget area. You can also choose to make the left sidebar fixed positioned on wider screens and add a logo image instead of the default site title.
The default Moka blog layout with a Custom Logo image.
Ready for Mobile Devices
The Moka theme design is responsive and prepared to adapt smoothly to different screen sizes, so that your content will be easy to read and look beautiful on smartphones, tablets, laptops, and large desktop screens.
Mokas responsive layout adapts to different screen sizes.
Customize Moka even Further
With the Customizer you can customize Moka very easily and for instance change the number of recent posts on your front page, make the sidebar fixed positioned (on wider screens only) or choose a custom menu for your main navigation.
Moka also supports Custom Backgrounds, making it easy to use a light color or an image of your choice as the background of your site. And of course you can also add your own logo image instead of using the default site title, by uploading your logo image (max. width 200px) to the Custom Header. For further options like Custom CSS, font changes and more custom color options you can buy the Custom Design upgrade.
Quick Specs (all measurements in pixels)
- The standard content width for Posts and Pages is
- Standard post featured images should be at least
720 and max.
- Featured images for sticky posts should have a width of
- Featured images of posts featured in the slider should be
- Max. width of logo image:
After you activate Moka, you can start customizing the theme under Appearance → Customize. Here, you’ll find the main customization options: background color, header image, and custom menus.
You can also choose the fixed sidebar option under “Theme Options”, change the number of recent posts for your front page under “Front Page Settings” and change the tag name for posts that you want to feature in a front page slider in the Customizer.
You can see your changes right away in the Live Preview, so it’s easy and fun to play around with the settings. For further customizations and theme options please read the following theme documentation:
Quick Specs (all measurements in pixels)
- The standard content width for Posts and Pages is 720.
- Standard post featured images should be at least 720px and max. 1070px.
- Featured images for sticky posts should have a width of 1070px.
- Featured images of posts featured in the slider should be 1070px x 600px.
Creating a Custom Front Page
One of Moka‘s theme highlights is the custom front page you can set up, instead of the default blog. The front page will show your recent posts as well as additional front page widgets you can set up under Appearance → Widgets.
Two Front Page Options: Featured Post Slider or Featured Sticky Post
To start using a front page for your website you need to create a new, empty page and set “Front Page Sticky Post” or “Front Page Slider” as your Template under Page Attributes → Template. Now you can choose your new Front Page as your Static Front Page under Settings → Reading.
If you want to keep your default blog page and maybe include it in your main menu as “Blog” or “News” you also need to create a new, empty page (e.g. with the name of “Blog”) and choose this page as your Posts Page under Settings → Reading.
With the Front Page Slider you can choose a featured tag (under Appearance → Customize → Featured Content) to add all Posts with this tag to the Featured Post Slider at the top of your Front Page. The featured images of the included posts should have the size of 1070 x 600px.
The Moka Featured Post Slider
With the second Sticky Post front page option you can feature your latest sticky post in a big single column at the top of your front page. The featured image of your sticky post should be of 1070px in width. You can mark posts as sticky posts using the “Quick Edit” button under “Posts” and checking the “Make this post sticky” checkbox.
The Moka Sticky Post
You can also deactivate the Comments under “Discussion” (if you don’t see the Discussion box right away, you might have to activate it via the “Screen Options” button on the top right of your admin panel).
Custom Front Page Widgets
Under Appearance → Widgets you can find all widget options like the widget areas for your 3-column footer widgets and also the “Front Page Widget Area”. We prepared some custom widgets especially for the Moka Front Page Widget Area.
About Front Page Widget
You can use the About (Moka) widget to show an about image (the size should be at least 517 pixels in width, the height is flexible), a small about text and additional info links, e.g. to your most important social profiles.
Big Quote Front Page Widget
To include a big quote or slogan to your front page widget area you can use the Big Quote (Moka) widget. You can also add the author of the quote.
Latest Posts by Category Front Page Widget
With the Moka widget Latest Posts by Categories you can add additional posts to your front page (in a four column grid). You can choose between 4, 8 and 12 posts per category and choose a specific category ID. To find out the ID of a category go to Posts → Categories and click on the category you want to use. In the URL you can now see the ID number of your category. The widget looks best, if you uses thumbnails for the post included in the widget.
Tagcloud for the Front Page
To show additional links to all your categories or tags, you can also include the default Tagcloud widget or the Category Cloud widget to the Front Page widget area.
Add a Logo Image
You can include your own logo image to replace or ad to the default site title text. First you need to prepare your logo image (the max. width is 200px, a max. height of 150px is recommended) as a JPG or transparent PNG image. Now you can upload your image under Appearance → Header. You can also crop a larger image to a smaller size while uploading your image. In the header option you can also choose to exclude the default site title and description text or change the color of the site title background.
You can easily prepare a round logo image with a transparent PNG.
A Custom Background
To customize the main background color (the default color is white) you can go to Appearance → Background and either choose your own color or upload your own background image. The background color should be of a lighter color or a light pattern image, so that the dark font color will still be visible.
Create a Custom Menu
Under Appearance → Menus you can set up custom menus for the Main Navigation in the sidebar below the site title.
You can create a new custom menu by adding any number of custom links, pages, categories, tags, post formats or posts and save them to your created menus. If you drag the included menu items to the right, you can also create sub menus. Now you can choose your new menu as the Primary Navigation in the Menu settings and save your changes.
Moka has a 3-column footer widget area as well as a Social Links footer widget area. You can set up all your footer widgets under Appearance → Widgets.
Moka has 5 easy-to-use widget areas.
The Moka Footer widget area.
Archive and Full Width Page Templates
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 (under Page Attributes → Template) and the page will show a list of popular tags, your 30 recent posts and a monthly archive.
To create full width pages with a width of 1070px (instead of the default 720px page width) you can choose the Full Width Page Template under Page Attributes → Template.
Additional Text Styling Options
You can style the first letter of a text paragraph with a drop caps by wrapping this first letter in a span tag with the CSS class of “dropcap”:
<span class="dropcap">D</span>ropcaps are very elegant...
You can add left or right aligned pull quotes to your posts by adding a paragraph with the CSS class “pull-left” or “pull-right” above the main text paragraph:
<p class="pull-left">Your side note content here...</p>