Mokaby Elmastudio


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

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

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>