EDITS.WS

Tag: wordpress footer

  • Checklist: 10 Things To Add To The Footer on Your WordPress Site

    Are you wondering what to add to the footer of your WordPress site?

    The footer is the area at the bottom of your website. Although it’s easy to overlook, the footer can improve the user experience on your site in lots of significant ways.

    In this checklist, we will share the top things that you should add to the footer of your WordPress website.

    Checklist: Things To Add To Your Footer on WordPress Site

    What is the Footer in WordPress?

    The footer is the area that appears below the content part of your website. It is a common website design feature used by millions of websites.

    ‘Footer’ can also refer to the footer code area. Third-party services like Google Analytics, Facebook Pixel, and many others may ask you to add code snippets to your website’s footer.

    This sort of footer code doesn’t appear to visitors but it allows you to add features, services, and other content to your WordPress website.

    With so many options, beginners may struggle to decide what to add to the footer area. As a result, many website owners miss out on opportunities to improve their sites and provide a better visitor experience.

    That being said, let’s take a look at some of the things to add to the footer of your WordPress site, and how to make it more useful.

    Here are all the things we’ll add, so feel free to jump straight to the items that interest you.

    Many websites add links to the footer area. This helps visitors find your site’s most important content such as the about page, products page, checkout, contact form, and more.

    All popular WordPress themes come with a footer widget area where you can add different content and elements.

    To add links to the footer area, go to the Appearance » Menus page and click on the ‘create a new menu’ link.

    Adding navigation links to the WordPress footer

    After that, type in a name for the menu. This is just for your reference so you can use anything you want.

    With that done, click on the ‘Create Menu’ button.

    How to create a navigation menu for the WordPress footer

    Now, check the box next to each item that you want to add to the menu.

    Then, click on ‘Add to Menu.’

    Adding a menu to the WordPress footer area

    When you’re happy with how the menu is set up, click on the ‘Save Menu’ button to store your changes. For more help, see our guide on how to create navigation menus in WordPress.

    Now you’ve created a menu, let’s add it to the footer area of your website by going to Appearance » Widgets. Here, click on the blue ‘+’ button.

    Adding widgets to a theme's footer

    In the ‘Search’ field, type in ‘Navigation Menu.’

    When the right block appears, drag and drop it onto the ‘Footer’ or similar area.

    The WordPress navigation menu widget

    After that, open the Select Menu’ dropdown and choose the footer menu you created earlier.

    You may also want to type in a title, which will appear above the links in your website’s footer.

    The Navigation Menu widget

    With that done, click on the ‘Update’ button.

    Now, if you visit your website you’ll see all the links in the footer area.

    Navigation links in the WordPress footer

    You can also add links to the footer using a drag-and-drop page builder plugin like SeedProd. You can even create different footers for individual WordPress pages.

    For step-by-step instructions, check out our guide on how to edit the footer in WordPress.

    Adding a Menu to Your Footer with the Full-Site Editor

    If you’re using a block-based theme such as ThemeIsle Hestia Pro or Twenty Twenty-Three, then the process of adding a menu to the footer is slightly different.

    Simply create a navigation menu following the same process described above. Then, go to Themes » Editor in the WordPress dashboard to open the full-site editor.

    How to open the full-site editor (FSE)

    Here, click on the downwards-pointing arrow in the toolbar and select the ‘Footer’ template.

    In the footer area, go ahead and click on the ‘+’ button to add a new block.

    Adding blocks to the footer area using the full-site editor (FSE)

    In the ‘Search’ bar, type in ‘Navigation.’

    When the right block appears, click to add it to the footer area.

    Adding a navigation menu to the WordPress footer using a block-enabled theme

    The full-site editor will show one of your navigation menus by default.

    If you want to show a different menu instead, then open the ‘Select menu’ dropdown in the right-hand panel and choose the menu you want to use.

    Showing different menus in the block-enabled WordPress footer

    When you’re happy with how the menu looks, click on ‘Save’ to make your changes live.

    2. Adding Code in WordPress Footer

    Sometimes you may need to add snippets to your WordPress blog or website’s footer.

    You could edit your theme files directly and paste the new code in the footer.php template. However, this isn’t recommended as the custom code will disappear if you change the WordPress theme, or update that theme.

    Editing your theme files directly can also be risky. Even a simple typo or mistake could cause lots of common WordPress errors.

    The best way to add code in the WordPress footer is by using a code snippets plugin. WPCode is the best code snippets plugin for WordPress. It makes it easy to insert code into your WordPress site’s headers and footers without needing to edit your theme files.

    First, you need to install and activate the WPCode plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

    Upon activation, go to Code Snippets » Header & Footer. From here you can paste your code snippet into the ‘Footer’ box.

    Adding code snippets to the WordPress footer

    Don’t forget to click on the ‘Save Changes’ button to store your changes. For more detailed instructions, please see our article on how to add header and footer code in WordPress.

    To comply with GDPR and other privacy-related laws in different countries, you need to add a privacy policy page in WordPress and then link to it from all the other pages.

    Since the footer appears across your entire website, it’s the perfect place to add this URL.

    First, you need to go to Settings » Privacy in the admin area. You’ll notice that WordPress has already created a Privacy Policy page draft for you.

    Adding a privacy policy to your WordPress website

    To use the default Privacy Policy page, simply click on ‘Use This Page.’ If you want to use a different page instead, then open the dropdown menu and choose a new page from the list.

    You can also create a new privacy policy page from this screen. Simply click on the ‘Create’ button and WordPress will generate a new post with some basic privacy policy text.

    An example of a website's privacy policy

    No matter how you create the privacy policy page, you can edit it just like any other page in WordPress. For example, you can add more information about your requirements, and terms and conditions.

    When you’re happy with the information you’ve entered, click on the ‘Publish’ button to make the privacy policy live.

    With that done, you’ll need to add a link to your website’s footer. To add a navigation menu to the footer area, simply follow the same process described above.

    4. Adding Copyright Date in WordPress Footer

    You may also want to add a copyright date in the WordPress footer area to let visitors know that your content is copyrighted. One way to do this is by simply adding the text to your theme settings.

    Many top WordPress themes allow you to add text in the footer area, so it’s worth checking whether your theme has this setting.

    Simply go to the Appearance » Customize page and look for any footer settings in the left-hand menu. These are usually labeled ‘Footer Options,’ ‘Footer Settings’ or similar.

    Changing the footer settings in the WordPress Customizer

    To add the copyright symbol, simply paste the following into the ‘Footer Credits,’ ‘Copyright Text’ or similar section.

    © Copyright 2016-2023. All rights reserved.

    The WordPress Theme Customizer will update automatically so you can see how the copyright text will look on your website.

    Adding a copyright notice to the WordPress footer

    Depending on your theme, you may also be able to change the font size and text alignment using the theme settings.

    If you’re happy with how the copyright notice looks, then click on the ‘Publish’ button to make your changes live.

    Pro Tip: With this approach, you’ll still need to update the copyright notice every year. To add the new year automatically, see our guide on how to add a dynamic copyright date in the WordPress footer.

    Adding a Copyright Date to Your Footer with the Full-Site Editor

    If you’re using a block-enabled theme, then it’s easy to add a copyright date to the footer. Simply go to Themes » Editor to open the full-site editor.

    Then, scroll to the footer section and click on the ‘+’ to add a new block. You can now start typing in ‘Shortcode’ and select the right block when it appears.

    Adding a shortcode to the full-site editor

    In the shortcode block, add the following:

    © Copyright 2016-2023. All rights reserved.

    Adding a copyright notice to a block-enabled footer

    After that, simply click on the ‘Save’ button to make the copyright notice live.

    5. Remove Powered by Links from Footer in WordPress

    Some free WordPress themes add links to the footer area. Typically this is a ‘Powered by WordPress’ disclaimer that links to the official WordPress website, but some theme developers also include links to their own websites.

    These outgoing links encourage visitors to leave your website and can have a negative effect on your WordPress SEO. With that in mind, it’s a good idea to remove them from the footer area by going to Appearance » Customize.

    Some themes make it difficult to remove these links so you may have to spend time looking through the different settings.

    To start, we recommend looking for any settings labeled ‘Footer Options,’ ‘Footer & Copyright Options,’ or similar.

    How to remove 'Powered by WordPress' from the footer

    Here, you should be able to delete the links or even replace them with your own URLs.

    Some themes hard-code the links in the theme files and don’t give you the option to remove them using the WordPress Customizer.

    In that case, you can remove these links by editing the footer.php file. For step-by-step instructions, please see our guide on how to remove the powered by WordPress footer links.

    Removing Powered By Links with the Full-Site Editor

    To remove the ‘Powered By’ links in a block-enabled theme, simply open the full-site editor by following the same process described above.

    In the editor, find the ‘Proudly powered by WordPress’ or similar text. You can replace this with your own text by typing into the ‘Paragraph’ block.

    Changing the 'Powered by' links using the WordPress full-site editor (FSE)

    If you want to remove the text completely, then simply click to select the ‘Paragraph’ block. After that, click on the three-dotted ‘options’ button.

    Finally, click on ‘Remove Paragraph’ to delete the block.

    Deleting the Powered By WordPress links using the full-site editor

    You can then go ahead and click on ‘Save.’ Now, if you visit your website you’ll see that this text has been removed.

    6. How to Add Instagram Feed in WordPress Footer

    Do you regularly post beautiful photos and videos to Instagram?

    People won’t see your Instagram content if they just visit your website. With that in mind, you may want to show recent Instagram photos in your website’s footer.

    How to show Instagram photos in the WordPress footer

    This is an easy way to promote your social media page and encourage more people to follow you on Instagram.

    The easiest way to add a photo feed in the WordPress footer is by using Smash Balloon Instagram Feed. It is the best Instagram plugin for WordPress and allows you to easily add a photo feed to your website.

    After adding the social media feed to your footer, Smash Balloon will fetch new Instagram photos automatically. In this way, your footer will always show your latest Instagram photos to the people who visit your website.

    If you run an online store, then you can even get more sales by adding Instagram shoppable images to the WordPress footer.

    Smash Balloon has all the tools you need to fine-tune how the Instagram feed looks in your footer. For example, you can choose between different layouts, add a ‘Follow’ button, optimize your feed for mobile devices, and more with the user-friendly Smash Balloon editor.

    The Smash Balloon instagram editor

    For step-by-step instructions, please see our guide on how to how to easily embed Instagram in WordPress.

    When you’re happy with how the feed looks, it’s time to add it to your website’s footer. Simply go to Appearance » Widgets and click on the blue ‘+’ button.

    Showing Instagram photos in the WordPress footer

    In the search field, type in ‘Instagram Feed’ to find the right block. Just be aware that WordPress has a built-in Instagram Feed button, so make sure you use the block that has the official Instagram logo.

    You can now drag and drop the block onto your site’s footer.

    The WordPress Instagram embed block

    With that done, simply click on ‘Update.’ After that, you can visit your website to see your Instagram feed in the footer.

    Adding an Instagram Feed with the Full-Site Editor

    It’s easy to add the Smash Balloon Instagram feed to a block-enabled WordPress theme.

    Simply open the full-site editor following the exact same process described above, and then click on the ‘+’ button in the footer template.

    Adding an Instagram feed to a block-based website footer

    With that done, type in ‘Instagram Feed’ and select the right block when it appears to add it to the footer.

    The full-site editor will automatically show the Instagram feed you created.

    Adding a social media feed to a website footer

    With that done, simply click on ‘Save’ to make the Instagram feed live.

    7. Add a Sticky Footer Bar in WordPress

    Want to show special offers or notifications in the footer area?

    You can create a footer bar that stays stuck to the bottom of the screen as the visitor scrolls.

    To create this kind of sticky footer bar, you’ll need OptinMonster. It is the best conversion optimization software in the market and allows you to turn website visitors with a high bounce rate into users and customers.

    OptinMonster also comes with powerful display rules so you can show personalized custom messages in your website’s footer.

    First, you’ll need to sign up for an OptinMonster account.

    After that, install and activate the OptinMonster plugin on your WordPress website. Upon activation, select Connect Your Existing Account.

    Connecting an OptinMonster account to WordPress

    You can now type in the email address and password for your OptinMonster account.

    Once connected, go to the OptinMonster » Campaigns page and click on the ‘Create your first campaign’ or ‘Add New’ button.

    Creating a new OptinMonster conversion campaign

    On the next screen, choose ‘Floating Bar’ as your campaign type and then select a template.

    To preview an OptinMonster template, simply hover your mouse over it and then click on the ‘Preview’ button.

    Adding a sticky floating bar to the WordPress footer

    When you find a template you like, click on its ‘Use Template’ button.

    You can then type in a name for the campaign. This is just for your reference so you can use any title you want.

    Adding a title to an OptinMonster conversion campaign

    With that done, click on Start Building.

    This will take you to OptinMonster’s drag-and-drop campaign builder where you can design the footer bar. Simply click on any element you want to edit, or drag and drop new blocks from the left-hand column.

    Creating a sticky footer bar for WordPress

    When you’re happy with how the campaign looks, simply click on the ‘Publish’ button.

    Then, select ‘Publish’ to make the campaign live.

    Publishing a conversion and optimization campaign for WordPress

    You can now select the ‘Save’ button to store your changes and then click on the ‘X’ in the upper-right corner to close the OptinMonster campaign builder.

    Back in the WordPress dashboard, open the ‘Status’ dropdown and select ‘Published.’

    Publishing a sticky floating bar for WordPress

    Finally, click on ‘Save.

    Now, visit your WordPress website to see the floating footer bar in action.

    An example of a sticky floating footer bar in WordPress

    You can use OptinMonster to create all kinds of high-converting campaigns including slide-in footer popups, countdown timers, and targeted footer notifications that can help you recover abandoned cart sales.

    8. Add Social Buttons in WordPress Footer

    Another good way to use the footer space in your WordPress theme is by displaying social media icons. This is an easy way to promote your different profiles and get more followers on Twitter, Facebook, and other popular platforms.

    The best way to add these buttons is by using the Social Icons Widget plugin. This plugin supports all the major social networks and comes with multiple icon styles that you can choose from.

    After activating Social Icons Widget, go to the Appearance » Widgets page. You can then click on the ‘+’ button and search for ‘Social Icons Block.’

    When the right block appears, drag and drop it onto the footer area.

    How to add social icons to the WordPress footer

    By default, the Social Icons Block already has a few social media icons built-in.

    To link any of these icons to your own social profiles, simply give it a click. In the little bar that appears, type in the URL of the page you want to promote.

    Creating social media links for the WordPress footer

    Want to use a different icon for this social media platform?

    Then simply click on the ‘Edit Details’ link. This opens a window where you can choose a new image for the social icon.

    Choosing an icon for your social media buttons

    Simply repeat this process for each built-in social media icon.

    If you want to remove one of these default icons, then click on the ‘Delete icon.’

    Deleting social media icons using a free WordPress plugin

    There are countless social media platforms and other websites that you may want to add to the footer area.

    To do this, click on the ‘+’ button.

    Adding Twitter, YouTube, Facebook, and more social icons to WordPress

    You can now choose a social media icon and add a link by following the same process described above.

    When you’re happy with how the social media icons are set up, click on ‘Update.’ Now, simply visit your website and scroll to the footer area to see the social buttons in action.

    An example of social icons in the WordPress footer

    Bonus: Want to add more social features to your website? Take a look at our expert pick of the best social media plugins for WordPress to grow your audience.

    Adding Social Buttons with the Full-Site Editor

    Are you using a block-enabled theme? Then you can add social icons to the footer by going to Themes » Editor.

    In the footer, click on the ‘+’ button and then type in ‘Social Icons block.’

    Adding social icons to the block-based footer area

    When the right block appears, click to add it to the footer.

    This adds a block with the default social icons.

    Adding social media icons to a WordPress blog or website

    You can now customize these icons and add new social buttons, by following the same process described above.

    When you’re happy with how the buttons look, simply click on the ‘Save’ button. Now if you visit your website you’ll see the social icons in the block-enabled footer.

    9. Add a Phone Number in WordPress Footer

    If you offer customer support over the phone, then adding your phone number in the WordPress footer area can help users contact you.

    For this, you’ll need a business phone number. We recommend using Nextiva, which is the best business phone service for small businesses.

    Nextiva allows you to make cheaper calls and use advanced features like call forwarding, unlimited free domestic calling, voicemail to email and text, and more. You can also use the same number on multiple devices and handsets, and manage calls from any device that has an internet connection.

    Once you have a business phone number, you’ll need to add it to your website. The easiest way is by using the WP Call Button plugin, which adds a click-to-call button to your WordPress site.

    An example of a click-to-call button on a WordPress website

    After activating the plugin, go to Settings » WP Call Button in the WordPress dashboard.

    Here, click on the ‘Call Now Button Status’ switch so it shows ‘Active.’

    Adding a click-to-call button to a WordPress blog or website

    Next, type your business phone number into the ‘Phone Number’ field.

    By default, the button shows ‘Call Us’ text but you can replace this with your own custom messaging by typing into the ‘Call Button Text’ field.

    How to add a Call Now button to WordPress

    After that, scroll to the Call Button Position section and choose where you want to show the button on your website. For example, you can show the button in the bottom-right corner, or create a banner that covers the whole footer area.

    When you’re happy with how the button is set up, click on ‘Save Changes.’ After that, simply head over to your website to see the call-to-click button in action.

    Don’t want to use a click-to-call button? Then see our guide on how to add clickable phone numbers in WordPress for some different options.

    10. Add a Contact Form in WordPress Footer

    Your website’s footer doesn’t have to be a dead-end. If you’ve added a navigation menu following the process described above, then you’re off to a great start. However, you can also encourage customers to connect with you by adding a contact form to the footer area.

    This is where WPForms comes in.

    WPForms is the best WordPress contact form plugin and comes with a ready-made Simple Contact Form template that allows you to create a contact form with just a few clicks.

    After activating the plugin, go to WPForms » Add New and type in a name for the contact form. This is just for your reference so you can use anything you want.

    The WPForms form builder plugin for WordPress

    Simply find the ‘Simple Contact Form’ template and click on its ‘Use Template’ button.

    WPForms will now open the template in its form builder. The template already has all the fields you’ll typically need, but you can add more fields by dragging them from the left-hand menu and dropping them onto your form.

    Adding fields to a WordPress contact form

    You can also click on any field to edit it, and rearrange them in the form using drag and drop.

    To delete a field, simply hover your mouse over it and then click on the small trash can icon when it appears.

    Removing fields from a WordPress contact form

    When you’re ready, click on the ‘Save’ button to store your changes.

    To add the contact form to your footer, head over to the Appearance » Widgets page in the WordPress dashboard.

    Here, click on the ‘+’ button and search for ‘WPForms.’ When the right block shows up, drag and drop it onto your theme’s footer area.

    Adding a contact form to your WordPress footer using a block

    After that, open the ‘Form’ dropdown and select your contact form.

    You can also add an optional title, which will appear above the contact form.

    Adding a form to your WordPress website

    Once you’ve done that, click on the ‘Update’ button.

    Now, if you visit your website you’ll see the new contact form in the footer.

    Adding a contact form to the WordPress footer

    Adding a Contact Form with the Full-Site Editor

    Want to add a contact form to the footer of a block-enabled theme?

    Then you’ll need to head over to Themes » Editor. Here, scroll to the bottom of the screen and click on the ‘+’ in the footer area.

    With that done, type in ‘WPForms’ to find the right block.

    Adding a contact form to a block-based WordPress theme

    Give this block a click to add it to the footer area.

    In the WPForms block, open the ‘Select a Form’ dropdown and choose the contact form we just created.

    Showing different forms in a WordPress footer

    When you’re ready to make the contact form live, simply click on the ‘Save’ button.

    We hope this article helped you decide which things to add to your WordPress footer to make it more useful. Next, you can see our guide on how to improve your WordPress website speed and performance, and our expert pick of the best WordPress plugins to use on your site.

    If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

    The post Checklist: 10 Things To Add To The Footer on Your WordPress Site first appeared on WPBeginner.

  • 13 Best WordPress Footer Design Examples (+ Best Practices)

    Are you looking for the best footer design examples to help you get inspired?

    The footer is the area at the bottom of your website, and website owners often overlook it. By checking out great website footers, you can get design inspiration and improve your footer.

    In this article, we’ll show you some of the best footer design examples and offer best practices and tips to help you take action.

    Best WordPress footer design examples (+ best practices)

    Why Is a Good WordPress Footer Design Important?

    The footer is the area of your website that appears at the very bottom of the page. It will normally be on every page of your WordPress website.

    Here’s an example of our footer on WPBeginner that millions of readers see every month.

    We include links to our free tools and product sites, as well as ways for users to learn about us, find jobs with us, follow us on social media, and more.

    WPBeginner footer

    Since it’s located at the bottom of the website, most beginners forget to optimize this area.

    However, your website footer is an important area of your website. It lets you show important details and final takeaways in one place.

    By customizing your footer, you can improve the overall user experience of your website and even optimize your site for WordPress SEO.

    Plus, visitors who scroll to the bottom of the page are very engaged, so you can capture their attention with a call to action, email subscribe box, or send them to the most important pages on your website.

    That being said, let’s show you some of the best footer design examples and best practices to optimize your WordPress footer.

    Best WordPress Footer Design Examples

    We’ve rounded up some of the top footer design examples to help you get design inspiration for your own footer area.

    1. WPForms

    WPForms Footer

    WPForms has a footer with all kinds of useful links. You’ll find links that go to the most helpful company pages, the top features of the plugin, and some useful WordPress links.

    This ensures that when the reader gets to the bottom of the page and still has questions, they’ll find the exact resources they need. There’s also a floating alert bar at the bottom of the page with a call to action.

    2. OptinMonster

    OptinMonster footer

    OptinMonster has a footer that offers readers links to important company pages, top features, helpful product links, and much more.

    It also has simple social media icons, trust icons, and a company logo for branding purposes.

    3. Neil Patel

    Neil Patel footer

    Neil Patel has a compact and straightforward footer that offers readers quick navigation links. The footer menu is the same as the navigation menu at the top of the site.

    Plus, readers have the option to follow Neil Patel on social media as well.

    4. Michael Hyatt

    Michael Hyatt footer

    Michael Hyatt has another simple and compact footer. It highlights the copyright date, easy social sharing buttons, and links to pages like terms of service and privacy policy.

    Directly above the footer, you’ll see a call to action to download a free guide, which can convert a lot of visitors that make it to the bottom of the page.

    5. ReddBar

    Reddbar footer

    ReddBar is a WooCommerce store with a footer that encourages email sign-ups. Directly above the footer links, there’s a massive sign-up box for readers.

    Some of the helpful links include a link to their FAQ page, contact page, wholesale pricing page, and more.

    6. Reader’s Digest

    Reader's Digest Footer

    The Reader’s Digest footer contains a lot of information for visitors. You’ll find links to their category pages, other company brands, social media sharing buttons, and more.

    Plus, there’s an eye-catching email sign-up box to encourage visitors to join their email list.

    7. IsItWP

    IsItWP footer

    The IsItWP footer has a quick section on what the website is about and links to other sites and company pages.

    It also has a unique site links drop-down menu that lets readers click to find the exact type of content they’re looking for.

    8. MonsterInsights

    MonsterInsights Footer

    MonsterInsights has a simple footer that focuses on helping readers find the information they need. There are links to their premium features, company resources, and other brand links.

    Plus, there’s a call to action to lead visitors to the pricing page. There are also social icons.

    9. Printing New York

    Printing New York footer

    Printing New York is an online store that ships worldwide. The footer highlights their address, services, and popular products.

    They use the structure of their links to help boost their local SEO and search engine rankings.

    10. Nalgene

    Nalgene footer

    Nalgene has a clean and well-organized footer section. Directly above the footer, there’s a simple email sign-up box.

    After that, there are well-organized links to help visitors find the exact products they’re looking for, along with company-related links.

    11. ProBlogger

    ProBlogger footer

    The ProBlogger footer has links to their most popular posts, top resources, and new jobs posted on their job board.

    There’s also a big email sign-up form directly above the footer and a small footer navigation menu with the same menu options as the header navigation.

    12. TrustPulse

    TrustPulse Footer

    TrustPulse is the best social proof notifications plugin on the market. Instead of including multiple navigation menus or page links, they feature an email newsletter sign-up box.

    Although it’s different from most other brands, a minimalist footer like this can convert well since there are fewer distractions or actions the visitor can take.

    13. The Next Web

    The Next Web footer

    The Next Web has a footer that stands out from the rest of the website. It has social media sharing buttons, links to important pages, and more.

    You’ll see a social proof section directly above the footer where they feature logos from popular brands and websites they’ve been mentioned or featured.

    WordPress Footer Design – Tips and Best Practices

    There are a lot of ways you can improve your user experience and create a better footer for your WordPress blog.

    Let’s take a quick look at some of the best practices to keep in mind as you edit your website footer.

    Include Your Business Contact Information

    Having contact information listed on your site is essential. You should have a separate contact form page on your website, so your visitors can get in touch.

    However, the footer is also an excellent place to include your contact information, especially if you have local customers who will be looking for your physical address.

    Business contact information example

    For local businesses, the more ways you can feature your contact information, address, and even business hours, the better.

    Add Links to Important Website Pages

    It’s important to have clear navigation across your entire website. That’s why it’s common for websites to include links in their footers.

    You can add links for your most important product pages, top blog posts, about pages, and more.

    Footer links example

    Think about the most valuable pages on your website and what your visitors will find the most useful.

    Adding and optimizing your links can also give you an SEO benefit and boost your search engine rankings.

    Add Social Proof to Improve Conversions

    One thing you may have seen certain websites do in their footer is to add social proof. This can help to earn your customer’s trust and position you as an expert in your space.

    It can be as simple as a customer testimonial or a collection of logos of popular websites you’ve been featured on.

    Here at WPBeginner, we highlight logos of popular websites where we’ve been featured directly above the website footer.

    Footer social proof example

    Add a Call to Action

    When your visitors get to the bottom of your website, you’ll want to tell them the exact action they should take and how they should do it.

    For some websites, this will be a call to action to sign up for their email newsletter. For others, it will be links to explore popular product features or even a call to action button.

    Call to action button footer example

    Your footer is the last chance to get your visitors’ attention and encourage them to become subscribers and customers or simply spend more time on your website.

    For more optimization tips, see our checklist of ten things to add to your website footer.

    We hope this article helped you find some of the best footer examples to help you optimize your website footer. You may also want to see our guide on how to choose the best blogging platform and our picks on the best virtual business phone number apps for small businesses.

    If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

    The post 13 Best WordPress Footer Design Examples (+ Best Practices) first appeared on WPBeginner.

  • How to Edit the Footer in WordPress (A Simple Guide)

    Website footers have always been one of the most difficult elements of web design to get right. And WordPress footers are no different. Whether you’re just hoping to figure out how to remove “Proudly Powered by WordPress” in the footer or trying to completely redesign your footer, knowing how to edit your footer in WordPress is essential.

    In this post, we’ll go over the most helpful ways of editing the WordPress footer so you can choose the right one for you.

    Here’s what we’ll cover:

    • How to Edit the Footer Using the WordPress Theme Customizer
    • How to Edit a Footer Using Full Site Editing (and Patterns) in WordPress
    • How to Edit a Footer with a WordPress Plugin
    • How to Edit a Footer with the Divi Theme Builder

    How to Edit the Footer in WordPress (4 Ways)

    Footer customization comes built-in to WordPress so every website will have some way of editing and designing it. With the new WordPress Block Editor and Full Site Editing capabilities of WordPress, editing a footer is getting easier for WordPress users (especially for WooCommerce sites). But not all themes are the same, and some of the classic themes will rely on older methods.

    With that in mind, here are 4 ways to edit your footer in WordPress.

    1. How to Edit the Footer in WordPress with Theme Customizer

    The WordPress Customizer is a great tool that allows you to change the look and feel of your WordPress site. With the Customizer, you can change footer (and theme) colors, fonts, and other styling options. You can also add custom widgets and menus to your footer.

    Just a note, the traditional customizer experience is being used less and less in themes as the Block Editor gains more and more features and adoption. If the “Customize” button takes you to a Block Editor, you’ll learn how to handle that in the next sections.

    In your Admin Dashboard view, click on “Appearance” and then “Customize”.

    WP Customize - Edit WordPress Footer Step 1

    This will open up one of WordPress’ visual site editing experiences. The options within this area will vary greatly depending on your theme. For this example, we are using the popular Twenty-Twenty Theme.

    How to Add New Blocks to Footer Area

    To edit the footer widgets in the customizer, click on Widgets and then scroll to the bottom of the page. Look for the Footer Widget areas to see the parts of the footer that are editable in the Customize View. To get there quicker, you can also click on the blue pencil icon to get there quicker.

    WP Customize - Edit WordPress Footer Step 2-3

    You can edit these widget areas with a paired-down Block Editor. You can add or remove blocks to that widget area. Keep in mind that the theme defines where the widget area ends up.

    To add a footer navigation menu, add the Navigation block to one of your footer widget areas. If you have multiple menus built on your site you can choose the one you want and also give the block a displayed title.

    Change Theme Colors in WordPress Customizer

    The Twenty Twenty WordPress default theme comes with the ability to change major theme colors. You can pick your header/footer background color, body background color, and a primary accent color for the site. This dynamically changes these colors everywhere they are used on the website.

    WP Customize - Edit WordPress Footer Step 7

    Setting the Primary color most notably changes the color of linked text.

    Add Custom CSS to Edit Footer Styles in the WordPress Customizer

    The customizer has a way of adding custom CSS to your website and preview how it looks.

    In the root pane of the Customizer, navigate to Additional CSS (the last option). For this example, we are going to change the background color of the footer with a simple snippet of CSS as follows:

    .footer-top-visible .footer-nav-widgets-wrapper, .footer-top-hidden #site-footer {
    background-color: aliceblue;
    }
    

    Once we add the CSS we will see a preview of how it looks instantly.

    You can choose any predefined CSS color name or hex code. Publish your changes once you dial in your CSS to apply it to your website.

    Block Editor - Edit WordPress Footer Step 6

    Different Footer Customize Options by Theme

    Some themes take a completely different approach to editing footers (and other site sections) in the Customizer. There are too many such themes to show but they supply extra options in the customizer for editing styles, layouts, and general functionality.

    2. How to Edit a Footer Using Full Site Editing & Block Patterns in WordPress

    Editing the footer in the WordPress Block Editor is very easy if your theme is a Block Theme. To show you how easy this is, we’ll edit a footer using the Twenty Twenty-Two default theme.

    Click “Appearance” and then “Editor”. This will load the home page of your website in the block editor.

    Block Editor - Edit WordPress Footer Step 1

    Next, scroll all the way down the page until you see your site’s footer. Then, click on the footer section to start editing. You’ll be able to edit the footer just like you would with a page or post in the block editor.

    However, if you are not familiar with how this editor works, read this article explaining how to use the Block Editor.

    Block Editor - Edit WordPress Footer Step 2-3

    You can add block elements to your footer as well. Try adding a footer menu (called a Navigation block), an Image block for your logo, or even Custom HTML for an external email subscriber form.

    Block Editor - Edit WordPress Footer Step 4

    Additionally, if you want to edit the footer, distraction-free, you can do so with two clicks. Click the vertical Ellipsis (â‹®) menu icon and select “Edit Footer”.

    Block Editor - Edit WordPress Footer Step 5-6

    This opens a new editing view that takes away all other page elements except for the footer you are editing. The block editor in this view works the same—just with a little more focus.

    Block Editor - Edit WordPress Footer Step 7

    Copying Pre-made Footer Block Patterns

    Patterns are a newer addition to the block editor. Patterns give designers the ability to create wonderful block configurations and share them with other people. Public patterns can be found in the Block Pattern Directory.

    For our purposes, you can search for the patterns for “footers”. This will narrow down the list that you can choose from. Hover over any pattern that you like, click copy, and head back over to your website. The pattern code will be in your clipboard—ready to paste.

    Add WordPress Block Footer Pattern - 1-3

    Add a new Custom HTML block.

    Add WordPress Block Footer Pattern - 4-6

    In the HTML Block, paste the copied footer pattern code into it.

    Add WordPress Block Footer Pattern - 7

    After that, select Preview and then convert the custom HTML into Blocks. This will make each item editable via the block editor.

    Add WordPress Block Footer Pattern - 8-10

    In your editor, you’ll see that the pattern was successfully converted to blocks and you can edit them to fit your needs.

    Add WordPress Block Footer Pattern - Result

    These patterns are created by the general WordPress community expect them to vary in quality and design. Page builders like Divi take WordPress patterns to a whole new level, with hundreds of pre-made layouts and footer templates that are created by a professional design team and photographers.

    3. How to Remove “Powered by WordPress” with Plugin

    Sometimes all the editing in your footer that you need to do is remove some theme branding from your footer. Many theme developers make it very difficult to remove their company name and link from your footer (especially with free themes).

    Removing theme branding or the classic “Proudly Powered by WordPress” is easy enough with a plugin. Download the Remove Footer Credit plugin.

    Select the footer text that you don’t want to be displayed and copy it to your clipboard. In our case, we are trying to remove “Powered by WordPress” in our example footer.

    Remove Footer Credit - 1

    Go to “Tools” and “Remove Footer Credit”. Paste the text from your footer into the top field. You can choose a replacement text or keep the second field empty. Click save and enjoy your cleaner footer.

    Remove Footer Credit - 2-5

    View the footer on your live site.

    Remove Footer Credit - Result

    If the footer element is still there, try breaking up the text into separate lines. Just be careful about the text you add to this plugin. If you attempt to remove a very common word from your website, it may disappear elsewhere on your site, not just in the footer. Some themes really don’t want you to be able to remove footer credits so you may meet enthusiastic opposition to this plugin working out for you.

    4. How to Build and Edit a WordPress Footer Template with Divi

    The Divi Theme Builder gives you everything you need to create an entire theme design. This includes a perfectly dialed-in footer. Most themes restrict your design options in areas like the footer or header of your WordPress website. Divi gives you full creative control of both headers and footers with the tools to make it work.

    To get started creating your footer, open up the Divi Theme Builder and then select “Build Global Footer” on the default template.

    Divi Theme Builder - Custom Footer a 1-3

    This will pull up a few options. Select “Build from Scratch” to build the exact footer you have in mind. This will open the Divi Visual Editing interface and allow you to start building the footer.

    Since this is a “Global Footer” this will appear on all of your pages. Other content that belongs above the footer can be created on individual pages.

    Divi Theme Builder - Custom Footer a 4

    From there, you can design a footer that can be applied to all your website’s pages.

    If you are wanting an excellent tutorial on how to create a custom footer—from start to finish—check out this full-length tutorial for creating a custom footer. This is the end result that you’d make for yourself.

    Divi Theme Builder - Custom Footer Example Tutorial

    Of course, you are completely free to edit the footer to your needs and liking.

    Tips on What to Include in Your WordPress Footer

    Visitors expect certain information to be located on your website’s footer. Though there is room for creativity in footer design, it is always best to keep your footer content in step with what users are expecting to find. Aside from the header, the footer is probably the most visible space on your website. So, it should contain the information and links most important to your visitors and your company including:

    1. Social Profiles and Communities
    2. Relevant Pages (Services, Blog, Help, etc.)
    3. Specific Company/Website Information (Terms of Service, Careers, About, Contact info, etc.)
    4. Copyright Notice and Registered Trademark

    Elegant Themes - Divi Website Footer

    If you operate a local business with a physical location, we always recommend you add your NAP to your footer. NAP stands for:

    1. Name of Business
    2. Address of Business
    3. Phone Number of Business

    NAP SEO Footer Example

    It is important to keep these details formatted consistently across your website, Google My Business profile, and other local listings like Yelp and Facebook. Consistent NAP placement is vital because it benefits your business website’s SEO.

    At the end of the day, footers should reflect the “Go To” information that your customers expect from your business. Don’t include things that don’t make sense and make sure your most important pages are linked. For more, check out these 5 other Footer Tips to help you create a more user-friendly footer.

    Conclusion

    For most, the easiest way to edit your footer is to take advantage of the new full-site editing features in WordPress. This allows you to edit your global footer right inside the WordPress editor using WordPress blocks. For those who want complete design control when creating or editing your footer, Divi’s theme builder is the way to go. Not only does this give you a complete design and functional control over the footer but it also allows you to preload professionally designed templates onto your website.

    For more, check out our post on how to use the WordPress block editor.

    How have the global theme builder areas, such as global footers, improved the quality and speed of your website design process?

    Featured Image via Superstar / shutterstock.com

    The post How to Edit the Footer in WordPress (A Simple Guide) appeared first on Elegant Themes Blog.