Below you will find pages that utilize the taxonomy term “wordpress”
Posts
How to Display Custom Field Values in Wordpress Admin for Custom Post Types
Problem: Custom fields not visible in admin overview Have you ever struggled with the lack of visibility of custom fields in your WordPress admin dashboard, especially when working with custom post types? It can be challenging to quickly view the specific metadata associated with these posts. This is a common issue for WordPress developers and content managers who need a streamlined way to manage and display custom data. The good news is that with a bit of code, you can easily add custom columns to your admin dashboard to display these values.
Posts
Highlight search terms in Wordpress
To highlight search terms in the content in your Wordpress search result page, add the following function to your functions.php file:
function search_excerpt_highlight() { $content = get_the_content(); $content = wp_strip_all_tags($content); // Set the excerpt length $excerpt_length = 100; // You can adjust this value to your desired excerpt length $padding = 10; // Add padding around the search term $keys = explode(' ', get_search_query()); $first_key = $keys[0]; // Find the first occurrence of the search term $term_pos = stripos($content, $first_key); if ($term_pos !
Posts
Use Wordpress’ paginate_link function with custom html and tailwindcss
Wordpress’ paginate_link function image/svg+xml is pretty neat for generating pagination links without any hassle. It does not, however, give you easy control over the exact html output. This makes it hard for styling the list, list items and links when using tailwindcss as we cannot add the utility classes to the elements.
To make this easier, I wrote a little procedure that will do some string replacements that allows us to have more control over the classes that we want to use.
Posts
Wordpress custom blocks: Pass down attributes to child blocks
Suppose you are working on a set of interacting custom blocks in Wordpress. You have a child block that needs information from the parent block to display, in this situation, information about a specific record. In such a case you want to use Block context image/svg+xml .
Block context is a feature which enables ancestor blocks to provide values which can be consumed by descendent blocks within its own hierarchy.
Posts
Add JavaScript to a custom block in Wordpress
Using Wordpress custom blocks, I’m currently trying to create a popover component that contains a button and a hidden content. The hidden content should appear when the user clicks on or hovers over the button (on the frontend of the website, not in the block editor).
Problem However, when I add an onClick or onHover to the button, the event handler is not executed.
Additionally, trying to use the useState hook to store the display state of the popover crashes my block editor.
Posts
Check if a Wordpress constant has been defined
Suppose I have configured a constant in the wp-config.php of my website:
<?php /\* Super important configuration constant \*/ define('SUPER\_IMPORTANT\_VALUE', '123e4567-e89b-12d3-a456-426614174000'); ?>Whenever you want to use this value in your website, it would be nice to know if the constant has been defined already. You’d expect to be able to do this using something like:
<?php /\* !empty does not work for a constant \*/ if (!empty(SUPER\_IMPORTANT\_VALUE)) { // Do stuff } ?
Posts
Insert a Google Analytics sitetag in Wordpress using a constant defined in wp-config.php
First, define your Google Analytics constant in wp-config.php:
// wp-config.php /\* Google Analytics Key \*/ define('GOOGLE\_ANALYTICS\_KEY', 'G-XXXXXXXXXX'); Then, insert the following gist inside the <head> of your website (header.php in my case):
// header.php (for example) <?php if (defined('GOOGLE\_ANALYTICS\_KEY')) { ?><!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=<?php echo GOOGLE\_ANALYTICS\_KEY; ?>"></script> <script> window.dataLayer = window.dataLayer || \[\]; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', '<?
Posts
Wordpress cannot send emails to email addresses on its own domain
Imagine the following situation: You have a Wordpress website hosted on example.com. The host has a Plesk configuration panel. Your email is handled by Google Workspace. MX records have been configured for this in Plesk, as described here image/svg+xml . The website has a contact form that should send an email to you, the owner of the website, on info@example.com.
But… the emails are not arriving.
Posts
How to quickly add multiple colors to your Wordpress theme customizer
I am currently working on dark mode support for a Wordpress theme. For that, the website will need to use different colors depending on the preference of the user. At the same time, I want those colors to be easily customizable through Wordpress' Customizer.
What I don’t want, however, is 500 lines of code just to add a few colors. The hooks for adding Wordpress customizer settings image/svg+xml and controls image/svg+xml are no one-liners.
Posts
Organize your Wordpress theme's functions.php by using namespaces and classes
As you can extend your Wordpress theme by adding actions to the theme’s functions.php, it is safe to say that it is very easy to bloat this file with hundreds of lines of code.
The nasty thing is that the usual advice is to write a function and then add that function as an action by passing the function’s name as a string. That would look something like this:
<?php // file: functions.
Posts
Preserve line breaks from a textarea in Wordpress
Today, I have added some customization settings to a Wordpress website. One of these settings consisted of a textarea input that would be used to enter and display an address. When I wanted to display the address, however, the address was displayed as one single line where it should have been displayed on three lines (Street + number, postal code, city).
// Incorrect code: <?php $address = get\_theme\_mod('address', ''); if ($address) { echo $address; } ?
Posts
How to keep Flywheel Local and your repository separated using symlinks
Since a while, I have been using Flywheel’s Local for my local WordPress development server and it has been. No time spend on configuration Docker, Apache, database connections, et cetera.
However, one thing that has been bugging me is the question of how to combine Local’s configuration and my own code, which contains my WordPress themes and plugins. As Local creates its own WordPress folders (wp-content etc.) inside its configuration folders, how should I approach such a situation?
Posts
Force HTTPS on your WordPress website
You have finally installed that SSL certificate to your website and now the website keeps hanging in an unsafe http connection. What is up with that?
To force a HTTPS connection, we only have to add some lines to the .htaccess file, which is located in the root of the public html folder of your WordPress website:
.htaccess is located in the public html folder of your WordPress website, which is the same folder that contains the wp-admin, wp-content, and wp-includes folder.
Posts
Add and display a setting to your Wordpress child theme
My client asked me to show a short message above every page and post and wished to be able to modify this text himself through the theme customizer.
Now, this is not too hard and I have done it multiple times before, but I keep forgetting the specifics. This post is therefore meant as a quick cheatsheet for myself, but maybe it will help you, anonymous internet user, as well.
Posts
Combine custom post types in one blog page
If you, like me, are using Pods image/svg+xml to create custom post types, you might have noticed that the post types created using Pods do not appear on your blog page by default. This is because Wordpress only queries posts with the post type post by default.
Now, you may not even want to display your pods on the blog page, but if you do, there are several ways to do this (and the choice is yours).
Posts
Sorry, this file type is not permitted for security reasons.
Today, I wanted to upload a WebP image/svg+xml image to a Wordpress website, because we all know WebP is the superior image format image/svg+xml nowadays.
Unfortunately, Wordpress currently (I am using 5.7.2) does not support it. Wordpress 5.8, however, is said to support WebP.
At the moment of writing, Wordpress 5.8 has not been released yet. So, if you cannot wait until the release of Wordpress 5.
Posts
How to combine Webpack, Tailwindcss & Wordpress using webpack-watch-files-plugin
For my client I am currently building a website that makes use of tailwindcss image/svg+xml , a utility-first image/svg+xml CSS framework. With utility classes you can directly style elements using classes such as text-center (center the text) or bg-red-600 (red background, shade 600). Tailwindcss contains a lot of those classes and also allows combining breakpoints with these classes, such as md:font-bold (make font bold on medium sized devices or larger).
Posts
Copy and modify the custom header of a Wordpress parent theme to a child theme
For a client I am currently creating a new website in Wordpress. To speed up design, I am basing my own Wordpress theme on an existing theme: Twenty Thirteen image/svg+xml . It is fairly old already (2013), but I like the general layout with a header and navigation on top.
Whenever you upload a header image in this theme, the image would be displayed over the full width of the page.