WordPress Tutorials Index | Web Page Design Tutorials Home

Modify WordPress Footer Section

The WordPress footer is also a section that many blogger like to customize. The web design of footer is usually very simple. The following is the source code of WordPress footer section:

Customize WordPress Footer Section

The contents of footer are wrapped by two div layers:

  • an outer #footer div layer, and
  • an inner #colophon div layer.

Open the stylesheet and study how the styles of footer are setting:

WordPress Footer styles

Everything is clear now. Now, let’s see how the WordPress footer can be customized with the stylesheet.

Modifying Height and Partition Line of WordPress Footer

The height and partition line of WordPress footer can easily be modified with the #colophon selector as shown below:

Customize WordPress Footer Section

Let’s customize the color of partition line to blue and increase the height by 10 pixels.

#colophon {
    border-top: 4px solid #0000CC;
    margin-top: -4px;
    overflow: hidden;
    padding: 28px 0;
}

The result is:

Customize WordPress Footer Section

The WordPress footer should be easy to customize after studying the file structure.