When connecting my stylesheets to my WordPress theme, I include the following in my customtheme/style.css file:
@import url('bootstrap/bootstrap.min.css');
@import url('includes/styles1.css');
@import url('includes/styles2.css');
If I need to apply styles1.css to only one specific page (for example, the home-page) and styles2.css to all other pages, is there a way to specify this?
wp_register_style along with wp_enqueue_style
Here's how it operates:
Using wp_register_style allows you to create your own stylesheets and assign them unique handles. This feature permits you to define all your styles and only load them when necessary. Typically, stylesheets are registered early in the theme's process and then enqueued based on specific conditions.
For instance:
Let's assume you have a custom shortcode but want to load its stylesheets only when the shortcode is utilized:
functions.php
add_action('wp_enqueue_scripts', 'custom_enqueue_scripts');
function custom_enqueue_scripts()
{
//Register the style
wp_register_style('my-shortcode-styles', get_template_directory_uri() . '/css/shortcode-styles.css');
}
add_action('init', 'custom_init');
function custom_init()
{
//Example shortcode
add_shortcode('my_shortcode', 'custom_shortcode');
}
function custom_shortcode($atts, $content = null)
{
//If the registered style is not loaded....
if (!wp_style_is('my-shortcode-styles')) {
//Enqueue it!
wp_enqueue_style('my-shortcode-styles');
}
return 'My Shortcode!';
}
In most scenarios, wp_enqueue_style is sufficient. With this, you can both register and enqueue your stylesheets at the same time:
add_action('wp_enqueue_scripts', 'custom_enqueue_scripts');
function custom_enqueue_scripts()
{
//Register and enqueue the style
wp_enqueue_style('my-shortcode-styles', get_template_directory_uri() . '/css/shortcode-styles.css');
}
In your situation, you can use simple logic checks to decide which stylesheet to load based on the user's page:
add_action('wp_enqueue_scripts', 'custom_enqueue_scripts');
function custom_enqueue_scripts()
{
if(is_home()){ //is_front_page() if you have a Page set as the home page
//Load only on the home page
wp_enqueue_style('home-styles', get_template_directory_uri() . '/css/styles1.css');
}
//Load on all other pages
wp_enqueue_style('my-theme', get_template_directory_uri() . '/css/styles2.css');
}
Note: To ensure stylesheet enqueues work properly, your theme must utilize wp_head and wp_footer. If these are missing in your theme's template files, stylesheet enqueues will not function.
Additional resources:
Is there a specific reason for wanting to load various stylesheets on different pages? Combining stylesheets can lead to improved performance metrics on tools like and https://developers.google.com/speed/pagespeed/insights/, resulting in faster loading times. Consider targeting specific classes or IDs within a single stylesheet for multiple pages to enhance efficiency.
I have been working on creating a sidebar that includes a background image with a transparent overlay. However, I encountered an issue where the overlay background does not stretch all the way to the bottom when the scroll bar becomes visible. Despite sett ...
My table contains a central image cell that spans two rows: <table width="100%" style="text-align:center"> <tr> <td>Cell 1</td> <td>Cell 2</td> <td rowspan="2"><img src="http://www.skrenta.com/ima ...
I am currently working on making my new website development project mobile responsive, but I am encountering some strange behavior that is quite frustrating. I am hoping someone can help me figure out what mistake I may be making here. Whenever I test the ...
Using these mixins makes it easy to work with BEM syntax in sass 3.3.2: =b($name) .#{$name} @content =e($name) &__#{$name} @content =m($name) &--#{$name} @content +b(menu) +e(item) color: grey +e(item) +m(alert) ...
Struggling with a layout issue on my website. I need to display an image with text at the beginning of the site-wrap div under the name background-image, with the text inside that div. Adding line-height to the text div adjusts its height, but I want to m ...
My objective is to include a "Read More" link alongside a text block, which should appear next to the text without forming a new line or block. The challenge lies in the fact that the content of the text block is created using TinyMCE, resulting in various ...
While I am currently dealing with an older version of Symfony, I decided to create a new 5.3 Symfony application from scratch. However, I am facing difficulties when trying to integrate bootstrap into it. After consulting some documentation, I proceeded to ...
I've implemented a basic slideToggle functionality in jQuery. You can check out the code on JSFiddle here: $(document).ready(function() { $(".panel_button").on('click', function() { $(".panel").slideUp(); var targetPanel = $(thi ...
* { box-sizing: border-box; padding: 0; margin: 0; } ul { list-style-type: none; } .nav-links, .logo { text-decoration: none; color: #000; } .logo { max-width: 80%; width: 20%; height: 20%; } .navbar { padding: 20px; height: 50vh; ...
I am working on a navbar that uses Bootstrap 3 and AngularJS. Within this navbar, I have an unordered list with li elements. Below is a snippet of my navbar: https://i.stack.imgur.com/o75Lp.png This is the code for my navbar: <div class="navbar-head ...
After trying to install NextJS using both methods npm install next react react-dom and npx create-next-app appname, I noticed that my project directories are different from what they are supposed to look like: Instead of having pages, api(_app.js, index.j ...
Despite following the instructions in this post Attempting to incorporate a linear gradient into a MaterialUI icon, as per a comment's recommendation, I am unable to get it to work. I experimented with the idea that the icons could be considered text ...
I have created a custom post using functions.php, which is working fine in the admin panel. Now, I want to manually create a custom post from another PHP file using AJAX. Here is the code snippet from functions.php: add_action('save_post', &apos ...
I'm feeling a little lost. By default, WordPress displays a 404 error when someone tries to access a private post. Is there a way for me to customize this behavior? I would like to show the post to a specific user: if ( show_post_to_the_user(get_curr ...
Recently, I decided to practice my web development skills by creating a basic webpage using flexbox for the topnav and CSS Grid 12 column layout for the main content. Everything was going smoothly until I encountered some extra whitespace in the sidenav se ...
Below is the CSS code: *{margin:0; padding:0; box-sizing:border-box; } img{ display:block; max-width:100%; height:auto; } html{ scroll-behavior:smooth; } body{ min-height:100vh; font-family:fantasy; font-size:1.12 ...
I am experiencing an issue with the placement of an image in my HTML code. When I place the image inside the nav element, it works perfectly fine. However, when I try to put it inside the body or header elements, it doesn't display properly. I am new ...
Today, I encountered an error on my Mac 14.2.1 with Docker 4.27.2. When running npm run wp-env start, the container is created and running, but a database connection issue is displayed. ➜ TEST npm run wp-env start > @ wp-env /Users/ciaran/Projects/T ...
I'm trying to create a dropdown menu with alternating colors for the items. Can someone please provide the CSS code needed to style dropdown list items using ODD and EVEN? ...
This is a class for span with the CSS properties position:absolute; top:0px; left:0px; right:0px; .textStyle1 { font-size:24px; font-family:'Arial'; position:absolute; top:0px; left:0px; right:0px; } #div1 { position:absolute; lef ...