Support

Account

Home Forums General Issues ACF usage with Genesis Framework

Solving

ACF usage with Genesis Framework

  • Hi all,

    I am new to ACF world. I am trying to add a repeater field that includes background color (color picker) and a content box (wysiwyg editor). I have been unsuccessful to display the results on the front-end.

    I have added the following code in Business Pro Theme (Child theme) function.php file.

    *** Predefined Custom Fields ***/
    if(function_exists("register_field_group"))
    {
    	register_field_group(array (
    		'id' => 'acf_extra-content-sections',
    		'title' => 'Extra Content Sections',
    		'fields' => array (
    			array (
    				'key' => 'field_5b70d000ad723',
    				'label' => 'Content Block',
    				'name' => 'content_block',
    				'type' => 'repeater',
    				'sub_fields' => array (
    					array (
    						'key' => 'field_5b70d019ad724',
    						'label' => 'Background Color',
    						'name' => 'background_color',
    						'type' => 'color_picker',
    						'column_width' => '',
    						'default_value' => '',
    					),
    					array (
    						'key' => 'field_5b70d02cad725',
    						'label' => 'Content',
    						'name' => 'content',
    						'type' => 'wysiwyg',
    						'column_width' => '',
    						'default_value' => '',
    						'toolbar' => 'full',
    						'media_upload' => 'yes',
    					),
    					
    				),
    				'row_min' => '',
    				'row_limit' => '',
    				'layout' => 'row',
    				'button_label' => 'Add Row',
    			),
    		),
    		'location' => array (
    			array (
    				array (
    					'param' => 'post_type',
    					'operator' => '==',
    					'value' => 'page',
    					'order_no' => 0,
    					'group_no' => 0,
    				),
    			),
    		),
    		'options' => array (
    			'position' => 'normal',
    			'layout' => 'default',
    			'hide_on_screen' => array (
    			),
    		),
    		'menu_order' => 0,
    	));
    }

    Along with this, I have also added in plugins.php

    // Add custom plugins to register hook
    add_action( 'tgmpa_register', 'business_register_required_plugins' );
    function em_register_required_plugins() {
    	/*
    	 * Array of plugin arrays. Required keys are name and slug.
    	 * If the source is NOT from the .org repo, then source is also required.
    	 */
    	$plugins = array(
    	
    		// Advanced Custom Field
    		array(
    			'name'      => 'Advanced Custom Fields',
    			'slug'      => 'advanced-custom-fields',
    			'required'  => true,
    		),
    // Advanced Custom Fields: Repeater Field
    		array(
    			'name'               => 'Advanced Custom Fields: Repeater Field',
    			'slug'               => 'acf-repeater',
    			'source'             => get_stylesheet_directory() . '/library/TGM-Plugin-Activation-develop/plugins/acf-repeater.zip',
    			'required'           => true,
    			'version'            => '',
    			'force_activation'   => false,
    			'force_deactivation' => false,
    			'external_url'       => '',
    		),
    		);
    }

    Can anyone shed some light on how to fix this?

    Regards,

    Ally

  • Hi Ally,
    are you trying to show your acf fields in a template or as a shortcode?
    R

  • Hi R,

    I am trying to add this as a template in all my posts which are pages.

    Ally

  • Hi Ally,
    Ok so it sounds like you need to edit your posts single.php file. Also, note that Genesis requires it’s own hooks.

    Any changes you made before like the plugins.php and to your functions.php etc…remove or save somewhere else, let’s start fresh.

    Next, copy to your child theme the file “single.php” and add the following before “genesis();” these are the hooks that you can turn on or off depending on your theme design, otherwise you will get just the content and no header, footer etc…:

    //* Force full width content layout
    add_filter( 'genesis_pre_get_option_site_layout','__genesis_return_full_width_content' );
    
    //* Removes the breadcrumb navigation
    remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );
    
    //* Removes the post info function
    remove_action( 'genesis_entry_header', 'genesis_post_info', 5 );
    
    //* Removes the author box on single posts
    remove_action( 'genesis_after_entry', 'genesis_do_author_box_single', 8 );
    
    //* Removes the post meta function
    remove_action( 'genesis_entry_footer', 'genesis_post_meta' );
    
    remove_action( 'genesis_loop', 'genesis_do_loop' );

    Now we have to add the genesis loop, where I say “anyname” change to a name that makes sense, so now add the following:

    //======================================================================
    // BEGIN ACF CONTENT
    //======================================================================
    add_action( 'genesis_loop', 'anyname_loop' );
    function anyname_loop() { ?>
    
    <article itemtype="http://schema.org/company" itemscope="itemscope" class="post-<?php print $pageid; ?> page type-page status-publish entry">
    <div class="entry-content" itemprop="text">
    
      <div class="co-wrapper">
    	<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
    		<div class="co-title">
    			<h1><?php the_title(); ?></h1>
    		</div>
    
    <strong>Add your ACF content in here along with any html you want.</strong>
    
      </div>
    </div>
    </article>

    This should get you started with where to drop your acf code and your html.

    Lastly, if the site is live, I suggest testing this on a staging site or locally.

  • Hi Rociopts,

    Thank you for taking out time and responding back. Unfortunately, it didn’t work. Here is what I did:

    1) Copy single.php file from parent theme (genesis to child theme (business pro)
    2) Copied the 1st code excerpt you provided and pasted it before “genesis();” in the single.php file which now exists in child theme.
    3)Then I copied the 2nd part of code and pasted it in the same file.
    4) I replaced the content between strong tags with the acf code that I have posted in my 1st comment which starts like this *** Predefined Custom Fields ***/

    Just to give you a complete picture here is some further info
    – Business pro is my child theme while genesis is parent theme.
    – I am just trying to add an acf repeater field which includes a color picker and an editor for description.
    – These repeater fields are required on all PAGES. By pages I mean the PAGES that you see on the left sidebar of wordpress dashboard. These are different from POSTS which are blogs etc.

    Once again highly appreciate your effort.

    Regards,

    Ali

  • Oh ok I misunderstood, your initial response “in all my posts which are pages”. So for pages:

    1. Delete the single.php page, let’s start fresh again! 🙂
    2. move the page.php file to your child theme
    3. Add the following before “genesis()”, edit based on your theme style.
    // Remove Skip Links
    remove_action ( 'genesis_before_header', 'genesis_skip_links', 5 );
    
    // Dequeue Skip Links Script
    add_action( 'wp_enqueue_scripts', 'genesis_sample_dequeue_skip_links' );
    function genesis_sample_dequeue_skip_links() {
    wp_dequeue_script( 'skip-links' );
    }
    
    // Force full width content layout
    
    // Remove site header elements
    // remove_action( 'genesis_header', 'genesis_header_markup_open', 5 );
    // remove_action( 'genesis_header', 'genesis_do_header' );
    // remove_action( 'genesis_header', 'genesis_header_markup_close', 15 );
    
    // Remove navigation
    // remove_theme_support( 'genesis-menus' );
    
    // Remove breadcrumbs
    remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );
    
    // Remove footer widgets
    remove_action( 'genesis_before_footer', 'genesis_footer_widget_areas' );
    
    // Remove site footer elements
    remove_action( 'genesis_footer', 'genesis_footer_markup_open', 5 );
    remove_action( 'genesis_footer', 'genesis_do_footer' );
    remove_action( 'genesis_footer', 'genesis_footer_markup_close', 15 );
    
    // Remove page title
    
    // Remove site inner wrap
    add_filter( 'genesis_structural_wrap-site-inner', '__return_empty_string' );
    
    // Remove edit link
    add_filter ( 'genesis_edit_post_link' , '__return_false' );
    
    // Load landing page styles
    add_action( 'wp_enqueue_scripts', 'landing_do_tables_styles' );
    function landing_do_tables_styles() {
    wp_enqueue_style( 'tables', CHILD_URL . '/tables.css', array(), PARENT_THEME_VERSION );
    }
    
    //======================================================================
    // BEGIN ACF CONTENT
    //======================================================================

    Now you need to add the Genesis hook to display your content so add the following code.

    ‘add_action( ‘genesis_entry_content’, ‘anyname_here’ );
    function anyname_here() {

    Here add your your acf code. Example below

    <?php }
    //======================================================================
    // END ACF CONTENT
    //======================================================================’

    It sounds like you are also not sure how to use the ACF code for a repeater field. I will give you and example code that you can then edit using the correct field name and html. I also recommend this page with more details https://www.advancedcustomfields.com/resources/repeater/

    Here is an example code you could easily change to your settings, you would add this to the code above.

    if( have_rows('your_repeater_field_name') ): ?>
    <div class="any-class-name">
    						
    <?php // loop through rows (parent repeater)
    while( have_rows('your_repeater_field_name') ): the_row(); ?>
    
    <div style="background-color:<?php get_sub_field('your_color_field_name'); ?>">
    <p><?php get_sub_field('your_description_field_name'); ?></p>
    </div>
    endwhile;
    
    else :
        // no rows found
    endif;
    </div>
    ?>

    I haven’t tested the above code, but this has a repeater field, color picker and textarea. You need to change the code field names (anything with “your_field_name” change) to match what you created in acf. Look at the documents for each field if you run into an issue. With this you should be able to get it working. If still not working then send a screenshot of your acf fields and send the code you are using. Good Luck!

  • Hello,

    I added the following code in page.php file but adding anything in that file breaks all my pages.

    // Remove Skip Links
    remove_action ( 'genesis_before_header', 'genesis_skip_links', 5 );
    
    // Dequeue Skip Links Script
    add_action( 'wp_enqueue_scripts', 'genesis_sample_dequeue_skip_links' );
    function genesis_sample_dequeue_skip_links() {
    wp_dequeue_script( 'skip-links' );
    }
    
    // Force full width content layout
    
    // Remove site header elements
    // remove_action( 'genesis_header', 'genesis_header_markup_open', 5 );
    // remove_action( 'genesis_header', 'genesis_do_header' );
    // remove_action( 'genesis_header', 'genesis_header_markup_close', 15 );
    
    // Remove navigation
    // remove_theme_support( 'genesis-menus' );
    
    // Remove breadcrumbs
    remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );
    
    // Remove footer widgets
    remove_action( 'genesis_before_footer', 'genesis_footer_widget_areas' );
    
    // Remove site footer elements
    remove_action( 'genesis_footer', 'genesis_footer_markup_open', 5 );
    remove_action( 'genesis_footer', 'genesis_do_footer' );
    remove_action( 'genesis_footer', 'genesis_footer_markup_close', 15 );
    
    // Remove page title
    
    // Remove site inner wrap
    add_filter( 'genesis_structural_wrap-site-inner', '__return_empty_string' );
    
    // Remove edit link
    add_filter ( 'genesis_edit_post_link' , '__return_false' );
    
    // Load landing page styles
    add_action( 'wp_enqueue_scripts', 'landing_do_tables_styles' );
    function landing_do_tables_styles() {
    wp_enqueue_style( 'tables', CHILD_URL . '/tables.css', array(), PARENT_THEME_VERSION );
    }
    
    //======================================================================
    // BEGIN ACF CONTENT
    //======================================================================
    
    add_action( ‘genesis_entry_content’, ‘ACF_content’ );
    function ACF_content() {
    	
    if( have_rows('content-block') ): ?>
    <div class="any-class-name">
    						
    <?php // loop through rows (parent repeater)
    while( have_rows('content-block') ): the_row(); ?>
    
    <div style="background-color:<?php get_sub_field('background_color'); ?>">
    <p><?php get_sub_field('content'); ?></p>
    </div>
    endwhile;
    
    else :
        // no rows found
    endif;
    </div>
    ?>	
    	
    <?php }
    //======================================================================
    // END ACF CONTENT
    //======================================================================

    I really appreciate your time and effort but unfortunately, I wasn’t able to make it work. Are there any changes that needs to be added in functions.php file because we have another website which uses ACF and the code is added in functions file.

    Regards,

    Ali

  • A few things, what exactly gets broken? You need to change the genesis hooks I gave you based on your theme. Example, if you footer is missing then the line that says remove footer you can remove it or just add “//” in front of that line.

    Second question, do your acf fields show up? If so then great, all you need to do is then fix the genesis hooks.

  • Apologies for the delayed response. Basically, when I add the above-mentioned code I get the 500 error. I tried with removing the hooks as well but the same result.

    THE ACF fields show up in the backend.

    Just to give you some context, I am trying to add the repeater field on a page like this https://faded-print.flywheelsites.com/platform/.

    I am assuming that this page is a PAGE and the backend file is page.php

    Could you please confirm that the very 1st step is to create ACF fields in the plugin area and then proceed to add the code?

    Cheers

    Ally

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

The topic ‘ACF usage with Genesis Framework’ is closed to new replies.