Welcome to another InMotion Hosting video tutorial! My name is Arnel Custodio and today we will discussing how to create footers on a WordPress site.
We will be using WordPress 5.9 and the default Twenty Twenty-Two theme for this tutorial.
By default, WordPress 5.9 provides only one location to create or edit footers in a WordPress site - the full site editor.
To become familiar with the interface of the new full site editor, we are going to review the interface and navigate through different parts of the site
This will allow you to see the structure and understand how you customize the site through the new editor.
We will then walk through creating and editing the footer.
We will start by logging into a WordPress site
To get to the editor, you can either click on the site name in the top left corner and click on Visit Site.
Or, you can click on Appearance in the main menu and select Editor.
If you entered by clicking on Visit Site
then in the menu at the top of the page click on Edit Site
If you entered through the Appearance menu, then you will already be in the full site editor
You will be looking front end of the site in the new full site editor interface.
At the top of the page, click on the list view icon. This is the first icon located to the left of the Home option.
This will allow you to see the current structure of the WordPress site you're editing.
Note that the footer options will vary based on the theme that you're using.
The theme demonstrated in this tutorial is the default Twenty Twenty-two theme.
If you scroll down the list view you will eventually find the footer section.
The WordPress theme uses block elements and the widget options can be added and edited using blocks
The footer is a group block and you can see the added options under the row section
In this tutorial, the demo site has a site title and paragraph in the footer section.
Either it can be removed or edited. If you click on the site title, the block will appear in the editor so that you edit its content
There is also the typical menu of options that is available through the 3 vertical dots to the right of the block
When you work with WordPress, the theme general dictates how your content will appear
Certain constants like a footer are formatted by the template selected for the post or page.
If you want to have a different footer for a particular page
Then you would need to edit an existing temple or a new template for the theme
Regardless of how you are creating a footer, the full site editor for the site will be used
and elements for the footer will consist of blocks from the visual editor.
Now we're going to edit the existing footer in this theme to create a custom footer.
Keep in mind that most themes will already have formatted templates for a footer.
We're going to start by opening the Full Screen Editor (FSE) then we're going find our existing footer.
We're going to remove the "Powered by WordPress"
And add some contact information in its place.
We will also add social media icons and remove the site title that is there now.
You can either scroll to the bottom and click on the footer area
Or, if you are working on a large site with many pages, use the list view option at the top of the page. Click on the footer block.
The "Powered by WordPress" label is a paragraph and we can use that same block for the contact information.
It's often best to use a contact form for security.
For this demo we're going to use an address and then add a fake link to a contact form
Next, we will remove the site title and add a graphic in its place.
Click on the site titled Block
Delete the block by clicking on its menu and selecting Remove Block.
Next, click on the newly added address block and click on Insert before.
You can select the image block and add an image.
Note that the image is too large at first and the caption needs to be removed
You can easily adjust the image to keep the columns created in the existing footer format.
The last thing we're going to do is add social media icons in the footer directly underneath the image
To add the block so that it's under the image, click on the address block and click, "Insert after"
You can then add the Social icons block. We'll add several social media icons for this tutorial.
We will now review the footer by looking at it with respect to the entire page that it's on.
You can see immediately that the spacing is not quite right.
We want the social media icons to be under the image.
Now this can be easily fixed by adding spaces to the address.
Once the spacing has been fixed, click on the SAVE button in the top right corner.
Congratulations! You've completed the steps to create a custom footer on your WordPress site!
We appreciate you watching, listening, and learning from our tutorials!
If you liked the video, please make sure to give us a thumbs below and subscribe to our channel! Thanks again for watching and have a GREAT day!