Moka

$18

Moka Theme Featured Image

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
Moka Front Page Widgets and Search Form.

Moka quote widget and 3-column footer widget area.
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.

moka-blog-layout
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.

moka-mobile-devices
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):

  1. The standard content width for Posts and Pages is 720.
  2. Standard post featured images should be at least 720 and max. 1070.
  3. Featured images for sticky posts should have a width of 1070.
  4. Featured images of posts featured in the slider should be 1070 x 600.
  5. Max. width of logo image: 200.

 

Getting Started

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.

The Moka Theme 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):

  1. The standard content width for Posts and Pages is 720.
  2. Standard post featured images should be at least 720px and max. 1070px.
  3. Featured images for sticky posts should have a width of 1070px.
  4. 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 Sider” 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.

moka-slider
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.

moka-sticky-post
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.

moka-custom-logo
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.

Footer Widgets

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-widget-areas
Moka has 5 easy-to-use widget areas.

moka-footer
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

Drop Caps

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...

Pull Quotes

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>