wordpress – Matt Jones Tech

Enqueue Stylesheets in a WordPress Block Theme
Today we’re going to take a look at how to enqueue stylesheets in a WordPress block theme. My main stylesheet for a newly created custom WordPress block theme wasn’t loading after several tries and I couldn’t figure out what was going on.

Every search result was just saying , “Oh, you gotta enqueue your stylesheet, just paste this code in…” but it never worked, even after replacing the parts where you had to specifiy the filename and filepath specific to the sheet you’re trying to load.

The Root of My Problem

After several tries, I finally figured it out. My problem wasn’t with wp_enqueue_style(), but rather get_template_directory_uri() and get_stylesheet_uri(), both of which are frequently used to enqueue stylesheets in a wordpress block theme.

get_stylesheet_uri() returns the the actual file named style.css (required to have a theme)

get_stylesheet_directory_uri() returns the filepath to the root of your theme directory (without the trailing slash), so example output would be yourdomain.com/wp-content/themes/your-theme-name

And if that wasn’t enough, there’s one more bit of key information about get_stylesheet_directory_uri():

In the event a child theme is being used, this function will return the child’s theme directory URI. Use get_template_directory_uri() to avoid being overridden by a child theme

Anyway, all that said, if your stylesheet isn’t loading right off the bat, be sure to double check which functions you’re calling in addition to wp_enqueue_style() just to make certain you’re actually pointing to the stylesheet or JS file you’re trying to load.
```
/*
Theme Name: Twenty Twenty
Theme URI: https://wordpress.org/themes/twentytwenty/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Our default theme for 2020 is designed to take full advantage of the flexibility of the block editor. Organizations and businesses have the ability to create dynamic landing pages with endless layouts using the group and column blocks. The centered content column and fine-tuned typography also makes it perfect for traditional blogs. Complete editor styles give you a good idea of what your content will look like, even before you publish. You can give your site a personal touch by changing the background colors and the accent color in the Customizer. The colors of all elements on your site are automatically calculated based on the colors you pick, ensuring a high, accessible color contrast for your visitors.
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready
Version: 1.3
Requires at least: 5.0
Tested up to: 5.4
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwenty
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
```
Just a side note, apparently style.css that sits in the root of your theme directory exists for the sole purpose of registering the theme name, author, version, and all that. It’s never intended to hold the actual style code for the theme (I think).

It might work for you, but the minute I tried to enqueue the style.css file that contained all the registration info, it immediately broke the entire site. Of course, I could have been enqueuing it incorrectly too. Anyway, just a thought.

Enqueue Stylesheets Update (8/10/22):

I recently discovered that putting all my child theme styles in an external stylesheet and enqueuing it from a subdirectory via functions.php has caused some strange issues for me when I try to use the Divi Builder.

It appears that this method of loading child theme stylesheets prevents the CSS from loading in the visual builder.

This issue has caused me to rethink my strategy when it comes to enqueuing stylesheets. I have since moved all my styling rules to the primary style.css (used to register the theme) and ditched the function call that enqueues the stylesheet from the child theme’s subdirectory. This move solved all the issues I was experiencing with the visual builder, but I’m still not sure what I was breaking and how I was breaking it.
matt

August 1, 2022

Web Design, Web Development

web development, wed design, wordpress
Using WP_Query() to sort datetime meta_value
Just like the title suggests, I’ve spent the last several hours struggling with meta_query to return CPTs based on some datetime picker meta_value. Let me explain my setup.

I’m writing a plugin that stores data from a custom_post_type for gym classes with a handful of custom fields put into place using ACF. One of those custom fields is gym_class_date which contains the output from a jQuery datetime picker. Here’s a look at my broken code:
```
 $today = date(‘Ymd H:i:s’);

 


 $MJCalendar = new WP_Query(array(

 ‘post_type’ => ‘gym_class’,

 ‘posts_per_page’ => –1,

 ‘meta_key’ => ‘gym_class_date’,

 ‘orderby’ => ‘meta_value’,

 ‘order’ => ‘ASC’,

 //only return upcoming classes, not classes in the past

 ‘meta_query’ => array(

 array(

 ‘key’ => ‘gym_class_date’,

 ‘compare’ => ‘>=’,

 ‘value’ => $today,

 )

 )

 ));

 


 while($MJCalendar->have_posts()) {

 $MJCalendar->the_post();
```
When I ran the code, the resulting output was… nothing. So what gives?

I burned an entire Sunday scratching my head over this and I finally figured it out. Here was my problem:

ACF always stores datetime values in an EXTREMELY specific way: 'YYYY-MM-DD HH:ii:ss'. And I mean specific. Even though earlier in my code, I defined $today = date('Ymd H:i:s');… it was just wrong enough to break literally everything. Turns out, 20210116 16:37:24 does NOT equal 2021-01-16 16:37:24.

Adding some simple dashes to my $today = date('Y-m-d H:i:s'); declaration made everything magically start working again.

That’s gonna do it for this post, I know it’s a bit of a short one, but it took me FOREVER to figure out this stupid detail. Note to self, and hopefully to you, when you’re comparing two datetime values with a meta_query, for Pete’s sake, make absolutely sure that your format is perfectly the exact same as the format coming from the database. Otherwise, none of your comparison operators will work.
matt

January 8, 2021

Web Design, Web Development

code, php, wordpress, wp_query()
Divi Visual Builder Not Loading

Divi Visual Builder Not Loading…

Divi Visual Builder not loading? I recently installed Divi on a new server and realized that in doing so, I strangely couldn’t access the Divi Visual Builder anymore… The Divi Visual Builder just sat there and spun forever.

Oh boy…

So upon further inspection… I open up the console to see what was going on. To my surprise (or maybe unsurprisingly?) there were TONS of errors in the log. All of them were, in one way or another, pointing to the fact that:

uncaught reference error: jQuery undefined

jQuery undefined? What gives? The WordPress Core comes bundled with tons of JavaScript libraries… jQuery being one of them. So why can’t it be found?

One solution suggested on the web was heading over to the Divi theme options and enabling the classic editor. Apparently there were a few issues with the transition to WordPress 5.0, the new Gutenberg editor, and compatibility with Divi… I haven’t experienced any issues since the transition to 5.0, but you can check out more info on that topic here.

However, for my situation, enabling/disabling the classic editor didn’t work for me. I was still missing jQuery either way, and the Visual Builder was still just….

Yeah.

So here’s the solution that worked for me

In my particular situation… I was running traffic to my WordPress server through Cloudflare. Not everyone does this, and it’s not always the source of many problems, but for this particular case, it was the issue for me.

Inside my Cloudflare settings, I went to the Speed tab at the top:

Then click ‘Optimization’ below that:

And scroll about halfway down the page, and make sure that the Rocket Loader setting is disabled.

After that, I was able to refresh my WordPress site, click ‘Enable Divi Builder’ and voila!

Hope that helps! If you’re interested, check out more random solutions to random problems by visiting the rest of my blog

matt

September 27, 2020

Web Design, Web Development

cloudflare, divi, theme, wordpress
What is HTML?
What is HTML? Hypertext Markup Language is the standard way to format text for use on web pages. So if you ever find yourself needing to edit a webpage or create one from scratch, this is the most basic way to display anything on a page.

Basic Structure

HTML is broke up into several different elements, noted by tags. You can write anything you want on your web page, but these tags are at the core of HTML and are used to give your text its structure. Tags are noted with angle brackets <> and wrap around the text that it affects. It should be noted that the tags need to go in a specific order, like so:
```
<!DOCTYPE html>
<html>
     <head>
          <title>Page Title</title>
     </head>
     <body>
          <h1>Heading</h1>
          <p>Paragraph text.</p>
     </body>
</html>
```
Let’s break that down. The first tag is <!DOCTYPE html> and that’s just a one-time declaration to help the computer understand that it’s about to read an HTML document. That way, it knows what to expect. You don’t need to close this tag.

Next, it’s the <html> tag. Everything, the whole page, is contained inside this tag.

The <head> tag is where you keep file path references associated files, like CSS files for styling, Javascript files for functions, and other page metadata like titles. The <head> tag closes with a forward slash and closes out all the page metadata before the <body> tag begins.

Finally, the <body> tag surrounds the main content of your page. Inside this tag, you’ll find lots of tags like <p> (paragraph text), <h1> (largest header text) through <h6> (smallest header text), <ul> (unordered list AKA bullet points), <ol> (ordered list AKA numbered), <a> (anchor tag, used for making clickable links) and <form> for forms. There are several more, but those are some of the most common tags you’ll find.

Why Tags?

These tags server two main purposes. The first and primary purpose is to tell your web browser how to interpret all the text coming from a web page. Is it a title? A paragraph? A list? Table? This provides the overall structure of the page. HTML is often referred to as the “skeleton” of the web page. It’s functional, but not necessarily the most beautiful thing out there.

Additionally, tags provide a great element that CSS files can use to apply style. So instead of applying a style to ALL text in an HTML document, CSS can select just the headings (<h1> tags) and apply styles to just the text inside those element tags.

That’s it for the basics! There are tons of free online courses and videos out on the web to help help get to grips with the basics of web design and development. In this day and age with so much of our lives existing on the internet, it definitely doesn’t hurt to know some of the basics of how the web works.
matt

March 5, 2019

General Computing, Linux, Web Design, Web Development

computing, internet, linux, portfolio, web design, web development, website, wordpress

Enqueue Stylesheets in a WordPress Block Theme

The Root of My Problem

Enqueue Stylesheets Update (8/10/22):

Using WP_Query() to sort datetime meta_value

Divi Visual Builder Not Loading

Divi Visual Builder Not Loading…

So here’s the solution that worked for me

What is HTML?

Basic Structure

Why Tags?