How to add CSS in footer WordPress

To add a CSS link to your WordPress site’s footer, you can use the wp_footer action hook. Here’s an example of how you can use this hook to add a CSS link to your footer:

  1. First, create a new function that will be used to add the CSS link. You can do this by adding the following code to your theme’s functions.php file:

function my_custom_css_footer() { echo '<link rel="stylesheet" type="text/css" href="' . get_template_directory_uri() . '/css/custom-footer.css">'; }
  1. Next, add the my_custom_css_footer function to the wp_footer action hook by adding the following code to your theme’s functions.php file:
add_action( 'wp_footer', 'my_custom_css_footer' );
  1. Create a new CSS file called “custom-footer.css” and save it in your theme’s “CSS” folder. You can then add your custom CSS styles to this file.
  2. Save the functions.php file and refresh your website to see the changes. The CSS link should now be added to the footer of your site, and your custom CSS styles should be applied.

if you are using a child theme, you should save the custom-footer.css file in your child theme’s “CSS” folder and update the get_template_directory_uri function to use get_stylesheet_directory_uri instead. This will ensure that your custom CSS file is loaded from the correct location.

It’s also important to note that there are better practices than adding CSS to the footer. This could affect the website’s performance. The recommended way to enqueue your custom stylesheet is using the wp_enqueue_scripts action to enqueue and minify CSS properly. It also allows for better organization.

Following things you should be careful about adding CSS links in the WordPress footer

  1. Website performance: Loading CSS files in the footer can affect the performance of your website, as it may block the loading of the other content on the page. Therefore, it is generally recommended to load CSS files in your website’s header so they can be loaded and parsed before the page’s content.
  2. Browser rendering: Loading CSS in the footer also means that the browser may start rendering the page before all of the CSS is loaded. As the page is being generated, this can cause a “flash of unstyled content” (FOUC).
  3. Deprecated method: Adding CSS in the footer is not considered a best practice. Enqueueing CSS using the proper WordPress function wp_enqueue_scripts is the right way to handle adding CSS.
  4. Order of en queue: If you use multiple CSS files and have dependencies on each other, it can be challenging to ensure that they are loaded correctly when you enqueue them in the footer.
  5. Child Theme compatibility: If you are using a child theme and not using the correct path to enqueue your CSS stylesheet, it will not work when the site switches to a child theme.
  6. Minification and compression: The proper way to enqueue CSS also allow for minification and compression to improve the load time of your stylesheet
  7. HTML validation: Validating the HTML output of your site can also be affected by adding CSS in the footer, depending on the tools and services you use for verification.

It’s essential to keep these things in mind when adding CSS in the footer of your WordPress site, as it can affect your website’s performance and user experience. The recommended best practice is to use the wp_enqueue_scripts action to enqueue your CSS stylesheet and configure it appropriately to benefit from all its features.

Leave a Comment