FSE - Creating Your Custom Header

DesignWordPressFull site editor

This chapter outlines how to create your header using the full site editor. You should have a design before your try to create your header. 

Identify the header and header components

If you designed multiple pages, you might have different headers. Do this activity for each of your headers. Note that most websites only have one header. 

Demystifying ID website header with the header highlighted and pointers to the site logo and site navigation.

Once you have identify the header and its components, you will want to create and collect anything you need to build the header. In this case, you need to:

Identify rows and columns

There are several ways to build your header using the Blocks editor. The simplest is to use the default blocks called row and stack. See the WordPress row and stack documentation for more details. 

Take your header and outline the rows and columns needed.

For Demystifying Instructional Design, I have two rows. The upper row has two columns, one containing the logo and the other containing the navigation menu. The second row has one column containing a thin line. 

Shows demystifying instructional design header with two rows, the first row having 2 columns and the second row having 1 column.

Collecting Information and Assets

One final step before, beginning implementation, is to identify any fonts that are needed, color schemes, in particular, knowing the hex value for any colors required, any graphics required, and the list of pages needed to create the navigation menu. For example:

Color Scheme

Dark Blue #2E3559; 
Medium Blue #6D8CB5;

Site Logo Demystifying Instructional design site logo
Navigation Font Barstow Condensed (Google Font)
Site Page list About Me, Podcast, Blog, OER, Contact Me

Setting up WordPress

In WordPress, I setup the site by:

The Google Font plugin that I installed allows me to use the customizer to select the correct Google font. I use the customizer to change the navigation font to be Barstow condensed, to align with my design. 

Now that I've done all of the preparation, I'm ready to begin using the full site editor to create a custom template part that will be my custom header.

Implementing the Heading Template Part in WordPress

Now that I have my elements and I understand the structure of my design, I can move onto creating a new Template Part that will be my custom header.

This content is provided to you freely by EdTech Books.

Access it online or download it at https://edtechbooks.org/professional_presence/fse_header.