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.
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 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.
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.
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):
- Default Post Width:
960 on wide screens)
- Featured Post Image:
1194 on wide screens)
- Default Page:
1189 on wide screens)
- About Widget Image: At least
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
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.
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:
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
- 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.
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.
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, WordPress.com, WordPress.org, Feed (URLs with /feed/ at the end), and Email (using the format mailto:firstname.lastname@example.org).
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.
The Quote widget, which can display favorite quotes or slogans on your blog.
The Cocoa Quote widget.
If you want to add a link to the author’s website, you can use the following HTML:
by <a href="http://sample.com/">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.
You can choose the number of posts and the category from a drop-down menu in the widget’s settings.
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 Quote
Cocoa Post Format Link
Cocoa Post Format Image
Cocoa Post Format Aside
Cocoa Post Format Status
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”.
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.
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...
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>
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”.
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”.
Your content here...