Cocoaby Elmastudio

Getting Started

After activating Cocoa, you can start customizing the theme under Appearance → Customize, where you’ll find options to change the background or site title color, upload a header/logo image, or add a Custom Menu.

Custom Header Image

Cocoa Custom Logo

You can upload a custom logo or header image with a maximum width of 1194 pixels (and a flexible height) under Header. You can also choose to hide the Site Title and Tagline under Site Identity in the Customizer.

Custom Colors

In the Color tab, you can change your header text color or the background color. Since you can see your changes right away in a live preview, it’s easy and fun to play around with the settings before you publish them.

Widget Areas and Cocoa Widgets

Cocoa has two large, one-column widget areas: one in the the footer and another in the header overlay, which can be opened by clicking on the Plus button at the top left. You can also include the following custom widgets:

About Widget

Cocoa: About Widget

You can add an About widget to any of your widget areas.

  • First, upload your image to the Media Library using the Media Uploader. The image should be in JPG or PNG format and be a minimum of 600 pixels wide. In the Cocoa live demo the image dimensions are 600 x 843 pixels.
  • After you upload your About image under Media → Add New you will see the image URL in the right “Save” box under “File URL.”
  • Copy the URL and paste it in the widget settings under “About Image URL.” You’ll also need to add the image’s width and height values (Important: Only the numerical value, without px).
  • You can also add contact information, your slogan – which will be displayed in a larger font size next to your image – and some text. You can include HTML, including links, in all text fields.

Social Links

To display Social Links in your widget areas, first create a new custom menu under Appearance → Menus. It’s important to give your new menu the name “Social.”

Next, add links to your social profiles using the custom “Links” option.

Cocoa Create a Social Menu

You can include URLs with your own titles (Navigation Labels) for the following social sites:

CodePen, Digg, Dropbox, Facebook, Flickr, Google+, Instagram, LinkedIn, Pinterest, Path, Dribbble, Polldaddy, GetPocket, Reddit, Skype, StumbleUpon, Tumblr, Twitter, Vimeo, YouTube,,, Feed (URLs with /feed/ at the end), and Email (using the format

Cocoa Social Links Custom Menu Widget

All Cocoa Social Links.

After you finish creating your Social Links menu, return to Appearance → Widgets and add your new menu to either the footer or header using the Custom Menu widget.

Quote Widget

The Quote widget, which can display favorite quotes or slogans on your blog.

Cocoa Quote Widget

The Cocoa Quote widget.

Cocoa Create Quote Widget

If you want to add a link to the author’s website, you can use the following HTML:

by <a href="">Author Name</a>

Recent Posts by Category Widget

With the Cocoa: Recent Posts by Category widget you can add a number of 3,6 or 9 recent posts of a specific category.

Cocoa Recent Posts Widget

You can choose the number of posts and the category from a drop-down menu in the widget’s settings.

Post Formats

You can use the following Post Formats in Cocoa: Links, Quotes, Status, Aside, Image, and Video.

You can add the post content  – like a blockquote text, video, or image – into the post just as you would with a standard post, then select the right post format from the Page Attributes box.

Cocoa Post Format examples:

Cocoa Post Format Video

Cocoa Post Format Video

Cocoa Post Format Quote

Cocoa Post Format Quote

Cocoa Post Format Link

Cocoa Post Format Link

Cocoa Post Format Image

Cocoa Post Format Image

Cocoa Post Format Aside

Cocoa Post Format Aside

Cocoa Post Format Status

Cocoa Post Format Status

Custom Menu

To add your own Custom Menu in the Cocoa header area, create a new menu under Appearance → Menus and assign it as the “Top Primary Menu”.

Archive Page

Cocoa comes with an Archive Page template. To use it, create a new page and choose the Page Template “Archive Page” from the drop-down menu in the Page Attributes box. The archive displays your latest 30 posts, as well as links to filter by month, category, and tag.

Typography Styles

You can use a number of additional typography styles to design more interesting posts and pages. You can find an overview of all additional typography styles in the Cocoa live demo.

Intro Text – To include an intro text paragraph or sentence at the top of your post or page, switch the Visual Editor to Text (HTML) view and put your intro text in a p tag with the CSS class intro. For example:

<p class="intro">Your intro text here...</p>

Drop caps – To highlight a paragraph with a drop cap letter, you can wrap the first letter of the paragraph in a span tag with the CSS class dropcap.

<span class="dropcap">F</span>irst letter...
Cocoa Dropcap

Dropcaps are a great way to highlight the first paragraph of a blog post or page.

Pull Quotes – You can add pull quotes to your text by wrapping a sentence or short text in a p tag with the CSS class “pull-left” or “pull-right” for left- or right-aligned pull quotes.

<p class="pull-left">This is a left-aligned pull quote text.</p>
Cocoa Pullquotes

A right-aligned pull quote.

Wide-Content – To include content in a wider column of 905 pixels – instead of the default 670 pixels – you can wrap the content in a div with the CSS class “wide-content”.

<div class="wide-content">
Your content here...

Two-Column Text Style – you can display your content in two-columns by wrapping your text in a div with the CSS class “two-columns”.

<div class="two-columns">
Your content here...