Exploring WordPress Styling Techniques

When performing WordPress theme and plugin development work, we must apply WordPress styling techniques 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 area.

WordPress is a popular content management system (CMS) that powers over 43% of websites 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 needs.

WordPress Styling

When developing a WordPress theme or plugin, one of the critical aspects is styling. It’s essential to ensure the website looks visually appealing, and the design is consistent throughout. This can be achieved through cascading style sheets (CSS), which dictate how the HTML elements are presented on the page.

However, styling a WordPress website can be complex, especially for those new to web development. Several different methods can be used to apply styles to various parts of the website, including the frontend, content editor, plugins, and admin areas.

Continue reading, and we will explore WordPress styling techniques and the different methods available for adding styles to each area. We will cover everything from basic CSS rules to advanced techniques like hooks and filters.

By the end of this article, you will have a comprehensive understanding of applying styles to different parts of a WordPress website and be well on your way to creating a fully customized and visually stunning website. These are the places where styling is required, which we’ll cover in this blog post:

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 essential aspect of developing a WordPress website. Adding your own custom styles 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:

See the gist on github.

If you want to update the frontend as well, change the code slightly, as shown below:

See the gist on github.

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, certain opinionated styles 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, add add_theme_support( 'wp-block-styles' ) to your functions.php file like below.

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 block styles, 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.

See the gist on github.

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 can 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 a WordPress theme’s global styles and settings. 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 improve your site’s overall design and user experience.
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 other 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:

See the gist on github.

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

Themes and plugins 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:

See the gist on github.

In 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:

See the gist on github.

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:

add_action( 'admin_enqueue_scripts', 'my_plugin_enqueue' );

5. Classic Editor Styles

Developers can use the hook to add custom styles to the Classic TinyMCE Editor in WordPress. 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:

See the gist on github.

6. 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:

See the gist on github.

In this example, we only load the file when the user is on the edit.php page.

Conclusion

By leveraging WordPress styling techniques, 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 this article has helped provide you with a better understanding of WordPress styling techniques and inspired you to create even more stunning WordPress websites in the future.