Support

Account

Home Forums Front-end Issues Creating Front End Post with Flexible Content

Solved

Creating Front End Post with Flexible Content

  • Hi I have recently purchased the ACF Pro.

    I am managed to create the Front End Page for my user to contribute article with acf_form.

    Initially my intention was to use Page Builder as WYSIWYG editor. However after reading for a while unfortunately both ACF and Page Builder is not compatible with each other. So I replaced WYSIWYG editor with Flexible Content.

    However whenever I submitted an article. The content is always blank.

    I follow the tutorial at thestizmedia to get my form.

    Here is the code at my function.php

    add_filter('acf/pre_save_post' , 'tsm_do_pre_save_post' );
    function tsm_do_pre_save_post( $post_id ) {
      // Bail if not logged in or not able to post
      if ( ! ( is_user_logged_in() || current_user_can('publish_posts') ) ) {
        return;
      }
      // check if this is to be a new post
      if( $post_id != 'new' ) {
        return $post_id;
      }
      // Create a new post
      $post = array(
        'post_type'     => 'post', // Your post type ( post, page, custom post type )
        'post_status'   => 'publish', // (publish, draft, private, etc.)
        'post_title'    => wp_strip_all_tags($_POST['acf']['field_55e95e746593e']), // Post Title ACF field key
        'post_content'  => $_POST['acf']['field_55efc8e15d926'], // Post Content ACF field key
      );
      // insert the post
      $post_id = wp_insert_post( $post );
      // Save the fields to the post
      do_action( 'acf/save_post' , $post_id );
      return $post_id;
    }
    
    add_action( 'acf/save_post', 'tsm_save_image_field_to_featured_image', 10 );
    function tsm_save_image_field_to_featured_image( $post_id ) {
      // Bail if not logged in or not able to post
      if ( ! ( is_user_logged_in() || current_user_can('publish_posts') ) ) {
        return;
      }
      // Bail early if no ACF data
      if( empty($_POST['acf']) ) {
        return;
      }
      // ACF image field key
      $image = $_POST['acf']['field_54dfcd4278d63'];
      // Bail if image field is empty
      if ( empty($image) ) {
        return;
      }
      // Add the value which is the image ID to the _thumbnail_id meta data for the current post
      add_post_meta( $post_id, '_thumbnail_id', $image );
    }

    This is my code at the page.php

    <?php acf_form_head(); ?>
    	<div class="eleven columns ">
    		<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    			<div id="content" >
    				<article class="post" id="post-<?php the_ID(); ?>">
    					<div class="title">
    						<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
    					</div>
    				</article>
    			</div>
    		<?php endwhile; endif; ?>
    	</div>
    	<div class="five columns ">
    		<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Menu Search') ) : else : 	endif;?>
    	</div>
    	<div class="sixteen columns ">
    		<article class="post" id="post-<?php the_ID(); ?>">
    			<div class="entry create-article-adjustor">
    				<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    				<?php 
    					if ( ! ( is_user_logged_in()|| current_user_can('publish_posts') ) ) {
    						echo '<p>You must be a registered author to post.</p>';
    					return;
    					}
    
    					$new_post = array(
    						'post_id'            => 'new', // Create a new post
    						// PUT IN YOUR OWN FIELD GROUP ID(s)
    						'field_groups'       => array(1489), // Create post field group ID(s)
    						'form'               => true,
    						'return'             => '%post_url%', // Redirect to new post url
    						'html_before_fields' => '',
    						'html_after_fields'  => '',
    						'submit_value'       => 'Submit Post',
    						'updated_message'    => 'Saved!'
    					);
    
    					acf_form( $new_post );
    
    				 ?>
    				<?php endwhile; endif; ?>
    			</div>
    		</article>
    	</div>

    This is the screenshot of the back-end field group with field key.
    Screen Shot

    When I replace ‘post_content’ => $_POST[‘acf’][‘field_55e95e8b6593f’] with ‘post_content’ => $_POST[‘acf’][‘field_55efc8e15d926’] it works but when I used Flexible content it doesn’t.

  • The reason why is that the flex content field will be in a nested field in $_POST.

    What is in the flex field?

    temporarily add echo '<pre>; print_r($_POST); die; to your pre save post function to see what it looks like.

  • This is what I get saved save the form

    Array
    (
        [_acfnonce] => 
        [_acfchanged] => 1
        [acf] => Array
            (
                [field_55e95e746593e] => Sample Article
                [field_55e95e8b6593f] => Array
                    (
                        [55f1131e17718] => Array
                            (
                                [acf_fc_layout] => 3_columns
                                [field_55ee67fc0ce35] => 3
                                [field_55ee68170ce36] => lorem ipsum
                                [field_55ee683b0ce37] => lorem ipsum
                                [field_55ee8f67a0990] => lorem ipsum
                            )
    
                        [55f1132e1771c] => Array
                            (
                                [acf_fc_layout] => full_column
                                [field_55ee687d0ce3a] => lorem ipsum
                            )
    
                    )
    
                [field_55e95eb365940] => Array
                    (
                        [0] => 64
                        [1] => 63
                    )
    
                [field_55ee8eb9f1c6d] => 
                [field_55e95efb65941] => 
                [field_55efc8e15d926] => 
            )
    
    )

    field_55e95e746593e = Title (Text)
    field_55e95e8b6593f = Content (Flexible Content)
    55f112041f2e9 = ??
    field_55ee67fc0ce35 = Select with 3 value
    field_55ee68170ce36 = Column 1 (Wysiwyg Editor)
    field_55ee683b0ce37 = Column 2 (Wysiwyg Editor)
    field_55ee8f67a0990 = Column 3 (Wysiwyg Editor)
    field_55ee687d0ce3a = Full Column (Wysiwyg Editor)
    field_55e95eb365940 = Category (Taxonomy)
    field_55ee8eb9f1c6d = Adding New Category (Text)
    field_55e95efb65941 = Featured Image (image)
    field_55efc8e15d926 = Anoter Content (Wysiwyg Editor) – This is the initial content field I used before using the Flexible Content

    As mention earlier, my initial intention was to create something similar to the capability of Page Builder. The reason I need to use Page Builder because the site I am working on allowed registered user to submit article.

    And I will like to avoid the registered user to access our back-end thus we use ACR PRO form. And Flexible Content is the closest I can get to Page Builder.

    You mention this

    flex content field will be in a nested field

    . Perhaps you can assist me how am I going about to do it?

  • So I’m assuming that you want to create some type of 3 column layout in the standard content editor and you want all the sub fields from the flex field into it. You need to get all of these fields

    
    $_POST['acf']['field_55e95e8b6593f']['field_55ee68170ce36']
    $_POST['acf']['field_55e95e8b6593f']['field_55ee68170ce36']
    $_POST['acf']['field_55e95e8b6593f']['field_55ee683b0ce37']
    

    this tells you the layout
    $_POST['acf']['field_55e95e8b6593f']['acf_fc_layout']

    I’m not sure what this is that equals 3
    $_POST['acf']['field_55e95e8b6593f']['field_55ee67fc0ce35']
    You’re also going to need to add any additional HTML that you’ll need before inserting it into the content.

    You’re going to need some type of loop, and some conditionals to determine what layout was selected and then build the content based on that. Basically you’re going to need to do everything in pre save post that you’d do if you were displaying this on the front end.

    What happens if there are multiple layouts. I understand what you’re trying to do, I’m just wandering if trying to take a flex content and put it into the standard editor is good choice.

  • Sorry but I still couldn’t figure out your advice.

    This ['field_55ee67fc0ce35'] is to let user select the no of column per row. So if they select 3 then it will be 3 column. If they select 2 it will become 2 column and so on. This was supposed to behave exactly the same page builder for the front end form. I get the idea from the video in here.

    I was thinking of simplifying this. Will it be simpler if my post has flexible content layout and I insert it into the post custom field rather than the content.

    What will I need to replace/add

    $post = array(
        'post_type'     => 'post', // Your post type ( post, page, custom post type )
        'post_status'   => 'publish', // (publish, draft, private, etc.)
        'post_title'    => wp_strip_all_tags($_POST['acf']['field_55e95e746593e']), // Post Title ACF field key
        'post_content'  => $_POST['acf']['field_55e95e8b6593f'], // Post Content ACF field key
      );

    to do so?

  • At this point I’m a little confused about what you’re trying to do myself. If it were me I wouldn’t be trying to insert the content of flexible content into the main content area. I’d simply be using flexible content and building a front end template that displayed it the way I wanted. So I guess my answer to your last question would be yes.

  • If it were me I wouldn’t be trying to insert the content of flexible content into the main content area. I’d simply be using flexible content and building a front end template that displayed it the way I wanted

    This is what I wanted to achieve now. Can you guide me along on what and how this can be done?

    I really have no idea how WordPress works and with all the different extension and so on.

  • Showing flexible content fields requires editing the WP template file where you want to show them. You will find example code for this here http://www.advancedcustomfields.com/resources/flexible-content/

  • I have no problem in showing it. I’m having issue with putting the form.

    But thanks anyway.

  • Have you done everything listed in the document on using a front end form? http://www.advancedcustomfields.com/resources/acf_form/ If you’re still having problems getting it working start a new topic.

Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘Creating Front End Post with Flexible Content’ is closed to new replies.