This How-To shows you some of the interesting things you can do with the WP Site Logo setting to create an attractive site header.

The Site Logo was added as a WordPress core feature beginning with Version 4.5. How the Site Logo is used is up to each individual theme, and Weaver Xtreme provides three basic options for using the Site Logo.

In general, the Site Logo will represent your logo, or other distinctive design intended to be displayed in the header. While there is no limit on the image size, it should generally be sized to display at full resolution on a desktop display. Logos are typically designed with a transparent background so that they can be overlayed on the site header.

Three Locations to Display the Site Logo

1. As a replacement for the Site Title. This may be the most common way a logo is used. The normal Weaver Xtreme options for location of the title, as well as the height of the logo can be used to get the logo to display exactly where you wish.
2. Displayed on the left end of the Primary Menu bar. This sort of display is somewhat popular on current web sites.
3. In the upper left of the Header Area. Using this location is the default location, but the visibility for this location is hidden by default. You will typically need to unhide the logo when used in this location, and add custom CSS to have it display exactly as you wish. It is usually easier to simply use the Site Logo to replace the Site Title.

How To Set and Display the Site Logo

• Subtheme used for examples: Go Basic
• Important settings: Move Title/Tagline over Header Image (The Site Logo can also be used without moving the Title/Tagling over the Header Image – but this How-To uses the former option.)

Step 1: Specify the Site Logo from the Site Identity menu

• The only way to add a Site Logo is using the Customize -> General Options & Admin -> Site Identity menu. (This is just Site Identity if you have the Weaver Xtreme Customizer interface off.) Select an appropriate Logo from the Media Library using the option.
• Note that this same option menu is used to set the Site Title and Site Tagline.
• The logo will be displayed in the preview at the top right of the header area. After you save the option, however, the logo will not be displayed on the final site until you unhide it on the Customize -> Images -> Header Area menu. This is a quirk of the Customizer Interface and the fact that the Site Logo is a WordPress feature and not just a theme feature.
• When used with Weaver Xtreme’s Replace Title with Site Logo and/or Add Site Logo to Left (primary menu bar), you don’t need to hide or unhide the logo.

Step 2: Replace the standard Site Title with the Site Logo

Perhaps the must useful way to use the Site Logo is to replace the standard Site Title in the Header. Please note that you should still set the Site Title value as it is critical for SEO whether or not it is actually displayed on your site’s header.

• From the Customize -> Images -> Header Area menu, check the “Replace Title with Site Logo” option. Note that this is the same place to hide the Site Logo when it is used in the default top-left location. The Hide setting is ignored when you check the the “Replace Title” option.

• From the same menu, you can specify the height to control how big the Site Logo is. It it possible to design a Site Logo to fully occupy the entire header width.

 

• The existing options for Site Title visibility (Visibility) and location (Spacing, Widths, Alignment) will apply to the Site Logo replacement, so you can control placement of the Site Logo.

 

Step 3: Add the logo to the Primary Menu

You can display the Site Logo on the left end of the Primary Menu. This option is independent of the “Replace Site Title” option – you may either or both together.

• Add the Site Logo to the left end of the Primary Menu using the “Add Site Logo to Left” option on the Customize -> Added Content -> Menus menu. (This is the same option menu location you use to add custom HTML to the left and right ends of the menus.) By default, the Site Logo will be sized to fit the Primary Menu’s height.

• You can adjust the height of both the Primary Menu and the Site Logo from the Customize -> Spacing, Widths, Alignment -> Menus menu. You can generate a taller Primary Menu, as well as adjusting the height of the Site Logo.

Legacy Interface

All the the options used here from the Customize menus have equivalents on the Legacy interface. They are usually found on the tab with the same name as the final menu listed for the Customize interface.