Cocoa WordPress Blog Theme

Cocoa is a minimalist blog theme with a modern, fresh design aimed at those who appreciate elegant typography. Featuring beautiful post and page layouts, the theme also shows off photography gracefully, with abundant use of white space.

Ready for Mobile Devices

Cocoa’s responsive design adapts smoothly to different screen sizes, so your content will always look beautiful on smartphones, tablets, laptops, and large desktop screens.

Cocoa Devices

Header and Footer Widget Areas

Cocoa includes one widget area in the header overlay and another in the footer. The contemporary header overlay offers plenty of space for extra content, so you can include widgets like the Cocoa: About widget to let your readers know more about you and your blog.

Cocoa WordPress Theme About Widget

Cocoa also comes with a large Quote widget and a Recent Posts by Category widget, which includes post thumbnails. In addition, you can display Social Links in your widget areas by creating a custom Social menu and adding it to a Custom Menu widget.

Cocoa also features a widget area in the footer, so you can add additional content below your blog posts.

Cocoa WordPress Theme Widgets

Beautiful Typography and Post Formats

To help present your content in the most attractive way, Cocoa provides several layout and typography options. You can opt for one or two columns, and add an intro text, drop caps, pull quotes, regular quotes, lists, extra-wide content areas, or side notes.

Cocoa Typography Details

You’ll find an overview of Cocoa‘s typography options on the live demo under “Text Styles”.

Cocoa also supports some Post Formats, to style your content and publish smaller posts, like quotes, status updates, or side notes: Quote, Status, Aside, Link, Video, and Image.

Archive Page and Search Results

Cocoa comes with a custom archive page template. Create a new page and choose the “Archive Page” template under Page Attributes, and your Archive page will automatically show your latest 30 posts as well as all posts filtered by month, category, and tag. This gives your readers extra ways to explore your content.

Search results and archives use a unique three-column layout, so the results are presented more clearly.

Customizing Cocoa Even Further

You can customize Cocoa using the Customizer. This way you can try out different logo or header images, change the background color, or add new widgets without the need to save your settings right away.

For further options like Custom CSS, font changes, and custom color options, you can purchase an upgrade featuring our Custom Design tool.

Quick Specs (all measurements in pixels):

  1. Default Post Width: 670 (960 on wide screens)
  2. Featured Post Image: 905 (1194 on wide screens)
  3. Default Page: 905 (1189 on wide screens)
  4. About Widget Image: At least 600

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