I have a page for which I create blocks using Gutenberg and ACF. First I create a block template, then I create it in ACF and add it to the page using the Gutenberg editor.
Now the problem is that the blocks are not displayed on the page after being added in the Gutenberg editor. How can I connect blocks to a page? I need to take blocks from template-parts/block. Each block in the folder with the block has its own css and js. The structure is shown in the screenshot: Block folder structure
<?php
/**
* Template Name: Home
*
*/
get_header(); ?>
<?php
get_footer();
Related
I'm following a Udemy WordPress Course to create a custom WordPress Block Theme. I successfully registered the block type within my functions.php and can select my Block in the Gutenberg Editor.
The tutorial suggested to use the following ways to load the styles for my gutenberg block element, so the the css will be loaded in the frontend as well.
function lr_theme_features() {
// Enqueue editor styles
// Borrowed from TwentyTwentyToTheme
add_editor_style( 'style.css' );
add_theme_support('editor-styles');
}
add_action('after_setup_theme', 'lr_theme_features');
Anyway, no matter what I do, Gutenberg isn't loading the style.css file for my block.
Image from the Gutenberg Backend
Any Tips, what I might be missing or how I can debug the problem?
Thank you very much!
In a block based theme, wp-block-styles is used to load the stylesheet in the Editor and Frontend. The TwentyTwentyTwo Theme uses the same technique; it may be you've followed a (now) outdated theme tutorial given block based themes are relatively new.
function lr_theme_features() {
// Add support for block styles.
add_theme_support( 'wp-block-styles' );
// Enqueue editor styles.
add_editor_style( 'style.css' );
}
add_action('after_setup_theme', 'lr_theme_features');
If you still can't see your styles being loaded, check the class names of the blocks you're targeting matches the HTML markup.
PS. Always clear your browser cache/hard refresh to be sure you're not seeing a cached version of the Editor - its a very common but overlooked cause of many issues.
WooCommerce provides the Gutenberg block "Product Filter - Attributes", which you can add to the sidebar or footer widgets or basically everywhere, where you can add Gutenberg blocks.
However, I need to render this block in the overwritten woocommerce template "archive-product.php" in a very specific location.
Does anyone know, how it's possible to render Gutenberg blocks purely in code?
And then I still need to tell the block, which attribute(s) it should provide filters for. In backend, you simply can pick the global woocommerce attributes to filter by. I need to do all of that in code.
Thank you, have a nice day
Block content (including woocommerce blocks) can be rendered in a template via the do_blocks() function.
The easiest way to generate the block code is to create a new post/page, insert the block you want, configure the attributes/settings as needed, then switch from the Visual editor to the Code editor (shortcut: Ctrl+Shift+Alt+M) to get the code required.
Here is an example of the attribute filter block for "your-attribute" for inserting in a template file:
<?php
echo do_blocks('<!-- wp:woocommerce/attribute-filter {"attributeId":1,"heading":"Filter by your-attribute"} -->
<div class="wp-block-woocommerce-attribute-filter is-loading" data-attribute-id="1" data-show-counts="true" data-query-type="or" data-heading="Filter by your-attribute" data-heading-level="3"><span aria-hidden="true" class="wc-block-product-attribute-filter__placeholder"></span></div>
<!-- /wp:woocommerce/attribute-filter -->'
);
?>
NB. For the block to render correctly, the woocommerce or custom JS and CSS needs to be enqueued too..
I am new to WP, so please excuse if I ask anything silly.
I have WordPress site which have that created using builder and doesn't use page template of theme folder, everything is built on page builder. I also have other project that I've created on core php.
Is there a way to integrate Core PHP website with Wordpress website?
Creating a Page Template
Creating a page template is extremely easy. Create any new file in your theme (wp-content/themes/your-theme/my-custom-page.php) and start the file with a comment block like so:
<?php
/*
Template Name: My Awesome Custom Page
*/
get_header();
?>
/*
Code Here
*/
<?php
get_footer();
?>
You need paste php code inside this template file. When you submit for then redirection action will be page with custom template page.
Reference :
https://premium.wpmudev.org/blog/creating-custom-page-templates-in-wordpress/
Video :
https://youtu.be/1ZdHI8HuboA
I'm trying to create a custom template for a small wordpress site, the template should display some data from the database.
But I can't get PHP to output anything on the pages, I've written a few echo's just to get something but can't see anything.
I can, however, add the page through "Pages" in WordPress, that works just fine and displays an empty page (or with text if I write something in the text box)
To set up the template I created a child template of my original template, the CSS file in the child template works just fine.
I added the custom page called "petitionlist.php" in the root of my child-theme, the code I added for testing is as following
<?php
/*
Template Name: petitionlist
*/
get_header();
echo "test test test";
$test = "testtetsttest";
echo "<h1> this is a test</h1>".$test; ?>
<h1>Hello wordl!</h1>
<?php get_footer(); ?>
Attached is a screenshot of my folder-structure, the petitionlist.php file in wechange-child is the file I'm working on.
I'm using [insert_php] plugin in Wordpress and I have inserted php function in it.If I set the block with the function before the the masonry grid it doesn't load.
If I move the block with the function after the grid it works well.
In console log is appearing an alert:
Syntax error, unrecognized expression: {'status':'Nothing found'}
How can I sole that?
Grid before php block
Block php before the grid
What you need to do is create a page template. This page template can be used to create PHP for your page to load, and you can even use
<?php echo do_shortcode('[shortcode]'); ?>
To create a template just copy your page.php into a new file called tpl_test.php.
Then make sure to have this in the very first line:
`<?php
/*
Template Name: Test Template
*/
?>`
Then, a small window will show up on the back-end of WordPress when you edit the page. In the right hand column you need to select the page template for the page you just created, and update the page. then, any code you put in the custom Page Template will display correctly on your WordPress site. Also, make sure <?php the_content() ?> is below your grid you are trying to output.