• Skip to primary navigation
  • Skip to main content
Sal Ferrarello
  • About Sal Ferrarello
  • Speaking
  • Connect
    Mastodon GitHub Twitter (inactive)
You are here: Home / Dev Tips / WordPress Development Overlay

WordPress Development Overlay

Last updated on July 14, 2018 by Sal Ferrarello

When doing WordPress theme development I find it helpful to overlay an image of the approved design on top of the code I’m working on. I use a reduced opacity on the image so I can see the code I’m working on. This helps me match things like font size and spacing.

I’ve been doing this for a number of years with some code snippets I’ve written. I decided to re-architect this, moving most of the work into JavaScript, and pull it together in a plugin.

You can find the code at https://github.com/salcode/development-overlay.

The nice thing about moving the logic into JavaScript is now I can pass along URL parameters to switch between images (or nudge the image one direction or another).

e.g.
https://example.test?src=another-image.jpg
https://example.test?src=another-image.jpg&left=-20
Sal Ferrarello
Sal Ferrarello (@salcode)
Sal is a PHP developer with a focus on the WordPress platform. He is a conference speaker with a background including Piano Player, Radio DJ, Magician/Juggler, Beach Photographer, and High School Math Teacher. Sal can be found professionally at WebDevStudios, where he works as a senior backend engineer.

Share this post:

Share on TwitterShare on FacebookShare on LinkedInShare on EmailShare on Reddit
Warning! This is a draft, not a finalized post. See full draft disclosure.

Filed Under: Dev Tips, Draft, Solution Tagged With: JavaScript, WordPress Plugin, WordPress Theme

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Copyright © 2023 · Bootstrap4 Genesis on Genesis Framework · WordPress · Log in