I'm trying to change the default HTML output of a Gutenberg block in WordPress 5.7. For example, the default output of a core/Group block with a paragraph inside is:
<div class="wp-block-group">
<div class="wp-block-group__inner-container">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
I would like to output something like this:
<table role="presentation" class="my-own-custom-class">
<tr>
<td>
<p>Lorem ipsum dolor sit amet.</p>
</td>
</tr>
</table>
I've tried using a custom filter on the render_block_core/group hook. But I seem to only be able to add content around what WordPress already outputs. Here’s an example:
function my_group_block_wrapper( $block_content, $block ) {
$content = '<table role="presentation" class="my-own-custom-class"><tr><td>' . $block_content . '</td></tr></table>';
return $content;
}
add_filter( 'render_block_core/group', 'my_group_block_wrapper', 10, 2 );
And here’s what I get:
<table role="presentation" class="my-own-custom-class">
<tr>
<td>
<div class="wp-block-group">
<div class="wp-block-group__inner-container">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
</td>
</tr>
</table>
How do I get rid of the divs generated by WordPress?
You can actually loop through blocks by retrieving them from the content using parse_blocks().
Parses blocks out of a content string.
Source # https://developer.wordpress.org/reference/functions/parse_blocks/
<?php
if ( ! empty( get_the_content() ) ) { //... check if the content is empty
$blocks = parse_blocks( get_the_content() ); //... retrieve blocks from the content
foreach ( $blocks as $block ) { //... loop through blocks
echo wp_strip_all_tags( render_block( $block ) ); //... strip all html and render blocks
};
};
?>
How can I create a type of loop in WordPress where an image moves left or right for each post? I.e. first post image will be left, second post image will go right, third post image will go left, and so on...
i am attach image. Provide some code or examples
Thanks in advance
https://imgur.com/Z58QEjb
enter image description here
<?php
$loop = new WP_Query( array( 'post_type' => 'case_studies') );
$Inc = 1;
if ( $loop->have_posts() ) :
while ( $loop->have_posts() ) : $loop->the_post(); ?>
<?php if($Inc==1){ ?>
<div class="col-sm-3 nopadding">
<?php the_post_thumbnail(); ?>
</div>
<div class="col-sm-3 ">
<h2><?php echo get_the_title(); ?></h2>
</div>
<?php }else if($Inc==2){ ?>
<div class="col-sm-3 nopadding">
<?php the_post_thumbnail(); ?>
</div>
<div class="col-sm-3 ">
<h2><?php echo get_the_title(); ?></h2>
</div>
<?php }else if($Inc==3){ ?>
<div class="item">
<div class="col-sm-6 nopadding">
<?php the_post_thumbnail(); ?>
</div>
<div class="col-sm-6">
<h2><?php echo get_the_title(); ?></h2>
</div>
</div>
<?php }else if($Inc==4){ ?>
<div class="item">
<div class="col-sm-6 nopadding">
<?php the_post_thumbnail(); ?>
</div>
<div class="col-sm-6">
<h2><?php echo get_the_title(); ?></h2>
</div>
</div>
<?php } ?>
<?php
if($Inc==4){
$Inc =1;
}
$Inc++;
endwhile;
endif;
wp_reset_postdata();
?>
<?php
$loop = new WP_Query( array( 'post_type' => 'team') );
if ( $loop->have_posts() ) :
$Inc = 0; //start your counter
while ( $loop->have_posts() ) : $loop->the_post();
$person_image = get_field('person_image');
$person_description = get_field('person_description');
?>
<?php if($Inc % 2 == 0){ //if $inc can be created by multiplying 2.?>
<div class="col-md-12">
<div class="col-md-1">
<div>
<img src="<?php bloginfo('template_url'); ?>/images/dot1.png" class="img-responsive dotimages">
</div>
</div> <!--.col-md-1 -->
<div class="col-md-10 row">
<div class="clientimagesarea">
<div class="col-md-6">
<div>
<img src="<?php echo $person_image; ?>" class="img-responsive center-block peopleimages">
<?php //the_post_thumbnail(); ?>
</div>
</div>
<div class="col-md-6">
<div class="clienttext clienttextmarleft">
<?php echo $person_description; ?>
</div>
<div class="col-md-12">
<div class="row ">
<div class="col-md-12 col-xs-12 col-sm-12 paddmargin0">
<div class="col-md-2 col-sm-2 col-xs-4">
<div><img src="<?php bloginfo('template_url'); ?>/images/email-icon2.png" class="img-responsive clientemailicon text-left"></div>
</div>
<div class="col-md-9 col-sm-9 col-xs-8">
<div class="emailid">abx#sitename.com</div>
</div>
</div>
<div class="col-md-12 col-xs-12 col-sm-12 paddmargin0">
<div class="col-md-2 col-sm-2 col-xs-4">
<div><img src="<?php bloginfo('template_url'); ?>/images/call-icon2.png" class="img-responsive clientemailicon2 "></div>
</div>
<div class="col-md-9 col-sm-9 col-xs-8">
<div class="emailid2">+41 79 777 66 45</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php //the_post_thumbnail(); ?>
</div>
<?php }else { //it cant?>
<div class="row col-md-6 col-md-offset-3">
<div class="deviderline">
</div>
</div>
<div class="col-md-12">
<div class="row col-md-10 col-md-offset-1">
<div class="row clientimagesarea">
<div class="col-md-6">
<div class="clienttext">
<p>
<?php echo $person_description; ?>
</p>
</div>
<div class="col-md-12">
<div class="row iconmarginleft">
<div class="col-md-12 col-xs-12 col-sm-12 paddmargin0">
<div class="col-md-2 col-sm-2 col-xs-4">
<div><img src="<?php bloginfo('template_url'); ?>/images/email-icon2.png" class="img-responsive clientemailicon text-left"></div>
</div>
<div class="col-md-9 col-sm-9 col-xs-8">
<div class="emailid">abx#sitename.com</div>
</div>
</div>
<div class="col-md-12 col-xs-12 col-sm-12 paddmargin0">
<div class="col-md-2 col-sm-2 col-xs-4">
<div><img src="<?php bloginfo('template_url'); ?>/images/call-icon2.png" class="img-responsive clientemailicon2 "></div>
</div>
<div class="col-md-9 col-sm-9 col-xs-8">
<div class="emailid2">+91 1234567890</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div>
<img src="<?php echo $person_image; ?>" class="img-responsive center-block peopleimages clienttextmarleft">
</div>
</div>
</div>
</div>
<div class="col-md-1">
<div>
<img src="<?php bloginfo('template_url'); ?>/images/dot3.png" class="img-responsive dotimage3">
</div>
</div>
</div>
<?php } ?>
<?php
$Inc++;
endwhile;
endif;
wp_reset_postdata();
?>
You can follow below code
<div class="row">
<?php
$category = get_the_category();
$slug = $category[0]->slug;
$args = array(
'post_type' => 'post',
'category_name'=>$slug,
'posts_per_page'=> 1,
);
$query = new WP_Query( $args );
while ( $query->have_posts() ) : $query->the_post();?>
<div class="container">
<div class="img-box">
<?php echo get_the_post_thumbnail(get_the_ID());?>
</img>
</div>
<div class="content">
<?php
$content = get_the_content();
echo wp_trim_words( get_the_content(), 25, '' );
?>
</div>
</div>
<?php endwhile; ?>
</div>
.container{
display: flex;
flex-wrap: wrap;
align-content: space-between;
margin-bottom:40px;
}
.img-box{
width:40%;
}
img{
max-width:100%;
}
.content{
width:60%
}
.container:nth-child(even){
flex-direction: row-reverse;
}
<div class="row">
<div class="container">
<div class="img-box">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
<div class="content">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
</div>
</div>
<div class="container">
<div class="img-box">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
<div class="content">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
</div>
</div>
Your logic makes sense, I haven't tested this, but this should flib every second item with your code.
<?php
$loop = new WP_Query( array( 'post_type' => 'case_studies') );
if ( $loop->have_posts() ) :
$Inc = 0; //start your counter
while ( $loop->have_posts() ) : $loop->the_post(); ?>
<?php if($Inc % 2 == 0){ //if $inc can be created by multiplying 2.?>
<div class="col-sm-3 nopadding">
<?php the_post_thumbnail(); ?>
</div>
<div class="col-sm-3 ">
<h2><?php echo get_the_title(); ?></h2>
</div>
<?php }else { //it cant?>
<div class="col-sm-3 ">
<?php echo get_the_title(); ?>
</div>
<div class="col-sm-3 nopadding">
<h2><?php the_post_thumbnail(); ?></h2>
</div>
<?php }
$Inc++; //increment the counter
endwhile;
endif;
wp_reset_postdata();
You have to register your post-type like :
add_action( 'init', 'codex_book_init' );
/**
* Register a book post type.
*
* #link http://codex.wordpress.org/Function_Reference/register_post_type
*/
function codex_book_init() {
$labels = array(
'name' => _x( 'Books', 'post type general name', 'your-plugin-textdomain' ),
'singular_name' => _x( 'Book', 'post type singular name', 'your-plugin-textdomain' ),
'menu_name' => _x( 'Books', 'admin menu', 'your-plugin-textdomain' ),
'name_admin_bar' => _x( 'Book', 'add new on admin bar', 'your-plugin-textdomain' ),
'add_new' => _x( 'Add New', 'book', 'your-plugin-textdomain' ),
'add_new_item' => __( 'Add New Book', 'your-plugin-textdomain' ),
'new_item' => __( 'New Book', 'your-plugin-textdomain' ),
'edit_item' => __( 'Edit Book', 'your-plugin-textdomain' ),
'view_item' => __( 'View Book', 'your-plugin-textdomain' ),
'all_items' => __( 'All Books', 'your-plugin-textdomain' ),
'search_items' => __( 'Search Books', 'your-plugin-textdomain' ),
'parent_item_colon' => __( 'Parent Books:', 'your-plugin-textdomain' ),
'not_found' => __( 'No books found.', 'your-plugin-textdomain' ),
'not_found_in_trash' => __( 'No books found in Trash.', 'your-plugin-textdomain' )
);
$args = array(
'labels' => $labels,
'description' => __( 'Description.', 'your-plugin-textdomain' ),
'public' => true,
'publicly_queryable' => true,
'show_ui' => true,
'show_in_menu' => true,
'query_var' => true,
'rewrite' => array( 'slug' => 'book' ),
'capability_type' => 'post',
'has_archive' => true,
'hierarchical' => false,
'menu_position' => null,
'supports' => array( 'title', 'editor', 'author', 'thumbnail', 'excerpt', 'comments' )
);
register_post_type( 'book', $args );
}
and after the loop is :
$args = array( 'post_type' => 'book', 'posts_per_page' => 10 );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
the_title();
echo '<div class="entry-content">';
the_content() . the_thumbnails();
echo '</div>';
endwhile;
then you can to make some custom fields
i let you working on it
Asking here because of better response rate than Wordpess community.
I set up a custom post type called Training Services. I created a custom field called content_snippet and assigned it to only apply to the relevant post type. I see the field on the post type edit screen and enter in some lorem ipsum.
My code for implementation is below (content-page.php): Why does the title, content and thumbnail of the post type show on the front-end but not the custom field? It simply shows an empty tag where the lorem should be if I look at it in chrome dev tools.
Thanks in advance for the help!
<!-- Custom Fields
================================================== -->
<?php
$content_snippet = get_field('content_snippet');
?>
<section class="container-fluid section-spacing" style="border:1px solid black;">
<div class=" text-align-center row" style="border:1px solid green;">
<h1><?php the_title(); ?></h1>
<hr class="headingUnderline">
<div class="responsiveShrink" style="border:1px solid yellow;"><?php the_content() ; ?></div>
<?php $loop = new WP_Query( array( 'post_type' => 'training_services', 'orderby' => 'post_id', 'order' => 'ASC' ) ); ?>
<?php while( $loop->have_posts() ) : $loop->the_post(); ?>
<div class="text-align-center col-xs-12 col-sm-6" style="border:1px solid red;">
<div class="postWrapper">
<div class="imageWrapper">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
?>
</div>
<div class="postContentWrapper">
<h3><?php the_title(); ?></h3>
<div><?php echo $content_snippet; ?></div>
<div><?php the_content(); ?></div>
</div>
</div>
</div>
<?php endwhile; wp_reset_query(); ?>
</div>
</section>
Stupid mistake. Custom field must be declared inside the loop. Leaving this up for future readers.
I've been having issues with my blog template from a basic wordpress theme.
The issuse is that the footer & the side bar are somehow still contained within the container div. I've gone through the code countless times now and i just cannot see what the issues is, all the closing tags are in the correct place but it still buggers up.
th website i'm creating is dev.pearlofbeauty.co.uk/blog
the code that i'm using for the blog template:
<div class="container">
<div class="column_680 m_bottom_20">
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
'orderby' => 'date',
'order' => 'DESC',
'paged' => $paged
);
query_posts($args);
while ( have_posts() ) : the_post();
?>
<div class="column_210 m_top_55">
<?php the_title(); ?>
<p class="blog_info">
Date: <span><?php the_time('F d,') ?></span> <span><?php the_time('Y') ?></span><br />
Author: <span><?php echo the_author_meta('nickname', get_the_author_meta( 'ID' ) ); ?></span><br />
Comments: <span><?php comments_number() ?></span><br />
Categories: <span><?php the_category(', '); ?></span>
</p>
</div><!--end column_210-->
<div class="column_440 m_top_65 last">
<?php if( has_post_thumbnail() ){ the_post_thumbnail('blog'); }else{ ?>
<img src="<?php echo get_template_directory_uri(); ?>/images/blank-blog.png">
<?php } ?>
</div><!--end column_440-->
<div class="clear"></div>
<div class="post_content m_top_15">
<p><?php content('50') ?></p>
<a class="button read_more rounded" href="<?php echo get_permalink(); ?>">Read More</a>
</div>
<div class="clear"></div>
<?php endwhile; ?>
<div class="more_post m_top_15 m_bottom_185">
<?php echo pagination(); ?>
</div>
</div><!--end column_680-->
<!--sidebar-->
<?php get_sidebar(); ?>
<!-- End Sidebar -->
<div class="clear"></div>
</div><!--end container-->
<div class="clear"></div>
<?php get_footer(); ?>
The problem is the result of
<p><?php content('50') ?></p>
This part returns:
<h4 style="font-style: italic; color: #000000;">
"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
</h4>
<h5 style="color: #000000;">
"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."
</h5>
<div style="color: #000000;">
<div class="lc">
<h2 class="what"></h2>
<strong>Lorem Ipsum</strong> is simply dummy text of.
As you can see you're missing 2 closing div tags.
I have tried many tutorials for custom header support but i am able to add up the support but i am not able to change header..Down here is Index.php
<div id="page">
<div id="header"><h1>Super Plain</h1></div>
<div id="nav">
<ul>
<?php wp_list_pages('title_li=');?>
</ul>
</div>
<div id="main">
<div id="content">
<?php if(have_posts()): while(have_posts()): the_post(); ?>
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>
<?php endwhile; endif; ?>
</div><!--/ #content -->
<div id="sidebar">
<h2>News</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ornare sodales porta. Mauris laoreet tempor luctus. Nunc consequat </p>
</div><!--/ #sidebar -->
</div><!--/ #main -->
</div><!--/ #page -->
here is my css
#header{
background-color:#c1d9c5;
color:#405952;
padding:55px;
}
#header h1{
margin:0;
font-size:72px;
font-weight:normal;
}
and here is my function.php file
<?php
$args = array(
'width' => 980,`enter code here`
'height' => 60,
'default-image' => get_template_directory_uri() . '/images/header.jpg',
);
add_theme_support( 'custom-header', $args );
?>
Why you are try to enable custom header when you can change your header image easily by editing CSS stylesheet?