Loading a style sheet to format plugin output

When a plugin adds custom content or inserts styling tags to a post or page's existing content, as was done in the previous recipe that showed how to create an enclosing shortcode, it often needs to load a custom style sheet to style these new elements. This recipe shows how to add a style sheet in the WordPress style queue to format the private output created in the previous recipe. This queue is processed when the page header is rendered, listing all the style sheets that need to be loaded to display the site correctly.

Getting ready

You should have already followed the Creating a new enclosing shortcode recipe to have a starting point for this recipe, and the resulting plugin should still be active in your development site. Alternatively, you can download the resulting code (ch2/ch2-private-item-text/ch2-private-item-text.php) of that recipe from the book's GitHub page.

How to do it...

Follow these steps to add insert custom Cascading Style Sheet (CSS) code in your page output:

1. Navigate to the ch2-private-item-text folder of the WordPress plugins directory of your development installation.
2. Open the ch2-private-item-text.php file in a code editor.
3. Add the following line after the existing code to register a function that will be called at the beginning of the WordPress page display process:

   add_action( 'wp_enqueue_scripts',
               'ch2pit_queue_stylesheet' );

4. Add the following code section to provide an implementation for the ch2pit_queue_stylesheet function:

   function ch2pit_queue_stylesheet() {
       wp_enqueue_style( 'privateshortcodestyle',
           plugins_url( 'stylesheet.css', __FILE__ ) );
   }

5. Save and close the plugin file.
6. Create a new text file in the ch2-private-item-text directory called stylesheet.css and open it in a code editor.
7. Add the following content to the file:

   .private {
       color: #6E6A6B;
   }
   .register {
       background-color: #ff4d4d;
       color: #fff;
       padding-left: 10px;
   }

8. Save and close the text file.
9. Navigate to your website, making sure you are logged in, and refresh the page containing the private text content. You should notice that the private text is now displayed in gray.
10. Open the site in an incognito browser view to see that the registration message styling has changed to be displayed in white with a red background.

How it works...

While it would have been possible to write straight HTML code to load the CSS file by registering a function with the wp_head action hook, as we have done previously, WordPress has utility functions designed to help avoid loading duplicate style sheets or scripts on a site. In this specific example, wp_enqueue_script is used to place the plugin's style sheet file in a queue that will be processed when the plugin header is rendered, with the associated name privateshortcodestyle. Once WordPress has processed all the plugins and boiled down all the style sheet requests to single instances, it will output the necessary HTML code to load all of them.

The content of the stylesheet.css file is standard CSS code that specifies that any text that is assigned the private class should be displayed in gray, while the text displayed to non-registered users should be displayed in white on a red background.

See also

• The Creating a new enclosing shortcode recipe