How Do I Add A Header To My Wordpress Blog

We rebuilt Aino 2.0+ to be a full block theme. This means that the theme's Header and Footer are now built out of blocks. Block-based Headers and Footers have many advantages.

First, you can now choose from a set of predesigned Headers and Footers provided. At the moment the choices are still limited but we will add more Header and Footer designs in the next Aino updates.

The second advantage is that you can customize your Header and Footer in many ways that were not possible before.

And third, you can save your Header and Footer customizations and use them on different pages of your website. Your custom saved Header and Footer templates will even be available to you if you switch to another theme. This is a huge change from the way Headers and Footers were previously included in a theme and customized with Customizer theme settings.

The way we can now choose from multiple Header and Footers, customize them via the block editor and save our custom Header and Footer templates brings new design freedom and flexibility to WordPress users.

The New Site Editor Mode

After you have installed and activated the Gutenberg and Aino Blocks plugins and updated the Aino theme to the latest version you will see the new Site Editor (Beta) tab in the WordPress menu.

Clicking on it will bring you to the Site Editor mode. Here you see the Index page (which shows your latest blog posts) and your theme's default Header and Footer.

Customize your block-based Header

Aino's default Header shows the Site title on the left, the Navigation centred and Social icons on the right. When you click in the Header area you see the Toolbar with the option to replace the default Header.

Currently, Aino comes with a dark Header and a Site logo only Header option. We will add further Headers in the next theme releases. You can choose to customize the Header directly on the Index page or open the Site Editor's menu via the Toggle Navigation button on the top left corner of your screen.

Let's stay on the Index page for now. The new Header is built entirely out of blocks. The outside block is a Group block, following by an inner Group block, a Site Title, Navigation and Social Icons block.

The Navigation Block

The most important part of the Header is the navigation. If you have previously saved menus from the classic menu screen you can choose one of them to be your menus in the Navigation block. Click on Add existing menu and choose one of your menus from the list.

You can also choose to add all pages to the Navigation block or build a new menu from scratch. When you want to create a new Menu you will see the Plus-Button and the Block Inserter will open once clicking on it. You can choose from several Link blocks, e.g., the Page Link, Post Link, Custom Link, Home Link or Category Link.

Insert Pages to the Navigation block via the Page link block.

Now you can click Save and your Header will be saved as a custom Template Part (under Appearance/Template Parts). From now on it will be used as your new default Header.

Social Icons Block

By default, Aino adds sample Social links to the Header. You can add your own or delete the sample once. Make sure to add links to your social profiles in the block settings. You can search for new Social Link blocks by typing the Social site into the search bar.

You can also choose to delete the Social Icons. In this case, your Navigation will be right-aligned in your Header.

Site Title or Site Logo Block

You can customize your Site Title via the Block Settings. Here you can change the font family, font-weight or size of your Site Title. You can also change colors.

If your website has a logo you can add it instead of the Site Title block. You can delete the Site Title block and add a new Site Logo block. We recommend limiting the logo size to 48 pixels in the Site Logo Block Settings. To ensure the logo is sharp on all screens prepare your logo image at least twice the actual size, so at least 96 pixels. A transparent PNG works best.

Now you customized the default Header of the Aino theme. You can exit the Site Editor by clicking on the Toggle Navigation link on the top left corner of the editor. The Site Editor navigation opens and you can click on Back then on Dashboard to get back to the classic WordPress admin.

Further Customizations via Template Parts

If you want to make further customizations to your Header from now on, you can click on Appearance/Template Parts. Here you find all your custom Headers and Footers. The cool part is that they will even stay saved if you switch to a different theme. This could become a cool feature later on.

Your Questions

I know there are a lot of new features to explore in WordPress right now. I hope my tutorials are helpful to you. Please let me know if you have any questions or recommendations for further tutorials like this one. I love to hear from you.