WordPress is a flexible source code with an intuitive interface. You can customize Header Footer and Background easily.
Using the website previously required users to equip themselves with complex programming knowledge and skills to design, repair or change established components. However, the arrival of WordPress has completely removed those limitations and naturally, it has become the most popular source code today.
For Customize Header and Footer on WordPress, first you need to log in to the website’s admin account. Specifically, we will take the Newspaper theme as an example in this case because this is a theme with a relatively complex custom Panel, but in return, Newspaper is very popular thanks to its beautiful, impressive interface, many integrations. support feature.
One of the biggest advantages mentioned is: users can Customize WordPress Header, Footer or Background easily and simply follow the instructions below.
However, the above advantage is also the disadvantage because if you enable (start) all the features – even if not used, the website will become heavy, taking a long time to wait for users to load.
Table of Contents
How to Customize Header in WordPress
Starting from the Header, after logging into the admin account, the command will take you to the Theme Panel. This is the area where the interface configuration features are available. Each theme will support different respective functions, but high priced themes often bring more features.
How to Customize WordPress Header Style
First, select the Header item to change the Header Style (interface style for the website header). Theme Newspaper will provide 12 different styles for you, after changing, press SAVE SETTINGS and refresh (F5) the website to experience the results.
How to Customize WordPress Top Bar
Top bar is also a part that can be changed by the user when Customize Header. You can understand this area is where the categories are, similar to the menu bar. The position of the Top bar will be at the top of the menu and is often used when the website has too many categories.
Therefore, unlike the menu, themes that support Top bar always come with a button to enable/disable. If not used, disable this feature to reduce page load time.
How to Customize the WordPress Main Menu Item
Main Menu is the menu configuration area, websites using WordPress source code can be designed quite complex. At this point, it is not unusual to use multiple menus in the same website. Theme Newspaper is a good example, below is the caption for the features in the Main Menu.
Select the main display menu in the website.
When selected, the submenu will drop down from the main menu bar. This style is not really popular so you should choose “No Preloading” to turn off the function.
Customize Header in Sticky Menu allows the menu bar to move according to the scroll bar when the user drags and drops. You can choose “Always Sticky => SAVE”, refresh the website and drag the slider to see the effect.
Select the logo on the Sticky Menu. Please choose “Mobile logo” to shorten the logo, a smaller version than the main logo has a large size.
Logo & Favicon
Logo upload and Retina Logo upload: Upload logo for website, pay attention to use .png image format.
Favicon: A small image that will be displayed on the left side of the browser tab. The recommended image format is .png, size 20×20 pixels.
Enter a description for the logo, these lines are not displayed on the website, so they are often used to support SEO.
Enter a name for the logo, the logo name will appear when visitors visit the website from a web browser.
- Text logo and Text Logo Tagline
Can be understood as descriptive information for the logo, some menu types can put this information on the web. Please pay attention to complete and correct for both items.
Logo for Mobile
- Logo Mobile & Retina Mobile Logo: Logo for mobile version.
- iOS Bookmarklet: Logo or any image will appear in Bookmark of Safari browser on IOS.
Manipulation Customize Footer also has many similarities with the process of changing the Header above. However, because Footer is often used to add information to the website, located at the bottom of the page, so you need to determine to divide the layout so that it is reasonable.
Footer Settings
At the Theme Panel, select Footer, the Footer Setting area is where the layout settings, contact information, social network addresses, copyright ownership …
How to Customize the WordPress Footer Template
Theme Newspaper will support you with some interface templates for Footer. This way you can split columns, edit the content in each column… while Customize Footer. However, not many WordPress themes have this function, usually you have to incorporate editing in the Widget area.
Connect directly to your Instagram account and display featured images in Footer. This feature is not common, and uploading multiple images can take a long time.
How to Customize Footer Info Content WordPress
Users can also Customize Footer In the Footer Info Content section:
- Footer Logo & Footer Retina Logo: Allows to upload logo in the first column of Footer.
- Logo ALT Attribute & Logo Title Attribute: Similar to the information for the logo in the Header. Here, enter all required fields completely and correctly.
- Footer text: The content below the logo in the first column of the Footer.
- Your email: Enter the email address to display in the Footer or you can fill it in the Footer text as shown in the image.
- Show Social Icon: Use social network icons by inserting links.
How to Customize Footer Background WordPress
You can Customize Background Footer in the following sections:
- Footer background: Choose a background image for Footer, should limit the use of images to reduce website size.
- Repeat, Size, Position and Background Opacity: Customize the size, effect for the Footer background image. If you don’t use images, you don’t need to configure these sections.
Sub Footer Settings
In the Sub Footer Setting area, you can also Customize Footer:
- Show Sub-footer: Add more information to the website below the Footer.
- Footer Copyright Text: Information about copyright eg: abc.com 2008 – 2009.
- Copyright symbol: Show more copyright symbol.
- Footer Menu: Add any menu below the Footer.
In WordPress, in addition to themes that support many features, there are still some themes that lack basic features, such as not supporting Widgets for Header. However, with just a few simple steps you can create a Widget yourself.
Why create Widget Header for WordPress website?
Creating a Header widget is very useful, especially when you want to insert prominent banner ads on your website or important announcements to send to visitors. The biggest reason is because this location is very attractive, users will “notice” them first as soon as the website is uploaded. So consider creating a Header Widget for your website right away.
See also: Instructions for editing WordPress Menus
Instructions on how to create a Widget for WordPress Header
Step 1: Create a widget area
Add the below code to the file functions.php of the theme at Appearance => Editor.
|
function wpb_widgets_init() { register_sidebar( array( ‘name’ => ‘Custom Header Widget Area’, ‘id’ => ‘custom-header-widget’, ‘before_widget’ => ‘ ‘, ‘after_widget’ => ‘ ‘, ‘before_title’ => ‘ ‘, ‘after_title’ => ”, ) ); } add_action( ‘widgets_init’, ‘wpb_widgets_init’ ); |
<
div class=”wp-block-image size-full wp-image-26247″>
Save and search to “Appearance => Widget”you will get a new Widget named “Custom Header Widget Area” as shown in the image – the process of creating Widget Header has been successful. The usage is similar to other Widgets, you can drag and drop widgets such as calendars, ads, etc.
Step 2: Put the newly created widget on the website
At this point, even though you can configure the Widget for the Header, you still cannot see it appear on the website. Call the widget using the command line below, copy and paste it into the header.php file at “Appearance => Editor”. Note, where you want the widget to appear, insert the code at that position.
|
if ( is_active_sidebar( ‘custom-header-widget’ ) ) : ?> |
Refresh (F5) the website again to check the newly created widget. If the Widget appears successful, otherwise, try another location in the header.php file. For banners, you need to insert an image link into the widget or choose another object such as a calendar to check.
Step 3: Add CSS for the widget
In the above example, we have a banner ad but the display image is not optimized. You can add CSS to help with alignment and neater placement. Copy and paste the code below into the style.css file under “Appearance => Customize => Additional CSS”.
After that, save and refresh the website again to check.
How to Create and Customize WordPress Background
What is WordPress background?
WordPress Background is the background image for the website, this image will be below the objects in the web page.
So the background is large and usually only the corners and edges can be seen. In WordPress, you absolutely can Customize Background at will.
How to set up and customize the WordPress Background>
Step 1: Access the WordPress background settings area at “Appearance => Background”.
Step 2: Continue to click “Select Image”, choose an image from your gallery or upload from your computer.
Step 3: After the setup is complete, refresh the website and you will see the background image appear below.
It can be said that WordPress is one of the most capable source codes Customize Header, Footer and Background website easily today. If the site is built on the foundation WordPress Hostingwe hope that the article has brought you useful information.
