Book Image

WordPress Plugin Development Cookbook - Third Edition

By : Yannick Lefebvre
Book Image

WordPress Plugin Development Cookbook - Third Edition

By: Yannick Lefebvre

Overview of this book

WordPress is one of the most widely used, powerful, and open content management systems (CMSs). Whether you're a site owner trying to find the right extension, a developer who wants to contribute to the community, or a website developer working to fulfill a client's needs, learning how to extend WordPress' capabilities will help you to unleash its full potential. This book will help you become familiar with API functions to create secure plugins with easy-to-use administration interfaces. This third edition contains new recipes and up-to-date code samples, including new chapters on creating custom blocks for the block editor and integrating data from external sources. From one chapter to the next, you’ll learn how to create plugins of varying complexity, ranging from a few lines of code to complex extensions that provide intricate new capabilities. You'll start by using the basic mechanisms provided in WordPress to create plugins, followed by recipes covering how to design administration panels, enhance the post editor with custom fields, store custom data, and even create custom blocks. You'll safely incorporate dynamic elements into web pages using scripting languages, learn how to integrate data from external sources, and build new widgets that users will be able to add to WordPress sidebars and widget areas. By the end of this book, you will be able to create WordPress plugins to perform any task you can imagine.
Table of Contents (15 chapters)

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