Hey all, I'm trying to add some div's with variables into a function. I know the html needs to be wrapped, what is the best way to do this? Here is the code I'm trying to add to a function.
function add_before_sidebar( ) {
<div class="acro-sidebar-preview">
<div class="acro-sidebar">
<div class="image-container">
<div id="profile-picture-preview" class="profile-picture" style="background-image: url(<?php print $picture; ?>)">
</div>
</div>
<h1 class="acro-username"><?php print $fullname; ?></h1>
<h2 class="acro-description"><?php print $description; ?></h2>
<div class="icons-wrapper">
<?php print '<img src="' . plugins_url( 'img/twitter.png', __FILE__ ) . '" >' ?>
<?php print '<img src="' . plugins_url( 'img/facebook.png', __FILE__ ) . '" >' ?>
<?php print '<img src="' . plugins_url( 'img/googleplus.png', __FILE__ ) . '" >' ?>
</div>
</div>
</div>
}
add_action( 'get_sidebar', 'add_before_siderbar' );
All of the above code is connected to this set of variables I have setup
<?php
$picture = esc_attr( get_option('profile_picture') );
$firstname = esc_attr( get_option('first_name') );
$lastname = esc_attr( get_option('last_name') );
$fullname = $firstname . ' ' . $lastname;
$description = esc_attr( get_option('user_description') );
$twitter = esc_attr( get_option('twitter_handler') );
$facebook = esc_attr( get_option('facebook_handler') );
$google = esc_attr( get_option('google_handler') );
?>
The code itself works great outside of the function. I'm familiar with writing a div with variable in a function but this is a bit more complex then I'm used to. Any help would be appreciated. Thanks in advance!
You can write like this:
function add_before_sidebar( ) {
?>
<div class="acro-sidebar-preview">
<div class="acro-sidebar">
<div class="image-container">
<div id="profile-picture-preview" class="profile-picture" style="background-image: url(<?php print $picture; ?>)">
</div>
</div>
<h1 class="acro-username"><?php print $fullname; ?></h1>
<h2 class="acro-description"><?php print $description; ?></h2>
<div class="icons-wrapper">
<?php print '<img src="' . plugins_url( 'img/twitter.png', __FILE__ ) . '" >' ?>
<?php print '<img src="' . plugins_url( 'img/facebook.png', __FILE__ ) . '" >' ?>
<?php print '<img src="' . plugins_url( 'img/googleplus.png', __FILE__ ) . '" >' ?>
</div>
</div>
</div>
<?php }
add_action( 'get_sidebar', 'add_before_siderbar' );
Related
I am having some trouble trying to add an if statement to hide an ACF field inside of an HTML echo.
<?php
$link = get_permalink();
$availability = get_field('availability');
$delivery_date = get_field('delivery_date');
$url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
if ( has_post_thumbnail() ) {
echo '<a href="' .$link. '">
<div class="thumbnail" style="background: url('.$url.')">
<div class="tags one">
<span class="availability">' .$availability. '</span>
'if( get_field('delivery_date') ):' <span class="delivery-date">' .$delivery_date. '</span> 'endif;'
</div>
</div>
</a>';
}
?>
Please would someone be able to advise on where I'm going wrong with the if statement to hide the field if it's empty? At the moment it just errors the page.
Break the PHP code out of the text string, this is one way
<?php
$link = get_permalink();
$availability = get_field('availability');
$delivery_date = get_field('delivery_date');
$url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
if ( has_post_thumbnail() ) {
echo '<a href="' .$link. '">
<div class="thumbnail" style="background: url('.$url.')">
<div class="tags one">
<span class="availability">' .$availability. '</span>';
if( get_field('delivery_date') ):
echo '<span class="delivery-date">' .$delivery_date. '</span>';
endif;
echo '</div>
</div>
</a>';
}
?>
I want to implement an ajax post filter based on category and found this which works: https://rudrastyh.com/wordpress/ajax-post-filters.html
The only thing is that I would like the post output from function.php to be different. Originally it is just:
echo '<h2>' . $query->post->post_title . '</h2>';
but I want to use my own post loop configuration:
<div <?php post_class( 'front-post-small col-front' ); ?> id="post-<?php the_ID(); ?>">
<a href="<?php echo esc_url( the_permalink() ); ?>">
<div class="front-post-img">
<?php the_post_thumbnail( array(756,512) ); ?>
<div class="post-caption">
<h3 class="text-uppercase front-post-title"><?php the_title(); ?></h3>
</div>
</div>
</a>
</div>
I have tried passing it with echo, but it either doesn't work at all or the classes and links are printed instead of producing links and css.
Solved:
echo '<div class="front-post-small col-front">';
echo '<a href="' . get_permalink() . '">';
echo '<div class="front-post-img">';
echo '<img' . the_post_thumbnail( array(756,512) ) . '>';
echo '<h3 class="text-uppercase front-post-title post-caption">' . $query->post->post_title . '</h3>';
echo '</div>';
echo '</a>';
echo '</div>';
im a total php illiterate so i wanted to make a change in the php file of my wordpress website. i have some cards which represent my services but the clickable link is only in the "read more..." phrase but i want to make the whole card be as a link.
below is the php code i think is associated with that:
<?php elseif( $style == 'style_5' ) : ?>
<h3><?php echo esc_html( $title ); ?></h3>
<?php else : ?>
<h4 class="no_stripe"><?php echo esc_html( $title ); ?></h4>
<?php endif; ?>
</div>
<?php } ?>
<?php echo wpb_js_remove_wpautop( $content, true ); ?>
<?php
if ( $link['url'] ) {
if ( ! $link['title'] ) {
$link['title'] = esc_html__( 'Read More', 'consulting' );
}
if ( ! $link['target'] ) {
$link['target'] = '_self';
}
if( $icon ){
$link['title'] = '<span>' . esc_html( $link['title'] ) . '</span>' . '<i class=" ' . esc_attr( $icon ) . ' stm_icon"></i>';
}
echo ' <a class="read_more" target="' . esc_attr( $link['target'] ) . '" href="' . esc_url( $link['url'] ) . '">' . $link['title'] . '</a>';
}
?>
<?php if( $style == 'style_3' ): ?>
</div>
<?php endif; ?>
<?php endif; ?>
In the html code, try to put the whole card inside of an 'a tag', this should make the whole card a link, and in the 'a tag' put your desired link in the href="". This should work!
Well, this is the link (from your code):
echo ' <a class="read_more" target="' . esc_attr( $link['target'] ) . '" href="' . esc_url( $link['url'] ) . '">' . $link['title'] . '</a>';
So, I would simply try to wrap that around the container of your "card" by splitting it up into...
echo ' <a class="read_more" target="' . esc_attr( $link['target'] ) . '" href="' . esc_url( $link['url'] ) . '">' . $link['title'];
...and:
echo '</a>';
The code of the container has to go between those two parts. Most likely that would be directly under the first line of the code you posted for the first part until the original position of the closing a tag. And since there is (non-php) HTML code in that section, that first line should be wrapped by php tags, like:
<?php echo ' <a target="' . esc_attr( $link['target'] ) . '" href="' . esc_url( $link['url'] ) . '">' . $link['title']; ?>
Probably the "read more" class whould be avoided in the link now.
So the complete code would be
<?php elseif( $style == 'style_5' ) : ?>
<?php echo ' <a target="' . esc_attr( $link['target'] ) . '" href="' . esc_url( $link['url'] ) . '">' . $link['title']'; ?>
<h3><?php echo esc_html( $title ); ?></h3>
<?php else : ?>
<h4 class="no_stripe"><?php echo esc_html( $title ); ?></h4>
<?php endif; ?>
</div>
<?php } ?>
<?php echo wpb_js_remove_wpautop( $content, true ); ?>
<?php
if ( $link['url'] ) {
if ( ! $link['title'] ) {
$link['title'] = esc_html__( 'Read More', 'consulting' );
}
if ( ! $link['target'] ) {
$link['target'] = '_self';
}
if( $icon ){
$link['title'] = '<span>' . esc_html( $link['title'] ) . '</span>' . '<i class=" ' . esc_attr( $icon ) . ' stm_icon"></i>';
}
echo '</a>'; } ?>
<?php if( $style == 'style_3' ): ?>
</div>
<?php endif; ?>
<?php endif; ?>
All this is based on the code you provided, there might be other stuff to consider, but you can try this.
I'm trying to get the featured image of a post in wordpress and output it as the background image of a div and align it to the bottom right of the div.
So far I have the code shown below but the background-image: url(' . wp_get_attachment_url() . '); is returning as background-image: url(); when the code is executed.
Thanks in advance to anyone that can help!
<?php
query_posts(array( 'category_name' => 'what-we-do'));
if(have_posts()) : while(have_posts()) : the_post();
?>
<div>
<?php
echo do_shortcode( '
[expand title="' . get_the_title() . '" swaptitle="Close" trigpos="below" id="' . get_the_ID() . '" trigclass="arrowright" rel="whatwedo-highlander"]
<h4 class="collapse-inner-title">' . get_the_title() . '</h4>
<div class="whatwedo-collapse-background-img" style="background-image: url(' . wp_get_attachment_url() . '); background-position: right bottom;">
<div class="whatwedo-collapse-content">' . get_the_content() . '</div>
</div>
[/expand]
' );
?>
</div>
<?php
endwhile;
endif;
wp_reset_query();
?>
Try this:
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' );
then us $image[0] When setting the background-image
I have this code for displaying a shortcode.
<?php
function recent_posts_function() {
$mypost = array( 'post_type' => 'gallery_pictures', );
$loop = new WP_Query( $mypost );
?>
<div id="boxhover">
<?php while ( $loop->have_posts() ) : $loop->the_post();?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
<!--Fade-->
<?php $ddd = '<div class="mosaic-block fade">
<a href="'. $image[0] . '" data-fancybox-group="gallery" target="_blank" class="mosaic-overlay preview fancybox" title="' . the_title . '">
<div class="details">
<h4>' . the_title() . '</h4>
<p>' . the_content_rss('', TRUE, '', 30) . '</p>
<br/>
<div class="btt">VIEW</div>
</div>
</a>
<div class="mosaic-backdrop"><img src="' . $image[0] . '" alt="gallery thumbnail" /></div>
</div>';
endwhile; ?>
</div>
<?php
return $ddd;
}
function register_shortcodes(){
add_shortcode('gallery', 'recent_posts_function');
}
add_action( 'init', 'register_shortcodes');
as you can see from the above codes, the 'return $ddd' should return all the output from the loops that the 'while' process done but its display only one.
Im currently looking for a solution and would love to hear any suggestion, recommendations and ideas on how to do it. Thank in advance.
You need to add a [dot] before your = [equal] on the loop while.
This will cause each loop add content current with the previous.
<?php function recent_posts_function() {
$ddd = ''; //First declare the string var ?>
...
<?php while ( $loop->have_posts() ) : $loop->the_post();?>
<?php $ddd .= '<div class="mosaic-block fade">'; // Put a [dot] before sign symbol ?>
<?php endwhile; ?>
...
return $ddd;
...
<? php } ?>