Link css, js and images in custom wordpress theme

The JavaScript and these images play a very important role in any website. As you all know, the design of any website depends on these three things. Without these three, no website can look good.

As you all might know that PHP website has a different way of adding these images, CSS/JavaScript but the way of adding the same things in it is completely different.

Incorporating CSS and JavaScript into your WordPress theme isn’t just about dropping links into your template files. WordPress provides a structured way to include these resources, ensuring they are loaded efficiently and without conflicts. Understanding the correct method to include CSS and JavaScript is crucial for any theme developer. Let’s explore the best practices for doing this the right way.

Path till theme directory use for file include/require

echo get_template_directory(); print = C:\xampp3\htdocs\wordpress/wp-content/themes/custom-theme
Path till theme directory

echo get_template_directory_uri();
print: http://localhost/wordpress/wp-content/themes/custom-theme
Path till theme directory (For links theme files)

bloginfo('template_directory');
print: http://localhost/wordpress/wp-content/themes/custom-theme
OR
get_theme_file_path()
link css, js & images

<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/style.css">

Leave a Reply