linux4me2
Forum Replies Created
-
Forum: Plugins
In reply to: [LiteSpeed Cache] WooCommerce Mini Cart ProblemsHi @qtwrk, thanks for taking the time to look at this.
The short version: I created the mini cart in 2023 by editing the header template part, adding a row above the site name and navigation row, and using the WooCommerce Mini Cart Widget.
The long version:
- On a site with WooCommerce installed and the Twenty Twenty Three theme active, go Admin > Appearance > Editor.
- Click Template Parts in the left sidebar.
- Click Header.
- Click the pencil icon to the right of the “Header” title in the left sidebar to enter the “edit” mode for the header template part.
- In the toolbar at the top of the Editor, click on the three, staggered horizontal lines (or use the shortcut keys Shift+Alt+O) to open List View.
- Click the down-arrow to the left of the first group listed in the List View sidebar to expand the group.
- Hover your cursor over the first row listed in the group, click the kebab (Options) menu that appears at the right on hover, and choose “Insert before.”
- The Editor will add a paragraph block by default.
- Click the plus sign in the paragraph block the Editor added and type “row” in the Search box, then select Row to convert the paragraph block to a row block.
- Click the plus sign in the row, type “mini cart” in the Search box, then select it to insert the Mini Cart block in the row.
- Click the Save button at top right (probably twice) to save your changes.
That isn’t the only method with the Editor, but it will get you a quick-and-dirty Mini Cart block to test. Note that by default, the Mini Cart block is hidden on the Cart and Checkout pages. You can change that in the settings for the Mini Cart block you added by clicking the Mini Cart block to select it and opening the Settings right sidebar–if it’s not already open–by clicking the Settings icon just to the right of the Save button at top right of the Editor.
When you’re done testing, you can remove all your changes and revert to the default settings by returning to edit the header template part, and at the middle of the top of your screen, click on “Header.” Make sure that “header” is selected in the Area drop-down, and click the option to “Clear customizations.”
Forum: Plugins
In reply to: [LiteSpeed Cache] WooCommerce Mini Cart ProblemsThanks for the quick response @qtwrk.
I’ve added that to my .htaccess and begun a new validation with Google Search Console. I’ll post here about how it goes after I hear back from Google.
Thanks for the kind words @jordesign.
I have come up with a newer version of the solution that uses PHP output control functions to intercept the output of WordPress’s
block_header_areaandblock_footer_areafunctions, which might be a safer alternative than using my custom function:<?php /** * This is a test custom template for Twenty Twenty Three. * * Template Name: Test Custom Template * */ ?> <!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo('charset'); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <?php $title = get_the_title(); $site_name = get_bloginfo('name'); $page_title = $title . ' - ' . $site_name; ?> <title><?php echo $page_title; ?></title> <?php /* You have to run the do_blocks() between the <head></head> tags in order for WordPress to load the corresponding CSS. */ ob_start(); block_header_area(); $str = ob_get_clean(); $block_header = do_blocks($str); // Spacer block. $str = '<div style="height:32px" aria-hidden="true" class="wp-block-spacer" ></div>'; $block_spacer = do_blocks($str); // Content block. $block_content = do_blocks( '<!-- wp:group {"layout":{"type":"constrained"}} --> <div class="wp-block-group"> <!-- wp:post-content /--> </div> <!-- /wp:group -->' ); ob_start(); block_footer_area(); $str = ob_get_clean(); $block_footer = do_blocks($str); wp_head(); ?> </head> <body <?php body_class(); ?>> <?php wp_body_open(); ?> <div class="wp-site-blocks"> <header class="wp-block-template-part"> <?php echo $block_header; ?> </header> <main class="wp-block-group"> <div class="wp-block-group has-global-padding is-layout-constrained"> <h1 class="wp-block-post-title"> <?php echo $title; ?> </h1> </div> <?php echo $block_spacer; echo $block_content; echo $block_spacer; ?> <div class="wp-block-group has-global-padding is-layout-constrained"> <div class="entry-content wp-block-post-content is-layout-flow"> <?php echo '<p>Here is some text from PHP.</p>'; ?> </div> </div> <?php echo $block_spacer; ?> </main> <footer class="wp-block-template-part site-footer"> <?php echo $block_footer; ?> </footer> </div> <?php wp_footer(); ?> </body> </html>It’s a little less code, and I think the database calls will be a wash. It might also be safer going forward in case WordPress changes the way it keeps the edited header and footer in the database.
I’ve got a solution that actually pulls the most-recent template parts (header and footer) from the database and allows them to be run through
do_blocksin the<head></head>tags so that the necessary CSS is loaded, which fixes the problems with the version above.I’m not sure this is the best approach, but I couldn’t find a function built into WP that does what I needed, so I wrote my own, included at the top of the sample:
<?php /** * This is a test custom template for Twenty Twenty Three. * * Template Name: Test Custom Template * */ /** * Retrieves the latest template part from the database. * * @param @string $name The name of the template part. * * @return HTML for the template part. */ function getTemplatePart($name) { global $wpdb; $results = $wpdb->get_row( $wpdb->prepare( "SELECT post_content FROM $wpdb->posts WHERE post_name = %s AND post_type = %s AND post_status = %s ORDER BY ID DESC LIMIT 1", $name, 'wp_template_part', 'publish' ), ); if ($results) { $str = $results->post_content; } else { // Get the default template part. $str = '<p>Default template part not found.</p>'; $filename = get_template_directory() . '/parts/' . $name . '.html'; if (file_exists($filename)) { $str = file_get_contents($filename); if ($str === false) { $str = '<p>Could not get template part contents.</p>'; } } } return $str; } ?> <!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo('charset'); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <?php $title = get_the_title(); $site_name = get_bloginfo('name'); $page_title = $title . ' - ' . $site_name; ?> <title><?php echo $page_title; ?></title> <?php /* You have to run the do_blocks() between the <head></head> tags in order for WordPress to load the corresponding CSS. */ $str = getTemplatePart('header'); $block_header = do_blocks($str); // Spacer block. $str = '<div style="height:32px" aria-hidden="true" class="wp-block-spacer" ></div>'; $block_spacer = do_blocks($str); // Content block. $block_content = do_blocks( '<!-- wp:group {"layout":{"type":"constrained"}} --> <div class="wp-block-group"> <!-- wp:post-content /--> </div> <!-- /wp:group -->' ); $str = getTemplatePart('footer'); $block_footer = do_blocks($str); wp_head(); ?> </head> <body <?php body_class(); ?>> <?php wp_body_open(); ?> <div class="wp-site-blocks"> <header class="wp-block-template-part"> <?php echo $block_header; ?> </header> <main class="wp-block-group"> <div class="wp-block-group has-global-padding is-layout-constrained"> <h1 class="wp-block-post-title"> <?php echo $title; ?> </h1> </div> <?php echo $block_spacer; echo $block_content; echo $block_spacer; ?> <div class="wp-block-group has-global-padding is-layout-constrained"> <div class="entry-content wp-block-post-content is-layout-flow"> <?php echo '<p>Here is some text from PHP.</p>'; ?> </div> </div> <?php echo $block_spacer; ?> </main> <footer class="wp-block-template-part site-footer"> <?php echo $block_footer; ?> </footer> </div> <?php wp_footer(); ?> </body> </html>Forum: Developing with WordPress
In reply to: PHP-Based Custom Page Templates In Block Themes?Okay, I found a fix, though I still am not sure this is the best approach.
I could not find a built-in WordPress function that retrieves the current header/footer from the database that doesn’t echo it instead of returning it, so I built my own and altered the custom page layout accordingly:
<?php /** * This is a test custom template for Twenty Twenty Three. * * Template Name: Test Custom Template * */ /** * Retrieves the latest template part from the database. * * @param @string $name The name of the template part. * * @return HTML for the template part. */ function getTemplatePart($name) { global $wpdb; $results = $wpdb->get_row( $wpdb->prepare( "SELECT post_content FROM $wpdb->posts WHERE post_name = %s AND post_type = %s AND post_status = %s ORDER BY ID DESC LIMIT 1", $name, 'wp_template_part', 'publish' ), ); if ($results) { $str = $results->post_content; } else { // Get the default template part. $str = '<p>Default template part not found.</p>'; $filename = get_template_directory() . '/parts/' . $name . '.html'; if (file_exists($filename)) { $str = file_get_contents($filename); if ($str === false) { $str = '<p>Could not get template part contents.</p>'; } } } return $str; } ?> <!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo('charset'); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <?php $title = get_the_title(); $site_name = get_bloginfo('name'); $page_title = $title . ' - ' . $site_name; ?> <title><?php echo $page_title; ?></title> <?php /* You have to run the do_blocks() between the <head></head> tags in order for WordPress to load the corresponding CSS. */ $str = getTemplatePart('header'); $block_header = do_blocks($str); // Spacer block. $str = '<div style="height:32px" aria-hidden="true" class="wp-block-spacer" ></div>'; $block_spacer = do_blocks($str); // Content block. $block_content = do_blocks( '<!-- wp:group {"layout":{"type":"constrained"}} --> <div class="wp-block-group"> <!-- wp:post-content /--> </div> <!-- /wp:group -->' ); $str = getTemplatePart('footer'); $block_footer = do_blocks($str); wp_head(); ?> </head> <body <?php body_class(); ?>> <?php wp_body_open(); ?> <div class="wp-site-blocks"> <header class="wp-block-template-part"> <?php echo $block_header; ?> </header> <main class="wp-block-group"> <div class="wp-block-group has-global-padding is-layout-constrained"> <h1 class="wp-block-post-title"> <?php echo $title; ?> </h1> </div> <?php echo $block_spacer; echo $block_content; echo $block_spacer; ?> <div class="wp-block-group has-global-padding is-layout-constrained"> <div class="entry-content wp-block-post-content is-layout-flow"> <?php echo '<p>Here is some text from PHP.</p>'; ?> </div> </div> <?php echo $block_spacer; ?> </main> <footer class="wp-block-template-part site-footer"> <?php echo $block_footer; ?> </footer> </div> <?php wp_footer(); ?> </body> </html>The function returns the default HTML for the named template part if there’s not one in the database, and otherwise retrieves the latest entry with the template part name, as it appears that WP saves multiple copies if you do edits.
So far, this appears to solve the problem of getting both the necessary CSS and the correct template part content, at least on the two test sites I’ve tried it on.
I’m not going to mark this as “resolved” yet in case someone has a better suggestion.
Forum: Developing with WordPress
In reply to: PHP-Based Custom Page Templates In Block Themes?I believe I’ve found the direction to go for a fix.
The current header and footer as created by the Editor are kept in the wp_posts table in the database with post_names of “header” and “footer,” respectively, and post_type of “wp_template_part.”
If I copy the post_content from those two entries into my code, and run them through
do_blocksbetween the<head></head>tags, they are output correctly with the necessary CSS.So the fix will be to grab the current entries for header and footer from the database as strings, and run them through
do_blocks. It seems like there should be a function for that already which doesn’t echo the content, butblock_template_part()echoes the content, which won’t work.Forum: Developing with WordPress
In reply to: PHP-Based Custom Page Templates In Block Themes?Thanks @imoptimal,
I took a look at using a custom block, but this puts me off:
ServerSideRender should be regarded as a fallback or legacy mechanism, it is not appropriate for developing new features against.
I also considered a custom shortcode, but my custom page templates output some code required to render the page prior to any blocks loading.
I’m so close with my PHP template. The only thing I’m missing is how to render the actual header and footer content as set via the Editor and load the necessary CSS.
Using
block_header_area();loads all the correct blocks, but lacks the CSS to justify the menu. Adding ado_blocks()for the header adds the CSS, but doesn’t output the correct blocks. Other than that, all the PHP on the page template works perfectly.I’d just like to have a solution that adds the correct CSS and allows me to use the Editor-generated header and footer going forward to make maintenance easy.
I’m still not sure that creating a custom page template this way is the best method of introducing some PHP into a page without a plugin; however, I did figure out how to fix the header and footer alignment issue.
I’ll post the modified custom page template file here in case it saves someone else some time:
<?php /** * This is a test custom template for Twenty Twenty Three. * * Template Name: Test Custom Template * */ ?> <!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo('charset'); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <?php $title = get_the_title(); $site_name = get_bloginfo('name'); $page_title = $title . ' - ' . $site_name; ?> <title><?php echo $page_title; ?></title> <?php /* You have to run the do_blocks() between the <head></head> tags in order for WordPress to load the corresponding CSS. */ // Header block. $str = '<!-- wp:group {"layout":{"type":"constrained"}} --> <div class="wp-block-group"> <!-- wp:group {"align":"wide","style":{"spacing":{"padding":' . '{"bottom":"var:preset|spacing|40"}}},"layout":{"type":"' . 'flex","justifyContent":"space-between"}} --> <div class="wp-block-group alignwide" style="padding-bottom:' . 'var(--wp--preset--spacing--40)"> <!-- wp:site-title {"level":0} /--> <!-- wp:navigation {"layout":{"type":"flex","setCascading' . 'Properties":true,"justifyContent":"right"}} /--> </div> <!-- /wp:group --> </div> <!-- /wp:group --> '; $block_header = do_blocks($str); // Spacer block. $str = '<div style="height:32px" aria-hidden="true" class="wp-block-spacer" ></div>'; $block_spacer = do_blocks($str); // Content block. $block_content = do_blocks( '<!-- wp:group {"layout":{"type":"constrained"}} --> <div class="wp-block-group"> <!-- wp:post-content /--> </div> <!-- /wp:group -->' ); // Footer block. $str = '<!-- wp:pattern {"slug":"twentytwentythree/footer-default"} /-->'; $block_footer = do_blocks($str); wp_head(); ?> </head> <body <?php body_class(); ?>> <?php wp_body_open(); ?> <div class="wp-site-blocks"> <header class="wp-block-template-part"> <?php echo $block_header; ?> </header> <main class="wp-block-group"> <div class="wp-block-group has-global-padding is-layout-constrained"> <h1 class="wp-block-post-title"> <?php echo $title; ?> </h1> </div> <?php echo $block_spacer; echo $block_content; echo $block_spacer; ?> <div class="wp-block-group has-global-padding is-layout-constrained"> <div class="entry-content wp-block-post-content is-layout-flow"> <?php echo '<p>Here is some text from PHP.</p>'; ?> </div> </div> <?php echo $block_spacer; ?> </main> <footer class="wp-block-template-part site-footer"> <?php echo $block_footer; ?> </footer> </div> <?php wp_footer(); ?> </body> </html>That solves the issue by running
do_blocks()on the header, spacer, content, and footer within the<head></head>tags.Note that I did not include the featured image or comments blocks because I do not need them for my purposes. If you need them, you can refer to the /wp-content/themes/twentytwentythree/templates/page.html file to grab the corresponding code required to add them.
- This reply was modified 2 years, 11 months ago by linux4me2. Reason: This is still a fail. Although it does fix the layout issue, I quickly discovered when I tried to apply it on another site that it doesn't capture the correct navigation menu or footer credits. It adds some extraneous menu and uses the default WP credits
Yikes! That’s not good.
Well, my thinking was that since WP Super Cache just caches the pages, and TT3–and the other block themes I’ve tested–scatter CSS and JavaScript all over the place, I was thinking that Autoptimize’s ability to minify and consolidate the CSS and JavaScript would help. Obviously not.
I don’t think it’s the TT3 theme itself. Here’s Pagespeed on a test site I have running TT3. The SEO is low because I have “Discourage search engines from indexing this site” enabled:
That test site has no caching plugin at all, and only a few plugins.
Maybe another plugin you’re running?
I used to use WP Super Cache too, before I was on a Litespeed server. I got better Pagespeed scores when I added Autoptimize to it. The two plugins complement each other. You might give that a try and see how it does.
I’m going to mark this as resolved, as I now know the problem is that the block CSS for the header and footer are not being loaded, and I think the issue is not limited to the Twenty Twenty Three theme, but to any block theme that I try to add a custom page template to.
I’m going to post a question in Developing WordPress if I can’t find the issue on my own.
I found the cause of the problem, but I haven’t figured out how to fix it completely, yet.
In this article, it says that since WP v. 6.0, the block CSS is loaded in the head, so that if you “use do_blocks() after wp_head(), WordPress does not load the block CSS.”
I did a file comparison of my custom template page and another page, and discovered that there is a lot of styles missing from the head.
I moved the content up just before
wp_head()is called like this:<?php $block_content = do_blocks( ' <!-- wp:group {"layout":{"type":"constrained"}} --> <div class="wp-block-group"> <!-- wp:post-content /--> </div> <!-- /wp:group -->' ); wp_head(); ?>and confirmed that it added the additional CSS between the
<head></head>tags:<style id='wp-block-paragraph-inline-css'> .is-small-text{font-size:.875em}.is-regular-text{font-size:1em}.is-large-text{font-size:2.25em}.is-larger-text{font-size:3em}.has-drop-cap:not(:focus):first-letter{float:left;font-size:8.4em;font-style:normal;font-weight:100;line-height:.68;margin:.05em .1em 0 0;text-transform:uppercase}body.rtl .has-drop-cap:not(:focus):first-letter{float:none;margin-left:.1em}p.has-drop-cap.has-background{overflow:hidden}p.has-background{padding:1.25em 2.375em}:where(p.has-text-color:not(.has-link-color)) a{color:inherit} </style> <style id='wp-block-post-content-inline-css'> .wp-block-post-content a:where(:not(.wp-element-button)){color: var(--wp--preset--color--secondary);} </style> <style id='wp-block-group-inline-css'> .wp-block-group{box-sizing:border-box} </style>Now, I have to figure out how to get it to do the same for the header, footer, and comments…
Forum: Themes and Templates
In reply to: [Twenty Twenty-Three] Template Part with header and sidebarI think it’s possible, but I wouldn’t do it.
First, I think rather than editing template parts, you’d need to edit the templates of all the post/pages to create a two-column layout below the header. One column would be your sidebar, maybe based on a reusable block or Navigation Block, and the other the page content.
The reason I wouldn’t do it is that it would cause issues with mobile devices due to the lack of available width to display both columns. That, I believe, is the reason most themes these days don’t use sidebars.
You’re probably not going to want to hear this, but if it were me, I’d lose the Firebird Gallery and just use the built-in WordPress Gallery block. I know for a fact that it works fine for column layouts in Twenty Twenty Three, and no issue with those nasty extraneous bullets. There are plenty of ways to find images in the default Media Library, so you needn’t worry about that, in my opinion.
It’s always good to go with the fewest plugins you can for performance and conflict reasons. It may even be possible that the issues you’re having with the Firebird Gallery is causing a conflict with the Events Manager plugin. When two plugins are both having layout issues, a conflict is always a possibility.
If that’s not acceptable to you, if you create a child theme of Twenty Twenty Three, you can add a functions.php file in it and enqueue any extra style sheets you need to fix the issues, including enqueuing something that’s supposed to be enqueued by an errant plugin and isn’t, if you specify the correct file path.
Creating a child theme for Twenty Twenty Three is really easy. All you need to do is create a folder in /wp-content/themes called something like
twentytwentythree-childand then create astyle.cssfile in it that includes the following, edited to your preferences:/* Theme Name: Twenty Twenty Three Child Description: Twenty Twenty Three Child Theme Author: <optional, your name> Author URI: <optional, your website> Template: twentytwentythree Version: 1.0.0 */To enqueue a stylesheet, you’ll also need a functions.php file in that folder with something like the following, replacing the path and filename with the CSS file you want enqueued:
<?php add_action('wp_enqueue_scripts', 'enqueueCustomScripts'); function enqueueCustomScripts() { wp_enqueue_style( 'your-custom-style', get_stylesheet_directory_uri() . '/your-style.css' ); } ?>You can find the details about the wp_enqueue_style function here.
If you elect to stick with the Firebird Gallery, you might also want to reach out to their developers to let them know about the issue. If their plugin doesn’t work with the current default WordPress theme, I’ll be they’d want to know.