Customizing WordPress header

October 10th, 2007 update: part 2 is online

Since I installed WordPress, I always wanted to make a theme on my own, but I’ve never had the time to learn how to do it.

In these last days, when I installed the Torn theme, I started playing and messing with WP files, and now I think I can tell you something about WordPress header.

It’s just the header, I know, but it’s a good start to a brand new theme.

To change the header you have to edit the header.php file you can find in your wp-content/themes/yourtheme directory

According to WP Codex the default WP theme is made in this way:

Just like the Kubrick theme, I presume.

Line 1: Beginning of the “header” div, the header itself

Line 2: Another div called “headerimg” where according to the codex you should place your background image. Personally I don’t like this solution, and as you will see, I removed this div from my custom header

Line 3: Beginning of the h1 heading

Line 4: Anchor to the main page of the blog. get_settings(‘home’) writes the absolute path of the blog

Line 5: Writing the name of the blog. bloginfo(‘name’) writes the name of the blog and closing the anchor

Line 6: End of the h1 heading

Lines 3-6 writes the name of the blog in h1 heading and link the name to blog homepage

Line 7: Beginning of the description div

Line 8: Writing the description. bloginfo(description) writes the description of your blog, that “Just another WordPress blog” you see when you firstly install your blog

Lines 9-11: Closing all tags

This is how this blog header would look if I used this header

WordPress Header

As you can see, it shows the name of the blog (Emanuele Feronato) in h1 heading, the description (blog of an italian geek) in plain text, and the name has an hyperlink to the blog.

The whole thing sucks a bit because it has no CSS applied, but at the moment I want to focus on the contents we are going to put in the header.

So the question is: what can you see in most blog headers that you cannot see here?

Yeah, right, the “bar” with the pages! That “about”, “contact” and so on you see almost on every blog and that we don’t have in our header.

WP provides a function to display all pages called wp_list_pages() and it’s fully described at this page.

In five words, this function outputs the pages as a

  • list

    So my new header now is:

    As I told you, I removed the headerimg div and added another div under the description.

    Line 9: Beginning of the id where I list the pages

    Line 10: Beginning of a unordered list

    Line 11: Calling the wp_list_pages function

    Lines 12-13: Closing the tags

    I want to focus a bit on line 11. What is that ‘title_li=’ argument? By default, the father of the list of pages is “Pages”. This means that if we call the functions with no arguments, the first element of my list is “Pages”. I don’t want that “Pages” to be displayed and this is the way to do it.

    Real world example: imagine you have two pages: About and Contact.

    If you call wp_list_pages() the output will be:

    While if you call wp_list_pages(‘title_li=’) the output will be:

  • About
  • My Works
  • That is the one I prefer.

    So my header at this time looks this way:

    WordPress Header

    That still sucks, but this time I have all the information I want to be displayed on the header.

    Now it’s time to play with CSS. You have to edit the style.css file you will find in the same directory as header.php

    #header{	
    	margin: 0px auto;
    	margin-bottom:10px;
    	width: 985px;
    	color: #fff;
    	height: 175px;
    	background: url(images/header.png);
    }
    
    #header a{
    	color:#fff;
    	text-decoration:none;
    }
    
    #header h1 {
    	color: #fff;
    	border: none;
    	font: normal 24pt verdana;
    	padding-left:230px;
    	padding-top:50px
    
    }
    
    .description {
    	font:normal 12pt verdana;
    	color: #fff;
    	margin: 10px 250px 0;
    }
    
    #pagelist{
    	text-align:right;
    	padding-top:30px
    }
    
    #pagelist ul{
    	margin:0px;
    	padding:0px:
    }
    
    #pagelist li{
    	display: inline;
    	list-style-type: none;
    	padding-right: 20px;
    	position:relative;
    }
    
    #pagelist a:hover{
    	text-decoration:underline;
    }

    Lines 1-8: Styles applied to the div called “header”

    Lines 10-13: Styles applied to the links in the div called “header”

    Lines 15-22: Styles applied to the h1 heading inside the div called “header”

    Lines 24-28: Styles applied to the div called “description”

    Lines 30-33: Styles applied to the div called “pagelist”

    Lines 35-38: Styles applied to the unordered list inside “pagelist” div

    Lines 40-45: Styles applied to the list items inside “pagelist” div

    Lines 47-49: Styles applied to the links inside “pagelist” div when the mouse is over them

    And this is the result

    WordPress Header

    As you can see, with a couple of WP functions, an image and a few CSS lines you can redesign your header as you want.

    Now I hope that when you look at a nice blog header, you are able to make it one even better on your own.

    Now move part 2 for another customization.

  • Get the most popular Phaser 3 book

    Through 202 pages, 32 source code examples and an Android Studio project you will learn how to build cross platform HTML5 games and create a complete game along the way.

    Get the book

    214 GAME PROTOTYPES EXPLAINED WITH SOURCE CODE
    // 1+2=3
    // 100 rounds
    // 10000000
    // 2 Cars
    // 2048
    // A Blocky Christmas
    // A Jumping Block
    // A Life of Logic
    // Angry Birds
    // Angry Birds Space
    // Artillery
    // Astro-PANIC!
    // Avoider
    // Back to Square One
    // Ball Game
    // Ball vs Ball
    // Ball: Revamped
    // Balloon Invasion
    // BallPusher
    // Ballz
    // Bar Balance
    // Bejeweled
    // Biggification
    // Block it
    // Blockage
    // Bloons
    // Boids
    // Bombuzal
    // Boom Dots
    // Bouncing Ball
    // Bouncing Ball 2
    // Bouncy Light
    // BoxHead
    // Breakout
    // Bricks
    // Bubble Chaos
    // Bubbles 2
    // Card Game
    // Castle Ramble
    // Chronotron
    // Circle Chain
    // Circle Path
    // Circle Race
    // Circular endless runner
    // Cirplosion
    // CLOCKS - The Game
    // Color Hit
    // Color Jump
    // ColorFill
    // Columns
    // Concentration
    // Crossy Road
    // Crush the Castle
    // Cube Jump
    // CubesOut
    // Dash N Blast
    // Dashy Panda
    // Deflection
    // Diamond Digger Saga
    // Don't touch the spikes
    // Dots
    // Down The Mountain
    // Drag and Match
    // Draw Game
    // Drop Wizard
    // DROP'd
    // Dudeski
    // Dungeon Raid
    // Educational Game
    // Elasticity
    // Endless Runner
    // Erase Box
    // Eskiv
    // Farm Heroes Saga
    // Filler
    // Flappy Bird
    // Fling
    // Flipping Legend
    // Floaty Light
    // Fuse Ballz
    // GearTaker
    // Gem Sweeper
    // Globe
    // Goat Rider
    // Gold Miner
    // Grindstone
    // GuessNext
    // Helicopter
    // Hero Emblems
    // Hero Slide
    // Hexagonal Tiles
    // HookPod
    // Hop Hop Hop Underwater
    // Horizontal Endless Runner
    // Hundreds
    // Hungry Hero
    // Hurry it's Christmas
    // InkTd
    // Iromeku
    // Jet Set Willy
    // Jigsaw Game
    // Knife Hit
    // Knightfall
    // Legends of Runeterra
    // Lep's World
    // Line Rider
    // Lumines
    // Magick
    // MagOrMin
    // Mass Attack
    // Math Game
    // Maze
    // Meeblings
    // Memdot
    // Metro Siberia Underground
    // Mike Dangers
    // Mikey Hooks
    // Nano War
    // Nodes
    // o:anquan
    // One Button Game
    // One Tap RPG
    // Ononmin
    // Pacco
    // Perfect Square!
    // Perfectionism
    // Phyballs
    // Pixel Purge
    // PixelField
    // Planet Revenge
    // Plants Vs Zombies
    // Platform
    // Platform game
    // Plus+Plus
    // Pocket Snap
    // Poker
    // Pool
    // Pop the Lock
    // Pop to Save
    // Poux
    // Pudi
    // Pumpkin Story
    // Puppet Bird
    // Pyramids of Ra
    // qomp
    // Quick Switch
    // Racing
    // Radical
    // Rebuild Chile
    // Renju
    // Rise Above
    // Risky Road
    // Roguelike
    // Roly Poly
    // Run Around
    // Rush Hour
    // SameGame
    // SamePhysics
    // Save the Totem
    // Security
    // Serious Scramblers
    // Shrink it
    // Sling
    // Slingy
    // Snowflakes
    // Sokoban
    // Space Checkers
    // Space is Key
    // Spellfall
    // Spinny Gun
    // Splitter
    // Spring Ninja
    // Sproing
    // Stabilize!
    // Stack
    // Stick Hero
    // String Avoider
    // Stringy
    // Sudoku
    // Super Mario Bros
    // Surfingers
    // Survival Horror
    // Talesworth Adventure
    // Tetris
    // The Impossible Line
    // The Moops - Combos of Joy
    // The Next Arrow
    // Threes
    // Tic Tac Toe
    // Timberman
    // Tiny Wings
    // Tipsy Tower
    // Toony
    // Totem Destroyer
    // Tower Defense
    // Trick Shot
    // Tunnelball
    // Turn
    // Turnellio
    // TwinSpin
    // vvvvvv
    // Warp Shift
    // Way of an Idea
    // Whack a Creep
    // Wheel of Fortune
    // Where's my Water
    // Wish Upon a Star
    // Word Game
    // Wordle
    // Worms
    // Yanga
    // Yeah Bunny
    // Zhed
    // zNumbers