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
600pixels 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:email@example.com).
The Quote widget, which can display favorite quotes or slogans on your blog.
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:
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...
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>
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... </div">
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... </div">