Would anyone know how to make a link out of the .headline.img-headline on my home page? I tried to change it in home-page-small.php.
From:
<?php if ( has_post_thumbnail() ) { ?>
<div class="feature-img page-banner" <?php if ( ! empty( $thumb ) ) { ?> style="background-image: url(<?php echo esc_url( $thumb[0] ); ?>);" <?php } ?>>
<h2 class="headline img-headline"><?php the_title(); ?></h2>
<?php the_post_thumbnail( 'giving-featured-small' ); ?>
To:
<?php if ( has_post_thumbnail() ) { ?>
<div class="feature-img page-banner" <?php if ( ! empty( $thumb ) ) { ?> style="background-image: url(<?php echo esc_url( $thumb[0] ); ?>);" <?php } ?>>
<h2 class="headline img-headline"><?php the_title(); ?></h2>
<?php the_post_thumbnail( 'giving-featured-small' ); ?>
But I am not sure if that is the right place to be.
Related
I am trying to recreate a design using Advanced Custom Fields and Hard Code. I am using flex-box as CSS and would like to have the icon above text with a row of 6 columns.
Currently, my code is putting the icon on the left and the text beside it rather than reading it as a column and then a row.
Thank you for your help :)...
<div class="wrapper">
<section id="process">
<?php if ( have_rows( 'procces' ) ) : ?>
<?php while ( have_rows( 'procces' ) ) : the_row(); ?>
<h1><?php the_sub_field( 'process_header' ); ?></h1>
<p><?php the_sub_field( 'process_description' ); ?><p>
<?php if ( have_rows( 'icon' ) ) : ?>
<?php while ( have_rows( 'icon' ) ) : the_row(); ?>
<div id="process-icon" class="icon-item">
<?php $icon_image = get_sub_field( 'icon_image' ); ?>
<?php if ( $icon_image ) : ?>
<img src="<?php echo esc_url( $icon_image['url'] ); ?>" alt="<?php echo esc_attr( $icon_image['alt'] ); ?>" />
<?php endif; ?>
<h2><?php the_sub_field( 'icon_description' ); ?></h2>
<?php endwhile; ?>
<?php else : ?>
<?php // no rows found ?>
<?php endif; ?>
</div>
<?php endwhile; ?>
<?php endif; ?>
</section>
</div>
.icon-item {
display:flex;
flex-flow: column row;
}
Flex will work on the direct children of the item with the property so you just want to wrap all your .icon-item into a .icon-wrapper and apply the flex to that:
<?php if ( have_rows( 'icon' ) ) : ?>
<div class="icon-wrapper">
<?php while ( have_rows( 'icon' ) ) : the_row(); ?>
<div class="icon-item">
<?php $icon_image = get_sub_field( 'icon_image' ); ?>
<?php if ( $icon_image ) : ?>
<img src="<?php echo esc_url( $icon_image['url'] ); ?>" alt="<?php echo esc_attr( $icon_image['alt'] ); ?>" />
<?php endif; ?>
<h2><?php the_sub_field( 'icon_description' ); ?></h2>
</div><!-- close .icon-item-->
<?php endwhile; ?>
</div><!--- close .icon-wrapper-->
<?php else : ?>
<?php // no rows found ?>
<?php endif; ?>
I'd remove that id="process-icon" on any multiple items too.. use classes for multiple & id for singular elements (I usually just use IDs for javascript reference)
Then your css would be:
.icon-wrapper {
display: flex;
}
.icon-item {
}
I'm trying to use a repeater field and can't seem to get it to work. I think it's an issue with my if statement because if I remove the while loop and try echo out anything from <?php if( have_rows($aboutInfo['cards']): ?> I get nothing. I've tried without the ID, and a hardcoded ID as the 2nd param. Also, just to test I did <?php if( !have_rows($aboutInfo['cards']): ?> and was able to get something to echo out.
The print_r above the if statement displays the array.
<?
/*
Template Name: 01-Homepage
*/
get_header(); ?>
<? $aboutInfo = get_field( 'about' ) ?>
<?$postid = get_the_ID(); ?>
<div class="row">
<div class="columns small-12 medium-7">
<h2>
<?= $aboutInfo['title'] ?>
</h2>
<p class="lead"> <?= $aboutInfo['content'] ?></p>
<pre><?php print_r($aboutInfo['cards']) ?></pre>
<?php if( have_rows($aboutInfo['cards'], $postid) ): ?>
<?php while(have_rows($aboutInfo['cards'])) : the_row(); ?>
<?php $image = get_sub_field('image') ?>
<p><?= $image['url'] ?></p>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
<?php get_footer(); ?>
Here is what my ACF looks like
I think you are doing it wrong. There are so many bugs in your code. check
https://www.advancedcustomfields.com/resources/group/ and have_rows() the first param need to be selector. check below code.
<?php
/* Template Name: 01-Homepage */
get_header();
$aboutInfo = get_field( 'about' );
$postid = get_the_ID();
if( have_rows('about') ):
$title = get_sub_field('title');
$content = get_sub_field('content');
?>
<div class="row">
<div class="columns small-12 medium-7">
<?php while( have_rows( 'about' ) ): the_row(); ?>
<h2><?php echo $title; ?></h2>
<p class="lead"><?php echo $content; ?></p>
<?php if( have_rows( 'cards' ) ): while( have_rows( 'cards' ) ) : the_row(); ?>
<?php $image = get_sub_field( 'image' ); ?>
<img src="<?php echo $image['url']; ?>" />
<?php endwhile; endif;
endwhile; ?>
</div>
</div>
<?php endif;
get_footer(); ?>
The issues was that I created a group called "about" and the "cards" were nested in that group and to access that field I needed to use "about_cards".
<?
/*
Template Name: 01-Homepage
*/
get_header(); ?>
<?php while ( have_posts() ) : the_post();
// group field
$about = get_field( 'about' );
if ( !empty( $about ) ) { ?>
<div class="row">
<div class="columns small-12 medium-7">
<?php if ( !empty( $about['title'] ) ) { ?>
<h2><?php echo esc_html( $about['title'] ); ?></h2>
<?php }
if ( !empty( $about['content'] ) ) { ?>
<p class="lead"><?php echo wp_kses_post( $about['content'] ); ?></p>
<?php }
if( have_rows( 'about_cards' ) ) : // repeater
while ( have_rows( 'about_cards' ) ) : the_row();
$about_card_image = get_sub_field('image');
$about_card_title = get_sub_field('title');
$about_card_content = get_sub_field('content');
if ( !empty( $about_card_image ) ) {
echo wp_get_attachment_image( $about_card_image, 'medium' );
}
if ( !empty( $about_card_title ) ) {
echo '<h3>' . esc_html( $about_card_title ) . '</h3>';
}
if ( !empty( $about_card_content ) ) {
echo '<p>' . esc_html( $about_card_content ) . '</p>';
} ?>
<?php endwhile;
endif; ?>
</div>
</div>
<?php } // about field not empty ?>
<?php endwhile; // End of the loop. ?>
<?php get_footer(); ?>
I am using a plugin on WordPress and I need to customise the php. This is the page: https://levels-ventures.com/buying/ and instead of one image displaying I would like this to be a slider.
This is the code I have:
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="es-property-inner">
<div class="es-property-thumbnail">
<div class="es-thumbnail">
<a href="<?php the_permalink(); ?>">
<?php if ( ! empty( $es_property->gallery ) ) : ?>
<?php es_the_post_thumbnail( 'es-image-size-archive' ); ?>
<?php elseif ( $image = es_get_default_thumbnail( 'es-image-size-archive' ) ) : ?>
<?php echo $image; ?>
<?php else: ?>
<div class="es-thumbnail-none">
<?php if ( ! $es_property->get_labels_list() ) : ?>
<?php _e( 'No image', 'es-plugin' ); ?>
<?php endif; ?>
</div>
<?php endif; ?>
<?php if ( $es_settings->show_labels ) : ?>
<ul class="es-property-label-wrap">
<?php foreach ( $es_property->get_labels_list() as $label ) : $value = $es_property->{$label->slug}; ?>
<?php if ( ! empty( $value ) ) : ?>
<li class="es-property-label es-property-label-<?php echo $label->slug; ?>"
style="color:<?php echo es_get_the_label_color( $label->term_id ); ?>"><?php _e( $label->name, 'es-plugin' ) ; ?></li><br>
<?php endif; ?>
<?php endforeach; ?>
</ul>
<?php endif; ?>
<?php if ( ! empty( $es_property->gallery ) && is_array( $es_property->gallery ) ) : ?>
<div class="es-thumbnail-bottom"><?php echo count( $es_property->gallery ); ?></div>
<?php endif; ?>
</a>
</div>
</div>
Does anything know how to change this so instead of displaying one image it displayes a slider of images?
Thanks for your help!!
Use Bootstrap's Carousel. Very simple to implement with slider. Please refer to their official website Carousel
I'm working on a Wordpress site and I have a header image on the homepage. It's only showing up on the homepage but I need it to show on every page. I found this code in the header.php file which I believe needs to be changed, but I'm not very familiar with php.
This is the code for the header image in the header.php file:
<?php $disable_page_title = get_post_meta( get_the_ID(), 'minimal_portfolio_page_title', true );
if( $disable_page_title !== 'on' ): ?>
<?php if( !is_front_page()): ?>
<section class="page-header jumbotron <?php if ( get_header_image() ) : ?>bg-image<?php endif; ?>" <?php if ( get_header_image() ) : ?> style="background-image:url('<?php echo esc_url( get_header_image() ); ?>');" <?php endif; ?>>
<?php if ( get_header_image() ) : ?><span class="bg-overlay"></span><?php endif; ?>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="title-wrap">
<?php if( is_page() || is_single() ){ ?>
<h2 class="page-title"><?php echo esc_html( get_the_title() ); ?></h2>
<?php } elseif( is_search() ){ ?>
<?php /* translators: %s: search term */
$page_title = sprintf( esc_html__( 'Search Results for: %s', 'minimal-portfolio' ), get_search_query() );
?>
<h2 class="page-title"><?php echo esc_html( $page_title ); ?></h2>
<?php }elseif( is_404() ){ ?>
<h2 class="page-title"><?php echo esc_html( 'Page Not Found: 404', 'minimal-portfolio' ); ?></h2>
<?php }elseif( is_home() ){ ?>
<h2 class="page-title"><?php single_post_title(); ?></h2>
<?php } else{
the_archive_title( '<h2 class="page-title">', '</h2>' );
}
if( $minimal_portfolio_breadcrumb_status ):
minimal_portfolio_breadcrumbs();
endif;
?>
</div>
</div>
</div>
</div>
</section>
<?php endif;
endif; ?>
Thank you!
Edit: This is how it shows on all pages but the home page. But I would like it to show the full header instead of only a section of it with the page title.
Header
This is the home page, where it shows the full header and how I'd like it to show on every page instead of how it does in the image above.
Home Header
You are not familiar with PHP so you can use this plugin for the header image.
https://wordpress.org/plugins/unique-headers/
I think its work for you
Remove the below-attached code from header.php
<?php $disable_page_title = get_post_meta( get_the_ID(), 'minimal_portfolio_page_title', true );
if( $disable_page_title !== 'on' ): ?>
<?php if( !is_front_page()): ?>
<section class="page-header jumbotron <?php if ( get_header_image() ) : ?>bg-image<?php endif; ?>" <?php if ( get_header_image() ) : ?> style="background-image:url('<?php echo esc_url( get_header_image() ); ?>');" <?php endif; ?>>
<?php if ( get_header_image() ) : ?><span class="bg-overlay"></span><?php endif; ?>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="title-wrap">
<?php if( is_page() || is_single() ){ ?>
<h2 class="page-title"><?php echo esc_html( get_the_title() ); ?></h2>
<?php } elseif( is_search() ){ ?>
<?php /* translators: %s: search term */
$page_title = sprintf( esc_html__( 'Search Results for: %s', 'minimal-portfolio' ), get_search_query() );
?>
<h2 class="page-title"><?php echo esc_html( $page_title ); ?></h2>
<?php }elseif( is_404() ){ ?>
<h2 class="page-title"><?php echo esc_html( 'Page Not Found: 404', 'minimal-portfolio' ); ?></h2>
<?php }elseif( is_home() ){ ?>
<h2 class="page-title"><?php single_post_title(); ?></h2>
<?php } else{
the_archive_title( '<h2 class="page-title">', '</h2>' );
}
if( $minimal_portfolio_breadcrumb_status ):
minimal_portfolio_breadcrumbs();
endif;
?>
</div>
</div>
</div>
</div>
</section>
<?php endif;
endif; ?>
And add this code in your page.php
<?php if( get_header_image() ) : ?>
<div class="header-banner">
<img src="<?php header_image(); ?>" width="<?php echo absint( get_custom_header()->width ); ?>" height="<?php echo absint( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
</div>
I have been trying to put the blog title below the blog post on my customised quark theme. However, everytime I do I get a blank blog post page (except header)
The code is:
<header class="entry-header">
<?php if ( is_single() ) { ?>
<h1 class="entry-title"><?php the_title(); ?></h1>
<?php }
else { ?>
<h1 class="entry-title">
<?php the_title(); ?>
</h1>
<?php } // is_single() ?>
<?php quark_posted_on(); ?>
<?php if ( has_post_thumbnail() && !is_search() ) { ?>
<a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( esc_html__( 'Permalink to ', 'quark' ) . '%s', the_title_attribute( 'echo=0' ) ) ); ?>">
<?php the_post_thumbnail( 'post_feature_full_width' ); ?>
</a>
<?php } ?>
I change it to:
<header class="entry-header">
<?php } // is_single() ?>
<?php quark_posted_on(); ?>
<?php if ( has_post_thumbnail() && !is_search() ) { ?>
<a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( esc_html__( 'Permalink to ', 'quark' ) . '%s', the_title_attribute( 'echo=0' ) ) ); ?>">
<?php the_post_thumbnail( 'post_feature_full_width' ); ?>
</a>
<?php if ( is_single() ) { ?>
<h1 class="entry-title"><?php the_title(); ?></h1>
<?php }
else { ?>
<h1 class="entry-title">
<?php the_title(); ?>
</h1>
<?php } ?>
I have also tried several variations of this with little success. I am sure I am being stupid, but any help would be great.
Thanks!
Try the following (based on my first answer and comments above):
<header class="entry-header">
<?php quark_posted_on(); ?>
<?php if ( has_post_thumbnail() && !is_search() ) { ?>
<a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( esc_html__( 'Permalink to ', 'quark' ) . '%s', the_title_attribute( 'echo=0' ) ) ); ?>">
<?php the_post_thumbnail( 'post_feature_full_width' ); ?>
</a>
<?php } ?>
<?php if ( is_single() ) { ?>
<h1 class="entry-title"><?php the_title(); ?></h1>
<?php }
else { ?>
<h1 class="entry-title">
<?php the_title(); ?>
</h1>
<?php } ?>
The second line may be causing issues unless there is a corresponding { somewhere above?