Sometimes it amazes me the powerful things we can do with CSS. Recently, I needed to make an element pulse (i.e. grow and shrink repeatedly). I was able to do this with a few lines of CSS without using any JavaScript.
When working with a WordPress image, I wanted the attributes for the image. The function `wp_get_attachment_image()` provides me everything I need but in a rendered HTML string, rather than a more useful array of attributes. I was surprised I was unable to locate a good way to get this information, so I wrote this code to help me.
I like to use the Scriptless Social Sharing WordPress plugin to add Share buttons to my blog posts. Recently I had a client notice that because the Email Share button has target=”_blank” in the HTML markup, it opens a new tab when clicked. This is great behavior if you’re using web based email (e.g. Gmail), however if you’re using an email application on your computer, you end up with a blank tab. This code removes target blank from the email share link.
I’ve been using Local by Flywheel for my local WordPress development and I wanted to use Xdebug with Visual Code Studio with it. These are the notes I’ve made for myself in case I need to set this up again in the future.
When working on a project, using Gravity Forms and Bootstrap, I wanted to style the buttons with Bootstrap. This code allows me to modify the markup output by the Gravity Forms WordPress plugin to use the Bootstrap classes.
By default the Wordpress Genesis theme framework loads the jQuery Superfish Menu Plugin to help the menu display properly. If you’re displaying your menu in a way that doesn’t need Superfish, you can remove it with the following code.
I often find it helpful to add a label to the Featured Image area in the WordPress admin. By guiding clients to upload the appropriate sized image, it lets me avoid them being surprised by WordPress cropping their image in an unexpected way.
It is common for articles on writing WordPress code to refer to adding the code to the functions.php file in the active theme. This is one location where code can be added but it isn’t always the best. Places to Add WordPress Code a new file in wp-content/mu-plugins a new plugin in wp-content/plugins the functions.php […]
With the prevalence of large monitors, I’ve found I wanted a larger container size than the default in Bootstrap 4, which is 1140px. Fortunately, working with the Bootstrap 4 Sass code it only takes a few lines of code to add an additional container size (and breakpoint to go with it).
Images that appear wider than the text around them are a cool design technique. I do a lot of work with Bootstrap and unfortunately, I’ve found that getting this to work usually ends up with markup that leaves me unsatisfied – at least until now. Using this technique, we can get a full width image without first closing the container element.
