Scripts and stylesheets in WordPress sites

WordPress is used by many different audiences. It is used by people who do not know much about code, as well as by experienced programmers¹. Expectations of plug-ins therefore vary.

Some want plug-ins to automatically do everything. If they use a plug-in to integrate their Twitter stream into WordPress, they expect the plug-in to not only pull tweets from the Twitter API, they also want the necessary mark-up and CSS to display tweets in the front-end. Others will only expect a plug-in to do a specific task, leave front-end hooks for developers to output data surrounded by their own mark-up, styled by their own CSS and made interactive with their own scripts.

My ideal WordPress plug-in is of the latter type. I write my own templates (mark-up, stylesheet and scripts). Then, in the mark-up, I simply replace all dummy strings of text with template tags. My ideal Twitter plug-in, for example, would take care of fetching tweets from Twitters API, and it would then expose an API to output tweet data (the tweet itself, its date, its author, avatars etc), allowing a developer to output the relevant strings of text where required.

When I add a new plug-in (or a client requests one to be installed), I have made it a habit to make sure it does not add any CSS or JavaScript (plug-ins can add assets through wp_head() and wp_footer()). If it does, I usually undo the behaviour and add CSS or script to fit within the existing code.

¹ And some experienced programmers will never touch WordPress (different discussion)

Hidde de Vries (@hdv) is a freelance front-end and accessibility specialist in Rotterdam (NL), conference speaker and workshop teacher. Currently, he works for the W3C in the WAI team (views are his own). Previously he was at Mozilla, the Dutch government and various other organisations and businesses.

Follow @hdv on Twitter Book a workshop

Comments & mentions (3)

Vasilis 27 Dec 2015 08:28:29

I was wondering how you make sure that plugins don’t add any scripts or stylesheets. Is there a clever way to do this? Does wordpress have a function to overwrite this behaviour? Or do you have to manually change the plugin — and do so again after every update?

Hidde 27 Dec 2015 09:45:54

@Vasilis: Many plugins use WordPress built in functions that can be overwritten (common are wp_register_script(), wp_register_style(), wp_enqueue_script() and wp_enqueue_style() -- see also this blogpost). This does not change plugins themselves, so you can safely update after. Some plugins offer booleans that can be set to turn off their asset loading, they usually document how this can be done. You can also omit template wp_head() and wp_footer() from your templates completely, but that may leave you with unexpected results as then not only your plugins can’t add their own assets, you can’t either.

Rik Schennink 27 Dec 2015 12:16:31

As someone who sells builds and sells WordPress plugins this is excellent info. Have added the option to turn off asset loading to my todo list for Soon.