events-query.php
upcoming.php
past.php
events-query.php
upcoming.php
past.php
Query WordPress Posts by Advanced Custom Fields
Add this snippet to functions.php
Now You can reuse this function in your WordPress template files with custom class.
<?php acf_image_with_alt_tag('your_image_class'); ?>
<?php $location = get_field('location'); if( $location ) { // Loop over segments and construct HTML. $address = ''; foreach( array('street_number', 'street_name', 'city', 'state', 'post_code', 'country') as $i => $k ) { if( isset( $location[ $k ] ) ) { $address .= sprintf( '<span class="segment-%s">%s</span>, ', $k, $location[ $k ] ); } } // Trim trailing comma. $address = trim( $address, ', ' ); // Display HTML. echo '<p>' . $address . '.</p>'; }
<!--REPEATER--> <?php if( have_rows('repeater') ): ?> <?php while( have_rows('repeater') ): the_row(); ?> <!--GROUP--> <?php if( have_rows('group') ): ?> <?php while( have_rows('group') ): the_row(); // vars $title = get_sub_field('title'); ?> <?php echo $title; ?> <?php endwhile; ?> <?php endif ?> <?php endwhile; ?> <?php endif ?>
<?php $colors = get_field('colors'); if( $colors ): ?> <ul> <?php foreach( $colors as $color ): ?> <li><?php echo $color; ?></li> <?php endforeach; ?> </ul> <?php endif; ?>
<?php $anchor = strtolower(str_replace(array(' ', ':'), array('-', ''), get_sub_field('title'))); ?> <a href="#<?php echo $anchor; ?>"><?php the_sub_field('title'); ?></a> <h2 id="<?php echo $anchor; ?>" class="headline"><?php the_sub_field('title'); ?></h2>
// ========================================================================= // ADD CUSTOM IMAGE SIZE // ========================================================================= add_image_size( 'gallery-thumb', 600, 400, array( 'left', 'top' ) ); // Hard crop left top
<?php echo wp_get_attachment_image_src( get_field('field_name'), 'medium' )[0]; ?>
<?php $attachment_id = get_field('image'); $size = 'gallery-thumb'; $image = wp_get_attachment_image_src( $attachment_id, $size )[0]; ?> <div class="col-md-3"> <div class="card"> <div class="card-img-top"> <a href="<?php the_field('link'); ?>"> <img src="<?php echo $image; ?>" alt="<?php the_field('title'); ?>"> </a> </div> <div class="card-body"> <h4 class="card-title"><?php the_field('title'); ?></h4> </div> </div> </div>
<?php /* * Loop through post objects (assuming this is a multi-select field) ( don't setup postdata ) * Using this method, the $post object is never changed so all functions need a seccond parameter of the post ID in question. */ $post_objects = get_field('YOUR_CUSTOM_FIELD'); if( $post_objects ): ?> <ul> <?php foreach( $post_objects as $post_object): ?> <li> <a href="<?php echo get_permalink($post_object->ID); ?>"><?php echo get_the_title($post_object->ID); ?></a> </li> <?php endforeach; ?> </ul> <?php endif; ?>
<?php if( have_rows('ITEMS') ): ?> <?php while ( have_rows('ITEMS') ) : the_row(); ?> <?php $post_object = get_sub_field('ITEM'); ?> <?php if( $post_object ): ?> <?php $post = $post_object; setup_postdata( $post ); ?> <h4><?php echo get_the_title($post_object->ID); ?></h4> <?php wp_reset_postdata(); ?> <?php endif; ?> <?php endwhile; ?> <?php endif; ?>
Install and activate Advanced Custom Fields
Go to Custom Fields
Add a header_background field group in your site.
// Adds custom image size for site header background image. add_image_size( 'header-image', 1600, 350, true ); add_action( 'wp_enqueue_scripts', 'custom_header_background' ); /** * Sets `header_background` as URL of .site-header. */ function custom_header_background() { // if we are not on a static Page, abort. if ( ! is_singular( 'page' ) ) { return; } // get the custom field's ID. $image = get_field( 'header_background' ); // URL of image custom field in a specific size. $url = wp_get_attachment_image_url( $image, 'header-image' ); if ( ! empty( $image ) ) { $css = ' .site-header { background-image: url( ' . $url . ' ) !important; }'; wp_add_inline_style( 'anchored', $css ); } }
<?php function cover_subtitle() { if( get_field('slug') ){ the_field('slug'); } else{ echo 'Hello!'; } } ?>
function add_google_maps_scripts() { wp_enqueue_script( 'google-map', 'https://maps.googleapis.com/maps/api/js?key=XXXXXXXXX', array(), '3', true ); wp_enqueue_script( 'google-map-init', get_stylesheet_directory_uri() . '/js/acf-google-map.js', array('google-map', 'jquery'), '0.1', true ); } add_action( 'wp_enqueue_scripts', 'add_google_maps_scripts' ); //GOOGLE MAPS API KEY - Show the map in the admin function my_acf_init() { acf_update_setting('google_api_key', 'XXXXXXXXX'); } add_action('acf/init', 'my_acf_init');
<div class="map"> <?php $terkep = get_field('terkep'); if( !empty($terkep) ): ?> <div class="acf-map"> <div class="marker" data-lat="<?php echo $terkep['lat']; ?>" data-lng="<?php echo $terkep['lng']; ?>"></div> </div> <?php endif; ?> </div>
.acf-map { width: 100%; height: 400px; border: #ccc solid 1px; margin: 20px 0; } /* fixes potential theme css conflict */ .acf-map img { max-width: inherit !important; }
Download the acf-google-maps.js here
<?php $args = array( 'post_type' => 'xxxxxxx', 'posts_per_page' => -1, ); $the_query = new WP_Query($args); echo " <div class='map-container'> <div class='wrap'> <div class='acf-map'>"; while ( $the_query->have_posts() ) : $the_query->the_post(); $location = get_field('xxxxxxx'); $title = get_the_title(); if( !empty($location) ) { ?> <div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"> <h4><a href="<?php the_permalink(); ?>" rel="bookmark"> <?php the_title(); ?></a></h4> <p class="address"><?php echo $location['address']; ?></p> </div> <?php } endwhile; echo ' </div> </div> </div>'; wp_reset_postdata();
<?php if( have_rows('repeater_field_name') ): ?> <ul> <?php while( have_rows('repeater_field_name') ): the_row(); // vars $content = get_sub_field('content'); ?> <li> <?php echo $content; ?> </li> <?php endwhile; ?> </ul> <?php endif ?>
<?php if( get_field('field') ){ echo ''; } else{ echo ''; } ?>
<!--ACF HIDE IF EPMTY CUSTOM FIELD --> <?php if( get_field('mobil') ): ?> <li><?php the_field('mobil'); ?></li> <?php endif; ?>
<!--IF ELSE HIDE - SHOW DIV IF THE_FILED IS EMPTY!!!!!!!--> <?php if( get_field('hogyan_keszult_link') ){ ?> <style type="text/css">.hogy-keszul-cta{ display:block; }</style> <?php }?>
//CUSTOM FIELDS SELECET OPTIONS <?php if( get_field('color') == 'red' ): ?> <p>Selected the Red choice!</p> <?php endif; ?>