Category: Snippets
-
WordPress – Empty title placeholder
When managing a WordPress website, content editors and authors sometimes leave the title field blank, which can lead to confusion and a lack of consistency in the user interface. To address this issue, the following WordPress snippet automatically adds a placeholder text (No title) when a page or post title is left undefined. The Code…
-
SCSS – Simple checkbox styling
Styling checkboxes in CSS often requires additional HTML elements or complex workarounds. However, this method simplifies the process by leveraging pseudo-elements directly within the input[type=’checkbox’] element, eliminating the need for extra HTML modifications. SCSS Magic The magic happens in the SCSS, where custom properties are declared for easy styling. The input[type=’checkbox’] is targeted directly, with…
-
JavaScript – Set Scrollbar Size as a CSS Variable
Managing layout shifts and space allocation in web design can be tricky when considering the variable size of scrollbars across different browsers and operating systems. This JavaScript function, dynamically calculates the size of the scrollbar and sets it as a CSS custom property, making it easier to handle layout adjustments. Function Overview The function putScrollbarSizeInCSSVariable…
-
WordPress – Environment Indicator
When managing multiple environments for a WordPress website, such as development, staging, and production, it’s crucial to differentiate between them to prevent mistakes like applying changes to the live site instead of a test environment. The following PHP snippet provides a visual cue in the WordPress admin dashboard to indicate the current environment type. This…
-
WordPress – Customize Page Title
In the realm of WordPress, altering the title of a page dynamically can be an essential customization to better reflect the content or the branding of the site. The following PHP snippet demonstrates how to change the page title using a WordPress filter hook. Code This snippet leverages the pre_get_document_title filter, which allows developers to…
-
SCSS – Media & Container Queries
Introduction to Responsive Design Variables To kickstart a responsive design, a set of predefined breakpoints is essential. These breakpoints serve as the foundation for media and container queries that adjust styles based on viewport sizes or container dimensions. The SCSS snippet below defines a map of breakpoints: Responsive Design Snippet The SCSS snippet provided offers…
-
Javascript – Simplified AJAX Request functions
This JavaScript module introduces a concise and flexible way to handle HTTP requests with a primary request function and specialized get and post helper functions. The system is designed to support both GET and POST methods with easy parameter management and response formatting. Function Definition The request function serves as the core utility, enabling: Usage…
-
WordPress – Updating site URL directly in the Database
Introduction When moving a WordPress website to a new domain, it’s crucial to update the site’s URL to ensure that all references point to the correct location. This can be accomplished directly in the database using a series of SQL statements. SQL Update Statements The following SQL commands are designed to update various parts of…
-
SCSS – Color management unified approach
Introduction In digital design, colors convey meaning, set mood, and create coherence. Managing colors effectively across a project can be challenging, especially when dealing with multiple color formats such as HEX, RGB, and HSL. Our SCSS solution simplifies this by consolidating various color types into a single, manageable collection. The $colors Map We begin with…