Step-by-Step Guide to Customizing Your WordPress Header and Uploading a Logo
Your website header is generally the very first thing that people see when they land on your website! And because the header is found at the top of every page on your website, it is essential that it has a good layout, is easy to use, and creates a good first impression!
There are a few things that you need to include in your website header to make it memorable and on-brand. The first is your logo, business name, and/or business slogan.
You should also include your main navigation in your WordPress header so that visitors and clients can easily find their way around your website.
You can also add other elements to your website header to make it really stand out! Things like your social media links, a search option, and quick contact details can be added. And if you have an eCommerce store, you can also include additional information like a shopping cart icon, etc.
But, no matter how you decide to customize your header, just remember it needs to be easy to use allowing your visitors to find all the information they need quickly and easily.
In this tutorial, we will be building our WordPress header using the Blocksy theme which we installed in our last tutorial. If you’ve been following along, you should now have a Blocksy starter site installed on your website.
If you are using another WordPress theme, you can still follow along because many of the WordPress customization options are quite similar.
If however, you would like to use the Blocksy WP theme then I recommend going back and installing it using this tutorial.
Let’s Begin!
Open The WordPress Customizer
To customize your WordPress theme you need to use the WordPress theme customizer – you will find the customize menu option under “Appearance“.
Regardless of which WordPress theme you have installed, you will always find the WordPress theme customizer here.
Overview Of The WordPress Customizer
The WordPress customizer makes it really easy to customize your theme, with every aspect of the theme broken up into categories. It also lets you make changes to the look and feel of your website in real-time so that you can preview your changes before actually making them live.
For a full overview of how the WordPress customizer works, check out this post: The WordPress Customizer: A Quick Overview For Beginners
If you’ve been following along with these tutorials, you will know that we have been using the Blocksy WordPress theme. If you need help getting to this point then check out my step-by-step guide to installing the Blocksy WP theme.
When the WordPress customizer opens you will see your website preview on the right-hand side of the screen and the customizer dashboard on the left-hand side of the screen. There are two ways to make changes to your WordPress header:
- From the customizer preview pane
- From the WordPress header menu item
Customizer Preview Pane
The WordPress customizer preview pane is not only for previewing what your website will look like before saving any changes, but it also has an incredibly handy way of allowing you to pick elements of your website that you would like to edit without needing to navigate to the customizer menu.
Using the Blocksy theme with the Yogi starter site, you will see that you are able to customize the following elements directly from the preview pane:
- Logo
- Menu
- Search
- Account Icon
- Button
To access any of these items you simply need to hover your mouse over any of the items and a little icon will pop up which you can click to edit that particular element.
Blocksy Header Menu Item
The second way that you can edit the website header is through the Blocksy “Header” menu item on the left-hand side of the screen.
When you click on this menu you will also see that a new dashboard opens on the left-hand side of the screen with quite a few new options including:
- Account
- Button
- HTML
- Logo
- Menu1
- Menu2
- Search
- Socials
You will also see that a new section opens below the preview pane – this is the Blocksy Header Builder. This is where you will be designing the layout of your WordPress header.
The Blocksy Header Builder
The Blocksy theme header is made up of three rows and you can easily arrange the elements in your header section by simply dragging and dropping everything to create your perfect header.
You will notice that this new section is broken up into three rows:
- Top row
- Main row
- Bottom row
Below these rows, there are two tabs: Desktop Header and Tablet / Mobile Header. This is where you can choose whether you would like to edit either your website’s desktop or mobile headers.
How To Layout Your Website Header
It is really easy to rearrange and create a custom WordPress header for your website using this awesome feature.
Simply drag elements from the menu on the left-hand side of the screen into the Blocksy header builder and see the changes in the preview pane.
For example, if you would like to change the position of your logo, simply drag it to a new position on your header builder.
This simple process can be repeated with every other element for the WordPress header.
Don’t forget to click “Publish” when you are happy with your changes!
Delete A Header Element
If you would like to delete a header item, simply click the “x” on the element.
Add A Header Element
To add an element to the WordPress header, simply drag the element from the menu on the left-hand side of the screen to the header builder.
How To Add A Logo To Your WordPress Header
It is quick and easy to add a logo to your WordPress header. You can select the edit icon that appears when you move your mouse over the logo in the header, or you can click the “Logo” element in the Blocksy header editor.
The logo options dashboard will open where you can:
- Upload a logo
- Specify the logo height
- Align the logo
- Hide or display the website title
- Hide or display the website tagline
There are a couple of other options in the logo dashboard which allow you to edit some more advanced features but we won’t cover those in this tutorial.
How To Upload A Logo
1. Move your mouse over the “Logo” box.
2. Two options will pop up allowing you to either edit or delete the current logo.
3. Click “Edit”.
4. Your media library will open and you will be able to upload your logo to your WordPress website. If you aren’t sure how to use the media library check out our previous article: How To Use The WordPress Media Library: 5-Minute Tutorial
Congratulations, you now have your logo uploaded to your WordPress website!
Editing Other Header Elements
Go ahead and play with the design and layout of your header.
Pro Tip! If you ever get lost and can’t figure out where you are in the customizer, simply click the back arrow at the top of the menu to take you back to the main menu.
Just like the logo, you can edit any of the other header elements by clicking on either the edit icon on the header or on the elements themselves in the header builder.
For example, if you want to edit how the menu behaves, simply click on the menu element and you will see that the menu dashboard will open.
From this dashboard, you can choose how the menu will change when someone moves their mouse over it. You can also change other options such as the spacing between the menu items, the fonts and colors used plus a whole lot of other options (I wouldn’t suggest editing your fonts or color options here, we will cover how to edit your fonts globally in another tutorial).
Every element on your website will be able to be edited in this way. Simply click on it and all its options will open for you in the dashboard!
Add A WordPress Sticky Header
The Blocksy theme comes with a cool feature that allows you to easily make your header sticky (if you are using another WordPress theme, you may also have this option under the “Header” menu item).
What Is A Sticky Header?
A sticky header is a handy feature that forces the header of a webpage to remain visible at the top of the screen even when the website visitor scrolls down the page. It is also sometimes called a “fixed header” or a “persistent header”.
Of course, using a sticky header is completely a personal preference.
If you feel that it is important for your clients and website visitors to have permanent access to your menus and other important header elements then a sticky header is for you! Sticky headers are also pretty helpful if you have a website with a lot of content giving your website visitors easy access to your menus without needing to scroll all the way back to the top of the page.
How To Add Or Remove A Sticky Header
In your customizer window, click the “Header” menu item. When the customizer opens, you will see a tab to the right of the Header dashboard called “Headers“. Select this option.
When the dashboard opens, select “Global Header“.
When the Global Header dashboard opens you will be able to select whether you would like your header to be sticky or not.
If you choose to enable the sticky header functionality, you will have a couple of other items available to you to help you customize how you would like the sticky header displayed. Go ahead and play with these options until you are happy with the result. Remember to click “Publish” when you are done!
Conclusion
Your WordPress header can be easily edited using the customizer and the Blocksy header builder. Most themes will give you editing options for your header however, by using the Blocksy theme you get a cool drag-and-drop feature that allows you to fully customize the layout of your header quickly and easily.
If you have been following along with the tutorials, I would love to hear how you are doing with your website so far – let me know in the comments section below! Also, let me know if you have any questions!
