Adding a header image to the Mumrik theme

A lot of people have asked us how to add a custom header image to a page using the Mumrik Theme so the page you are using will look something like this.

In order to achieve that page layout you will have to create a page (not a blog post), add and edit some custom fields and finally select the proper page template. We will guide you through the steps in this post

1. Create a Page

First you need to create a page, or edit an existing page.

2. Set Custom Fields Values

When writing or editing an existing page or post, you have the possibility to add custom fields with values specific for that post or page. These values can then be used by themes or plugins in order to achieve whatever the theme or plugin author have in mind. When it comes to the mumrik theme we use custom fields for layout on pages. Scroll down to Custom Fields in your Write Post UI and expand and add the fields full_image and puff where full_image should point to the image you would like to add (preferrably the image is 938 pixels wide) to your layout, within puff you can specify the markup you would like to be added in the semitransparent area in the bottom of the page.

3. Choose Page Template

When the custom fields are set, you have to choose the correct page template. Mumrik is delivered with a custom page template named Section First Page. Choosing the template is easy, all you have to do is scroll down in the Write Post UI and expand the section Page Template and choose Section First Page from the drop-down.

4. Publish and enjoy

When all this is done, all you have to do is publish your page, and you are going to have a brand new layout on your Mumrik-driven page.

Related posts

  1. Mumrik Theme
  2. WordPress Theme Mumrik available for Download
  3. WordPress Theme Mumrik is Online

20 thoughts on “Adding a header image to the Mumrik theme

  1. Sorry, that didn’t show last time. The div tag “BigAd” right below the “Wrapper” div can hold an image using an HTML link:

    img src=”IMAGE-URL-HERE”

  2. Nick is almost right. Don’t put it in BigAd, put it after the mainNavigation div and just before the php tag.

  3. thanks for the tutorial on this. found this entry through google while trying to do exactly this.

    i’m trying to edit this particular theme to have a different font. however it doesn’t change the font when i adjust the font family. is there another location in the style sheet (or other sheet) that i need to adjust the font type in?

  4. Hi, nice template, but can someone write all what is need for Header like in template,

    in custom field, what I need to write in Name what in Value
    where, full_image where Puff,

    where and white i need in header.php

  5. Hi,
    Love the theme. I have had success putting the header up on the regular pages but not on the homepage where my posts are. Can you help with this? I have read the above posts about adding the image to index.php by adding img src=”IMAGE-URL-HERE” but I lose the white gap between the navigation bar and the photo and I am also concerned about consistency in appearance across browers in coding a header image in two different ways. Thanks for your help on this!
    -Thane

  6. Theme looks wonderful but have no idea how to put a custom header in. The advice here sounds designed for people who speak ancient Greek. It’s too bad there isn’t just a way to insert a header automatically the way there are on so many other themes. I won’t be able to use this one.

    • The theme is a bit out of date now. I am working on a version 2 of the theme that will utilize WordPress features that were not available when the older version was developed. Hopefully that will solve your problem! Unfortunately I have no planned date for the release of version 2. Thanks for posting!

  7. Dear Mattias

    I do like your theme .. But i am really struggling with the header image and the advice on the site has not helped.

    Custom field value- what do i put in there exactly?

    Came to Uppsala a few years ago, beautiful city

    Please respond, or point me to a laymans response.

    KR, eve

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>