The ability to deploy specific scripts or HTML blocks, or even Styles, on particular pages on a WordPress website can be particularly useful especially when you don’t want to deploy these blocks of codes where not needed.
For example, you only want to include a particular script on your service page because it does not make sense to include it on other pages. Or perhaps a specific campaign page calls for an entirely separate style file that other pages will not use.
One benefit as to why you would want to do this is to improve page load of other pages that don’t need the script, which will contribute to the pages’ “page experience” score if this is something you’re doing it for.
But how do you deploy a script so it’s only injected on a page where you want to use it in WordPress?
Functions you need to be aware of
The following code blocks will be using these key functions available in WordPress and PHP to help you carry out this particular requirement.
get_the_permalink( int|WP_Post $post, bool $leavename = false )Above basically helps you retrieve the full permalink for the current post or post ID. This means if you are currently browsing yourdomain/service, then this function will give you yourdomain/service for as long as you give it the corresponding post ID.
get_queried_object_id()This one helps you retrieve the ID of the currently queried object. So, if you wonder where to get the ID the get_the_permalink() function needs, this is the function you need to retrieve the post ID.
strpos($string, $find)This one is a PHP function. We can use the strpos() function to check whether a string contains a specific word or not. In our use case, the string will be the permalink while the “specific word” will be our condition.
How to deploy code blocks on specific pages in WordPress based on permalinks
To achieve this, we combine the get_the_permalink(), get_queried_object_id() and strpos() functions to build an “if statement” that only executes something when the condition is true. See the code composition below:
<?php
$url = get_the_permalink( get_queried_object_id() );
$partOfUrl = “.com/service”;
if ( strpos ( $url, $partOfUrl ) ) {
// do something
}
?>Simply replace the $partOfUrl value and add in your script where it says “// do something”.
Where to deploy these custom codes in WordPress
There are two areas where you can deploy these codes in your WordPress site’s backend or theme files.
In the functions.php file using the wp_footer() hook:
<?php
function specific_page_script() {
$url = get_the_permalink( get_queried_object_id() );
$partOfUrl = “.com/service”;
if ( strpos ( $url, $partOfUrl) ) {
// do something
}
}
add_action( 'wp_footer', 'specific_page_script' );
?>In the footer.php file, by pasting in the codes just above the closing body tag </body>. Just be mindful of the PHP opening and closing tags. Below is the updated code block.
<?php
$url = get_the_permalink( get_queried_object_id() );
$partOfUrl = “.com/service”;
if ( strpos ( $url, $partOfUrl) ) {
?>
// do something; HTML, javascript, CSS style goes here
<?php
}
?>As our website grows, it is important to keep things in check before everything gets messy. By specifically loading scripts where needed, we are essentially helping our website’s pages load up as fast as they can.
Leave a Reply