0

I'm not exactly sure how to explain this, but I have a slider I built using ACF that I placed on my home page. After this code, I want to use a WP block I built, and after that I want to put another slider. So it would look like this:

        <div class="col-lg-9 col-sm-12">
        
            <div class="row slide-area">    

              <!-- // * Slider starts -->
              <section class="slider_container_top_main">

              <!-- all slides container starts -->
              <ul class="slider_container_top">

                <?php

                      // get slider data
                      if (have_rows('slider')) :

                          while (have_rows('slider')) : the_row();

                              $slider_image = get_sub_field('slider_image');
                              $slider_headline = get_sub_field('slider_headline');
                              
                      ?>

                <!-- slide starts -->
                <li>
                  <div class="slider_container_top_img_container">            

                    <img src="<?php echo $slider_image['url'] ?>" alt="slider image" class="slider_container_top_img"
                      loading="lazy">          

                    <div class="row align-items-center justify-content-center top-navigation-div">
                      
                      <div class="col-lg-9 offset-lg-3 col-sm-12 col-12 black-s top-navigation-controls"><?php echo $slider_headline; ?></div>
                    </div>
                  </div>
                </li>
                <!-- slide ends -->

                <?php

                  endwhile;
                  endif;
                      
                ?>

              </ul>
              <!-- all slides container ends -->

              </section>
              <!-- // * Slider ends -->
              
            </div>
            
          
        </div>
      </div>

** WP block would go here **

// And here's another slider

        <div class="col-lg-9 col-sm-12">
        
            <div class="row slide-area">    

              <!-- // * Slider starts -->
              <section class="slider_container_top_main">

              <!-- all slides container starts -->
              <ul class="slider_container_top">

                <?php

                      // get slider data
                      if (have_rows('slider')) :

                          while (have_rows('slider')) : the_row();

                              $slider_image = get_sub_field('slider_image');
                              $slider_headline = get_sub_field('slider_headline');
                              
                      ?>

                <!-- slide starts -->
                <li>
                  <div class="slider_container_top_img_container">            

                    <img src="<?php echo $slider_image['url'] ?>" alt="slider image" class="slider_container_top_img"
                      loading="lazy">          

                    <div class="row align-items-center justify-content-center top-navigation-div">
                      
                      <div class="col-lg-9 offset-lg-3 col-sm-12 col-12 black-s top-navigation-controls"><?php echo $slider_headline; ?></div>
                    </div>
                  </div>
                </li>
                <!-- slide ends -->

                <?php

                  endwhile;
                  endif;
                      
                ?>

              </ul>
              <!-- all slides container ends -->

              </section>
              <!-- // * Slider ends -->
              
            </div>
            
          
        </div>
      </div>

Is there a way to do something like this? Put WP blocks between code in a template?

5
  • Should the block be editable? If not, you can just add the final HTML to your template. If it should be editable, I would recommend converting the whole page to a block-based one and creating simple blocks for your carousels.
    – kero
    Jan 21 at 16:04
  • If you're using ACF you should look at their Blocks code, it will do this pretty easily
    – rudtek
    Jan 21 at 16:41
  • Should be able to replace ** WP block would go here ** with the standard loop i believe.
    – mikerojas
    Jan 21 at 20:53
  • I would be wary that none of the code in your question has any escaping, which is a significant security issue. Don't write <img src="<?php echo $slider_image['url'] ?>" and just assume it's a URL, write <img src="<?php echo esc_url( $slider_image['url'] ); ?>" instead and guarantee it's a URL.
    – Tom J Nowell
    Jan 22 at 1:17
  • Thanks Tom, I'm pretty new to PHP. I appreciate the suggestion.
    – paulwk
    Jan 24 at 16:14

2 Answers 2

0

2 methods

  1. do_blocks, takes block content as a string, parses them, renders each block, then returns the final rendered content. This is the same content in post_content, aka the HTML comment and the HTML tags inside it e.g. something similar to this: echo do_blocks( '<!-- wp:paragraph --><p>Hello world.</p><!-- /wp:paragraph -->');
  2. Use a block template part in a block theme. This way the entire template is blocks
1
  • Thanks, Tom, this seems like the best solution.
    – paulwk
    Jan 24 at 16:15
0

you can do it the other way around, use wp block for the page and insert your code as a shortcode.

function my_shortcode() {
    ob_start(); <?php
    <h3> this is my shortcode </h3>
    ?>
    return ob_get_clean();
}
add_shortcode( 'myShortCodeName', 'my_shortcode');

now on wp blocks its possible to use the shortcode block and call [myShortCodeName]

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.