Aslam Doctor
Monday, August 7, 2023

Exploring WordPress Styling Techniques

Exploring WordPress Styling Techniques

While doing WordPress theme/plugin development work, we have to apply styling in specific areas. WordPress provides different methods to apply styles in different scenarios. In this article, I will explain the process of adding styles to each of these areas.

WordPress is a popular Content Management System (CMS) that powers over 40% of websites on the internet today. One of the key reasons for its popularity is its flexibility and customizability. WordPress allows developers to create custom themes and plugins to tailor the website to their specific needs.

When developing a WordPress theme or plugin, one of the key aspects is styling. It’s important to ensure that the website looks visually appealing and that the design is consistent throughout. This can be achieved through the use of Cascading Style Sheets (CSS), which dictate how the HTML elements are presented on the page.

However, styling a WordPress website can be a complex process, especially for those who are new to web development. There are several different methods that can be used to apply styles to various parts of the website including front-end, content editor, plugins, and admin area.

In this article, we will explore the different methods available for adding styles to each of these areas. We will cover everything from basic CSS rules to advanced techniques like using hooks and filters. By the end of this article, you will have a comprehensive understanding of how to apply styles to different parts of a WordPress website and be well on your way to creating a fully customized and visually stunning website.

Places where styling is required

  1. Block Editor Styles
  2. Block-Specific Custom Styles
  3. Using theme.json
  4. Theme & Plugin Styles
  5. Classic Editor Styles
  6. Admin Styles

1. Block Editor Styles

Customizing the visual appearance of the Gutenberg block editor is an important aspect of developing a WordPress website. By adding your own custom styles, you can make your content stand out and create a more engaging user experience.

Fortunately, adding styles to the block editor is a straightforward process. One way to do this is by utilizing the enqueue_block_editor_assets hook, which allows you to enqueue your stylesheet specifically for the block editor.

Enqueuing your stylesheet using this hook ensures that your styles are loaded only in the block editor, and not on the front end of your website.

Here is an example of how to add it:

<?php
function my_enqueue_block_editor_assets() {
    wp_enqueue_style(
        'my-block-editor-styles',
        get_theme_file_uri( 'block-editor-style.css' ),
        array(),
        filemtime( get_theme_file_path( 'block-editor-style.css' ) ),
        'all'
    );
}
add_action( 'enqueue_block_editor_assets', 'my_enqueue_block_editor_assets' );

Here If you want to update the front end as well, change the code slightly as shown below:

<?php
function my_enqueue_block_assets() {
    wp_enqueue_style(
        'my-block-editor-styles',
        get_template_directory_uri() . '/css/my-block-styles.css',
        array(),
        filemtime( get_template_directory() . '/css/my-block-styles.css' ),
        'all'
    );
}
add_action( 'enqueue_block_assets', 'my_enqueue_block_assets' );

Use this article from CSS-Tricks as a reference for targeting different blocks in your stylesheet if needed.

Opinionated Styles

When using the Gutenberg block editor, default styles are loaded on both the admin and frontend sides. However, there are certain opinionated styles that need to be added manually. For instance, the default block quote won’t have a colored border on the left-hand side without enabling these styles.

To enable them, simply add add_theme_support( 'wp-block-styles' ) to your functions.php file like below.

<?php
function my_theme_setup() { 
  add_theme_support( 'wp-block-styles' ); 
} 
add_action( 'after_setup_theme', 'my_theme_setup' );

2. Block Specific Custom Styles

Customizing the visual appearance of blocks in the WordPress block editor is made possible by the register_block_style() function. This function allows developers to create custom styles for blocks, expanding users’ options to style and customize their content.

The register_block_style() function accepts three parameters: the block name, the style name, and an array of arguments defining the style properties. With this function, you can easily create a custom style for any block, such as the core/button block.

Here’s an example of how to use register_block_style() to achieve this.

<?php
function my_theme_register_button_styles() {
    wp_register_style(
        'my-theme-button-styles',
        get_stylesheet_directory_uri() . '/button-styles.css',
        array(),
        filemtime( get_stylesheet_directory() . '/button-styles.css' )
    );

    register_block_style(
        'core/button',
        array(
            'name' => 'my-theme-button-style',
            'label' => __( 'My Button Style', 'my_theme' ),
            'style_handle' => 'my-theme-button-styles',
            'style' => 'my-theme-button-style',
        )
    );
}
add_action( 'init', 'my_theme_register_button_styles' );

In this example, we’re registering a new style for the core/button block called my-theme-button-style.

Once you’ve registered the block style, users will be able to select it from the block editor’s style selector. The style will be applied to any core/button blocks that use the my-theme-button-style class.

Overall, register_block_style() is a powerful tool that allows you to create custom styles for blocks in the WordPress block editor, giving users more control over the appearance of their content.

3. Using theme.json

The theme.json file is a configuration file introduced in WordPress 5.8 that allows developers to customize the global styles and settings of a WordPress theme. It is a JSON file that defines a set of rules that determine how the theme should be displayed on the front end of the site.

With theme.json, you can customize a wide range of settings, including typography, colors, spacing, and layout. These settings can be applied globally to your theme, or you can specify different settings for specific blocks or block patterns.

Here are some of the key features and benefits of using theme.json:

  1. Consistency: With theme.json, you can ensure that your theme’s styles and settings are consistent across all blocks and block patterns. This can help to improve the overall design and user experience of your site.
  2. Efficiency: By defining global styles and settings in a single theme.json file, you can simplify the process of customizing your theme and reduce the amount of code required to achieve a consistent design.
  3. Accessibility: theme.json includes a range of accessibility-related settings, such as font size, line height, and color contrast. By using theme.json, you can ensure that your theme meets accessibility guidelines and is usable by as many people as possible.
  4. Flexibility: theme.json allows you to define different styles and settings for different blocks or block patterns, giving you greater flexibility and control over the appearance of your site.

Here’s an example of what the theme.json file might look like this:

{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 2,
    "settings": {
            "blocks": {
                "core/paragraph": {
                    "color": {
                        "palette": [
                            {
                                "name": "Blue",
                                "slug": "blue",
                                "color": "#0000FF"
                            }
                        ]
                    }
                }
            }
        }
    }        
}

In this example, we’re defining a set of global styles and settings for our theme. These include color, typography, spacing, and layout settings, as well as a custom setting called my-custom-setting.

We’re also specifying some block-specific styles and settings for the core/paragraph block. These override the global settings for this block, allowing us to customize its appearance separately from other blocks.

By using theme.json, you can create a consistent and accessible design for your WordPress site with less effort and more flexibility.

4. Theme & Plugin Styles

Theme and Plugin have a similar way to enqueue styles by using the wp_enqueue_style() method.

The below example shows how to enqueue the styles in Your Theme :

<?php
function my_theme_enqueue() {
    $version = filemtime( get_stylesheet_directory() . '/css/styles.css' ) ;
    wp_register_style( 
        'my_theme_main_css', 
        get_template_directory_uri() . '/css/styles.css', 
        array(), 
        $version
    );
    wp_enqueue_style( 'my_theme_main_css' );
}

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue' );

And the same way we can also enqueue the styles in the plugin. The only difference is, you have to use the plugins_url() method to point the path to the specific plugin’s stylesheet. See the example below:

<?php
function my_plugin_enqueue() {
    $file_path = plugin_dir_path( __FILE__ ) . 'css/styles.css';
    $version = filemtime( $file_path );
    wp_register_style( 
        'my_plugin_main_css', 
        plugins_url( '/css/styles.css', __FILE__ ), 
        array(), 
        $version
    );
    wp_enqueue_style( 'my_plugin_main_css' );
}

add_action( 'wp_enqueue_scripts', 'my_plugin_enqueue' );

Please note that here the styles.css file will load on the front end. But if you want to add some custom styles for the plugin’s interface under Admin, please use admin_enqueue_scripts hook instead of wp_enqueue_scripts hook as in the example below:

<?php
add_action( 'admin_enqueue_scripts', 'my_plugin_enqueue' );

4. Classic Editor Styles

To add custom styles to the Classic TinyMCE Editor in WordPress, developers can use the add_editor_style() hook. This allows users to see how their content will look on the front end while editing it from the admin panel.

Here is an example of how to implement add_editor_style() to add custom styles to the Classic TinyMCE Editor:

<?php
function my_plugin_add_editor_style() {
    $editor_style_url = plugins_url( 'css/editor-style.css', __FILE__ );
    $editor_style_path = plugin_dir_path( __FILE__ ) . 'css/editor-style.css';
    $editor_style_version = filemtime( $editor_style_path );
    add_editor_style( $editor_style_url . '?ver=' . $editor_style_version );
}
add_action( 'admin_init', 'my_plugin_add_editor_style' );

5. Admin Styles

To brand the WordPress Admin Panel or to style a plugin’s user interface, developers can use the admin_enqueue_scripts hook to add custom styles.

This hook can also be used to load styles on specific pages within the WordPress Admin, by adding conditions. Here is an example of how to do this:

<?php
function my_plugin_enqueue($hook) {
    if ( 'edit.php' === $hook ) {
        $file_path = plugin_dir_path( __FILE__ ) . 'css/edit_page_styles.css';
        $version = filemtime( $file_path );
        wp_register_style( 
            'my_plugin_main_css', 
            plugins_url( '/css/edit_page_styles.css', __FILE__ ), 
            array(), 
            $version
        );
        wp_enqueue_style( 'my_plugin_main_css' );
    }
}

add_action( 'admin_enqueue_scripts', 'my_plugin_enqueue' );

In this example, we are loading the edit_page_styles.css file only when the user is on the edit.php page.

Conclusion

By leveraging the various methods and tools that WordPress provides, you can create beautiful and highly customized websites that truly stand out. Whether you’re looking to brand your WordPress site or create a unique style for your plugin, there are many ways that you can use to achieve your goals. We hope that this article has been helpful in providing you with a better understanding of WordPress styling techniques and has inspired you to create even more stunning WordPress websites in the future.

←
→