Pinboard Theme Documentation Day 1: Customizing the Header

After listening to the feedback we got from you, our users, we have understood that the Pinboard Theme has features you all love but because of the complexity of their implementation the area where this theme falls mostly behind is the lack of a solid documentation on how to set up this theme to your own preference. After spending some time planning and researching, today we would like to present this documentation to the world, to show each of you how to make this theme your own.

What this documentation will show you: How to set up the theme options, use widget areas and standard WordPress features to customize this theme to your needs.

What this documentation won’t show you: How to hack into the theme’s files and customize code. For simple tasks like that we have a nifty place at the Support Forums or if what you need is complex customizations we recommend considering hiring a developer.

What we’ll do is recreate the demo site of the Pinboard theme, with some additional features that are not present in the demo, walk you through each step in the process. Since we can’t possibly know each person’s preference we figured presenting all possibilities was the best way to make everyone happy. If you don’t know yet what this theme has to offer go ahead and read the list of features and check out the demo.

This documentation is part of a series of tutorials so if you haven’t read our other tutorials make sure to check them below:

• Day 1: How to customize the Site Header
• Day 2: How to customize the Content Area

This is our first part of a series of tutorials on how to master the Pinboard Theme’s features where we will show you how to customize the theme’s header. You will learn how to add a site logo, customize the menu, add menu item descriptions, add social media links and insert ads in the header. Read on to find out how you can use all these features to your benefit:

To begin let’s take a look at a fresh installation of WordPress with the Pinboard Theme activated:

In the preview you can identify the site header and navigation, the default post generated by WordPress, copyright information and some widgets in the header. The first thing that’s probably annoying are the widgets in the header whose content looks out of place, so we’ll go ahead and remove each of them from Appearance > Widgets, Header sidebar, as shown in the screenshot below:

As you can see the header widgets have been replaced with the search bar and also the site’s tagline has appeared:

The Header sidebar is actually intended exclusively for ads of standard dimensions so not every content will fit in there. We’ll get to that later in the documentation.

Now let’s spend a bit customizing the site’s header.

Add a Site Logo

We’ll replace the site’s title with a logo of our own choice. The way this is implemented is with WordPress’ Custom Header feature so we’ll go in the admin under Appearance > Header.

There, under “Select Image” you can upload your logo or select it from the Media Library. You’ll see  the recommended dimensions being 196 x 48 pixels but you can use an image of any dimensions. Then, under “Header Text” you can select wether to show the site’s title and headline next to the image or not. Since or image is a graphic representation of the site’s title, we’ll choose not to display the text.

Hit “Save Changes” and you’ll be taken to a page where you’ll be able to crop the selected image. If you wish to leave it as is select “Skip Cropping, Publish Image as Is”. You’ll see a preview of the header in the admin:

The logo on the main site should look like this:

The logo image is wrapped around a link to the home page so clicking on it will take you to the site’s home page.

Retina Header Image

The theme has the option to show the logo as a retina-display compatible image. If the option is not enabled, you can enable it by checking the box “Uploaded header images are HiDPI images for retina displays, downsize on normal screen devices” in Theme Options:

This option allows you to upload an image of double sized dimensions which will be displayed in full size on HiDPI displays like the Apple Retina and downsized to half of its dimensions on normal displays.

Add Menu Descriptions

The navigation menu is is a standard WordPress Custom Menu which can be customized to include any kind of links like categories, pages, custom post types and custom links. The Pinboard Theme takes this menu a step further by allowing you to add a short description below each menu item title.

The way these are added is by expanding existing menu items and adding the description in the “Title” field as seen in the screenshot below:

On the main website they should look like this:

Add Social Media Links

The theme has a built-in section for social media links. You can customize them under Appearance > Theme Options > General. By default they are all empty. Let’s add some links:

The fields left blank will not be used. They will appear in the site’s header as round, flat icons:

The icons will jump and become colored when hovered. You can observe that the search bar has also shrinked to icon size. It will expand when clicked.

Insert Ads in the Header Sidebar

The Header contains a sidebar that is intended for inserting ads of standard dimensions: 728 x 90 pixels when pages are displayed full width and 468 x 60 when pages use the “No Sidebars” layout or the browsers viewport is less than 1152 pixels wide. For this reason, the content of random widgets in the Header sidebar may look out of place as seen in the example above when the Pinboard theme is activated for the first time.

Ads can be inserted in several ways: either through a plugin like AdRotate and OIOpublisher, generated with JavaScript or in plain text. We will present you the simplest example, how to insert and with plain text, and starting from this example you should be able to adapt to the ad provider’s technology to insert just any kind of ads.

The simplest way to insert a plain text ad is to add a “Text” widget to the “Header” sidebar. Leave the “Title” field blank and paste the ad code in the text area. Leave the “Automatically add paragraphs” box unchecked and save the widget’s settings:

The ad should appear in the site’s header.

The ad should now appear in the site’s header:

You can observe that when the “Header” sidebar is active the site’s tagline is hidden. That is to prevent the header’s content from displacing when using longer site titles or taglines.

Now you master everything you need to know to customize your site’s header. We hope you found our tutorial useful and expect your feedback in the comments section. Stay tuned for our next tutorial where we will show you how to customize the content area.