From iThemes Codex
Revision as of 03:49, 1 April 2011 by Sridhar (talk | contribs) (How to place nav bar to the right of logo)
Jump to: navigation, search

How to enable Post Formats

WordPress 3.1 includes a new feature called Post Formats that lets the site admin enable additional post formats besides the default one termed as "Standard" when creating/editing a post.


To use this feature, add the following to your theme's functions.php:

add_theme_support( 'post-formats', array( 'aside', 'chat', 'gallery', 'image', 'link', 'quote', 'status', 'video', 'audio' ) );

If you have not used functions.php in BuilderChild-Default so far, download this file, name it as functions.php and upload it to your child theme directory, i.e., to wp-content/themes/BuilderChild-Default.

Also see

How to place text at the right side of clickable header image


These instructions are provided as an example to have a header image in a HTML module which when clicked takes the visitor to home page. At right side of the module is some text coming from a widget as can be seen in the above screenshot.

1. Edit your layout and add a HTML module.

Paste the following in module's text area:

<a href="<?php bloginfo('url');?>">Quality Care Homes</a>

Replace "Quality Care Homes" in the above with your site's keyword-rich title or any other text of your choice.

Set 1 Right sidebar and a width of your choice. In this example, we are using 300px with the layout width being 960px.

Enable PHP and save the module and layout.

2. Add the following at the end of your theme's style.css:

.builder-module-1 {
	background: url("") no-repeat;
	height: 150px;

.builder-module-1 .builder-module-element a {
	display: block;
	width: 660px;
	height: 150px;
	text-indent: -9999px;

.builder-module-1 .builder-module-sidebar {
	background: transparent;
	padding-top: 0;
	padding-bottom: 0;
	font-weight: bold;
	text-align: center;

.builder-module-1 .builder-module-sidebar  .widget {
	padding-top: 1em;

.address {
	font-size: 150%;

.phone {
	font-size: 120%;

The above assumes that header is always the first module in all layouts through out the site.

The following should be changed in this CSS code:

  • URL of background image for .builder-module-1
  • Height of .builder-module-1 .builder-module-element a to match that of the header image
  • [Optional] Width of .builder-module-1 .builder-module-element a to the width of your desired clickable area

3. At Appearance -> Widgets, drag a text widget and paste the following:

<div class="address">Konihowski Care Home</div>
<div class="phone">Phone: (306) 931-0075</div>
<div class="address">Maguire Nursing Home</div>
<div class="phone">Phone: (306) 382-5656</div>

Use text that is relevant to your site instead of the above.


1. Go to Appearance -> Menus and create a custom menu with items that should appear in the nav bar.

2. Add a HTML module to the layout. Paste the following in module's text area:

<?php wp_nav_menu( array( 'menu' => 'Top Menu', 'menu_class' => 'builder-module-navigation') ); ?>

Change "Top Menu" in the above to the name of menu from step 1.

Set it to have 1 left sidebar having a width of say 200px. Set 'Enable PHP' to Yes.


3. Save the module and layout.

4. Install PHP-Widgetify plugin.

5. Upload the logo, say logo.png to your (child) theme's images directory.

6. Go to Appearance -> Widgets. Drag a PHP Widgetify widget to the module's sidebar and paste the following:

<a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo( 'stylesheet_directory' ); ?>/images/logo.png" width="211" height="82" alt="Home"/></a>

Change width and height values in the above to match that of your site's logo.

7. Add CSS style rules in theme's style.css. Below is a sample code that you could use. Make sure to tweak so everything looks fine in your site:

.builder-module {
	border-top: none;
	border-bottom: none;

.builder-module-sidebar {
    background: transparent;

.builder-module-1 {
    background: transparent;
    margin-bottom: 0;

.builder-module-1 .builder-module-element {
    float: right;
    margin-top: 2.5em;

.builder-module-navigation li {
    margin-left: 0.5em;

.builder-module-navigation li a,
.builder-module-navigation li.current_page_item li a,
.builder-module-navigation li.current-cat li a {
    background: transparent;
    color: #FFFFFF;
    font-size: 16px;

.builder-module-navigation li a:hover, .builder-module-navigation li.current_page_item a,
.builder-module-navigation li.current-cat a {
    background: #373737;
    color: #FFFFFF;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;

Item 4