How to add a static block to the header in Magento

How do you add a static block into the header area of Magento?

Turns out, it’s not too hard.

If you would like to easily change the appearance of your header area in your Magento Commerce website, embedding code into the header to create a static block is probably the easiest way, so anytime you like, right from the Magento admin, you can simply update the info and baddabing-baddaboom, new content in the header.

Start off by going into Magento Admin and go to “CMS>Static Blocks”

Click the “Add New” button.

Make the Block Title something that makes sense, maybe “Header Area Main Store”

In the identifier field, enter “header_block”. (Of course do not include the quotation marks.)

Select the store view you want this to be available in.

Change the status to “Enabled”.

Put in your content. I would use a copy of some other Magento sample code in here and play with that to help familiarize yourself with the formatting if you don’t know how else to do this.

Click “Save Block”

Next, ftp to your server to the “/app/design/frontend/default/YOURTEMPLATE/layout/page.xml” file.

IMPORTANT: Make a copy of this file and save it for BACKUP!

Open the original file now with a proper text editor and find the section that defines the “html_header”.

The section I’m referring to will read something like this:

<block type=”page/html_header” name=”header” as=”header”>

<block type=”core/text_list” name=”top.menu” as=”topMenu”/>

</block>

Now add the code to call the static block. Your new code will look something like this:

<block type=”page/html_header” name=”header” as=”header”>

<block type=”cms/block” name=”header_block”><action method=”setBlockId”><block_id>header_block</block_id></action></block>

<block type=”core/text_list” name=”top.menu” as=”topMenu”/>

</block>

Next, navigate to “/app/design/frontend/default/YOURTEMPLATE/template/page/html/header.phtml”.

Make a backup copy of this file.

Open the original and find the area that designates the header content you want to manage. Usually, it’s going to contain the word “logo” in this bit of code.

Our code looks like this:

<h1 id=”logo”><a href=”<?php echo $this->getUrl(”) ?>”><img src=”<?php echo $this->getLogoSrc() ?>” alt=”<?php echo $this->getLogoAlt() ?>”/></a></h1>–>

<!– <h1 id=”logo”><img src=”<?php echo $this->getLogoSrc() ?>” alt=”<?php echo $this->getLogoAlt() ?>”/></h1>

<img src=”<?php echo $this->getSkinUrl(’images/media/truck-equipment-contact.gif’) ?>” alt=”Work Truck Equipment – Truck Hardware – Accessories” class=”side-logo-promo”/>

Comment out this section of code and insert this in it’s place:

<?php echo $this->getChildHtml(’header_block’) ?>

Save this file and the other file we just edited.