Search

<p>Whether you’re new to WordPress, or you’ve been creating custom themes for years, you’re probably familiar with a different number of ways to include stylesheets and scripts into your theme. At BRYT DESIGNS, we focus on utilizing the best practices in web design to ensure positive search results, optimized code, and happy developers. As recommended by the <a href="http://codex.wordpress.org/" target="_blank">WordPress Codex</a>, the preferred method of enqueuing stylesheets and scripts into your custom WordPress theme is via the functions.php file. When you enqueue a stylesheet or script, WordPress will create a handle and a path to find the requested file and any dependencies it may have like jQuery, etc. — and then will use a hook that will insert your stylesheets and scripts.</p><div class="lwptoc lwptoc-autoWidth lwptoc-light lwptoc-notInherit" data-smooth-scroll="1" data-smooth-scroll-offset="24"><div class="lwptoc_i">    <div class="lwptoc_header" style="font-size:175%;">
        <b class="lwptoc_title">Contents</b>                    <span class="lwptoc_toggle">
                <a href="#" class="lwptoc_toggle_label" data-label="show">hide</a>
            </span>
            </div>
<div class="lwptoc_items lwptoc_items-visible" style="font-size:125%;">
    <div class="lwptoc_itemWrap"><div class="lwptoc_item">    <a href="#Why_not_just_include_stylesheets_scripts_in_the_headerphp_file">
                    <span class="lwptoc_item_number">1</span>
                <span class="lwptoc_item_label">Why not just include stylesheets &amp; scripts in the header.php file?</span>
    </a>
    </div><div class="lwptoc_item">    <a href="#The_benefits_of_loading_your_stylesheets_scripts_via_WordPress_functionsphp_file">
                    <span class="lwptoc_item_number">2</span>
                <span class="lwptoc_item_label">The benefits of loading your stylesheets &amp; scripts via WordPress functions.php file</span>
    </a>
    </div><div class="lwptoc_item">    <a href="#TLDR_The_copy-pasta_code">
                    <span class="lwptoc_item_number">3</span>
                <span class="lwptoc_item_label">TLDR: The copy-pasta code</span>
    </a>
    </div></div></div>
</div></div>
<h2><span id="Why_not_just_include_stylesheets_scripts_in_the_headerphp_file">Why not just include stylesheets &amp; scripts in the header.php file?</span></h2>
<p>In the functions.php file, WordPress utilizes the enqueue system to add external stylesheets and scripts which helps prevent conflicts with other installed plugins. If you are loading your stylesheets and scripts via the header.php file or wp_head function, you are force-loading these files which may cause conflicts with other plugins and break your code.</p>
<h2><span id="The_benefits_of_loading_your_stylesheets_scripts_via_WordPress_functionsphp_file">The benefits of loading your stylesheets &amp; scripts via WordPress functions.php file</span></h2>
<p>WordPress has an extremely strong and expansive web developer community. To ensure compatibility with any other scripts and plugins you may be using, WordPress utilizes the enqueue script function. With this method, you are telling WordPress when you want to load the script, where you want to load it, and what it’s dependencies are.</p>
<h2><span id="TLDR_The_copy-pasta_code">TLDR: The copy-pasta code</span></h2>
<p>Enqueuing stylesheets and scripts is easy to do, and will help avoid problems for your website down the road. To enqueue your stylesheets and scripts via the functions.php file, place the following code at the bottom of your functions.php file (with your specific needs/modifications of course):</p>
<pre>function theme_assets() {

 // Load styles, replace stylesheet-name and stylesheet-path with your files
 wp_enqueue_style( 'stylesheet-name', get_template_directory_uri() . '/stylesheet-path.css' );

 // Load scripts in footer, replace script-name and script-path with your files
 wp_enqueue_script( 'script-name', get_template_directory_uri() . '/script-path.js', '', '', true );

}

add_action( 'wp_enqueue_scripts', 'theme_assets' );
</pre>
<p>Read more about enqueuing scripts and stylesheets (and add dextra parameters beyond what is explained here) to your WordPress theme at the <a href="https://developer.wordpress.org/reference/functions/wp_enqueue_script/" target="_blank">WordPress.org</a>.</p>


How to add Custom Stylesheets and Scripts to your WordPress Functions.php File

Tag:"Functions Php"

Tag:
"Functions Php"