Along with my useful tools page, I have created a list of useful PHP, HTML, CSS and JS snippets that I've used in the past. Such as PHP for giving WordPress Editors access to the menus but not to the customiser, theme editor, etc and using jQuery to hide elements on the page to enhance the design.
I am comfortable with, but by no means an expert, in writing HTML/CSS so there may be a more efficient way of doing things. My knowledge of PHP is very little so the PHP snippets that are included here have come from either Googling for an answer to a problem or our lead developer at Mackman. My JS is better than my PHP, so I'm usually able to muddle my way through it and adapt other peoples code to fit my problem.
All of the snippets I've included below have links to a demo on Codepen so you can play around with them for a bit of fun or tweak them to fit your needs before implementing them in your own project. If you spot any problems in my code or find a better way to achieve the same outcome let me know and I'll update this page.
HTML Code Snippets
Here are some useful HTML snippets that I've used on this site, client sites or just general projects where I've played around with HTML.
HTML 5 Accordion
When building this site I wanted to use an accordion for my useful marketing tools section so that I could add all my tools to a single page without making people endlessly scroll through content. There were loads of JS accordions out there however I didn't want to impact my site speed by introducing more JS than necessary so I found a helpful snippet that allowed me to have the same effect without the speed penalty.
This example also includes the CSS I'm using to style the accordion but if you need help changing it to suit your design let me know and I'll do my best to help. I haven't been able to add the accordion HTML/CSS below as it conflicts with this accordion however you can view it all on Codepen below.
View On Codepen: HTML 5 Accordion
Javascript Code Snippets
Here are some useful javascript code snippets that I've used in the past. If you need any help with implementing these just let me know!
Hide Element With jQuery
Using this code you can target and remove specific elements from the page. You can either target just the element if it's unique or you want to remove it site wide such as social icons or you can target by element and class to remove specific elements.
For example, I've used this to remove WooCommerce add to cart and checkout buttons during COVID-19 so that people could still browse the store however they weren't able to purchase anything. I've also used it to hide strings such as "No Items Found" when there aren't any related blog posts.
View On Codepen: Hide Element With jQuery
CSS Code Snippets
Here are some useful CSS code snippets that I've used in the past. If you need any help with implementing these just let me know!
Reverse WordPress Gutenburg Columns
For the Photography page on my website I have used a Z layout by using text and images in an alternating fashion. This works well on desktop but on mobile it causes images to stack on top of each other and looks messy and uneven. To fix it I needed to reverse the Gutenburg columns with some CSS so that it functioned on both desktop and mobile devices. This one is hard to show on Codepen as it requires me to copy the full page HTML and this will cause duplicate content issues but I have added the CSS and you can see it in action on my photography page.
View On Codepen: Reverse Gutenburg Columns