wordpress blog title url - php

I'm trying to make my blog titles link to the full post from the preview area so the title should have the same function as the read more button. The blogs are in a masonry layout and I'm using a themeforest theme.
This is the blog page.
I believe this to be the php code that controls the layout - hope it helps.
Sorry php newbie here.
I have tried using <h5 class="post-title">'. get_the_title() .'</h5>'; but all this did was generate a broken url containing '.get_permalink().'" in it.
Thank you
<?php if ( '' != get_the_title() ): ?>
<h5 class="post-title"><?php the_title(); ?></h5>
<?php endif ?>
<?php if (has_post_format('link')): ?>
<?php echo __("Read more", TEMPNAME); ?><span class="icon-arrow-right9"></span>
<?php else: ?>
<?php echo __("Read more", TEMPNAME); ?><span class="icon-arrow-right9"></span>
<?php endif ?>
<?php endif; ?>

You just need to wrap the h5 title in an anchor tag <a> on line 37 of your snippet. The specific code to change is:
New Answer
<a href="<?php get_permalink(); ?>">
<h5 class="post-title"><?php the_title(); ?></h5>
</a>
or from you code, try:
<a href="<?php echo $nz_link_url; ?>" title="<?php echo __("Go to", TEMPNAME).' '.$nz_link_url; ?>">
<h5 class="post-title"><?php the_title(); ?></h5>
</a>
Old Answer
if ( '' != get_the_title() ){
$output .= '<h5 class="post-title">'. get_the_title() .'</h5>';
}
You may have to update your CSS to reflect the anchor tag in front of the H5
Full Code
while($recent_posts->have_posts()) : $recent_posts->the_post();
$output .= '<div class="post format-'.get_post_format().'" data-grid="ninzio_01">';
$output .= '<div class="post-wrap nz-clearfix">';
if (get_post_format() == 'image') {
$values = get_post_custom( $post->ID );
$nz_image_url = isset($values["image_url"][0]) ? $values["image_url"][0] : "";
if (!empty($nz_image_url)) {
$output .='<a class="nz-more" href="'.get_permalink().'">';
$output .= '<div class="nz-thumbnail">';
$output .= '<img src="'.$nz_image_url.'" alt="'.get_the_title().'">';
$output .= '<div class="ninzio-overlay"></div>';
$output .= '<div class="post-date"><span>'.get_the_date("d").'</span><span>'.get_the_date("M").'</span></div>';
$output .='</div>';
$output .='</a>';
}
} else {
if (has_post_thumbnail()) {
$output .='<a class="nz-more" href="'.get_permalink().'">';
$output .= '<div class="nz-thumbnail">';
$output .= get_the_post_thumbnail( $post->ID, $size );
$output .= '<div class="ninzio-overlay"></div>';
$output .= '<div class="post-date"><span>'.get_the_date("d").'</span><span>'.get_the_date("M").'</span></div>';
$output .='</div>';
$output .='</a>';
}
}
$output .= '<div class="post-body">';
if ( '' != get_the_title() ){
$output .= '<h5 class="post-title">'. get_the_title() .'</h5>';
}
if ($excerpt == "true") {
$output .= '<div class="post-excerpt">'.nz_excerpt(95).'</div>';
}
$output .=''.__("Read more", TEMPNAME).' <span class="icon-arrow-right9"></span>';
$output .= '</div>';
$output .= '</div>';
$output .= '</div>';

Related

Wordpress use query as AJAX

I have a custom field selectbox where I chose which Posts I want to be displayed. Now I want the query, where I get the selected Posts and its custom fields, to somehow be used as an AJAX-call so that I can use the data-output to build a masonry-grid. Is that possible?
here is my data/query:
$posts = get_field('choose_artist');
if( $posts ): ?>
<?php foreach( $posts as $p ): ?>
<div class="artist">
<a href="<?php echo get_permalink( $p->ID ); ?>">
<div style="position: relative;">
<?php $image = get_field('artist_image', $p->ID); ?>
<div class="artist-image" style="background-image:url('<?php echo $image['url']; ?>')"></div>
<div class="overlay">
<div class="content">
<p><?php the_field('artist_name', $p->ID); ?></p>
</div>
</div>
</div>
</a>
</div>
<?php endforeach; ?>
So, my goal is something like:
$.ajax({
url: '/the query above',
success: function(data){
data is the query html
}})
Is that even possible?
ajax.php
$content = '';
if( $posts ) {
foreach( $posts as $p ) {
$image = get_field('artist_image', $p->ID);
$content .= '<div class="artist">';
$content .= '<a href="' . get_permalink( $p->ID ) . '">';
$content .= '<div style="position: relative;">';
$content .= '<div class="artist-image" style="background-image:url("' . $image['url'] . '")"></div>';
$content .= '<div class="overlay">';
$content .= '<div class="content">';
$content .= '<p>' . get_the_field('artist_name', $p->ID). '</p>';
$content .= '</div>';
$content .= '</div>';
$content .= '</div>';
$content .= '</a>';
$content .= '</div>';
}
}
echo $content;
main.js / .php (whereever you have the ajax call)
$.ajax({
url: '/ajax.php', //Path to the ajax.php script
success: function(data){
console.log(data);
}});
Check the documentation for how to catch errors, check for success etc. etc: http://api.jquery.com/jquery.ajax/
There are better ways to do the AJAX page, so refactor it and make it neater, but something similar to the above should work for you if I am understanding your needs, though you'll probably need to tweak it to get what you want.

Get each images in body in Wordpress

I have custom PHP scope in my Wordpress theme, like this:
foreach ($myprojects as $post){
setup_postdata( $post );
$output .= '<div class="col-xs-6 col-sm-3">';
$output .= '<div class="portfolio-item">';
if (has_post_thumbnail($post->ID)) {
$thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'medium');
$large_image = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full');
$content = get_post_field('post_content', $post_id);
$output .= '<img class="img-responsive" src="'.$thumb[0].'" title="" alt="">';
}else{
$output .= '<img class="img-responsive" src="images/work_1.jpg" title="" alt="">';
}
$post_id = get_the_title($post->ID);
$post_name = CFS()->get('project_name', '');
$output .= '<a class="overlay" rel="shadowbox" href="'.$large_image[0].'">';
$output .= '<p class="btn-preview">'.$post_id.'</p>';
$output .= '</a>';
$output .= '</div>';
$output .= '</div>';
$count++;
$index++;
}
Yes, it works fine. When I click a tag, open $large_image via prettyPhoto.
But this code for single image. I want to thumbnails stay same, but when click to link, open that multiple image via prettyPhoto. So, imported 2 images in post body and want to show these images.
In a nutshell, this code:
$large_image = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full');
Must be like this:
$large_image = wp_get_attachment_image_src( $body($post->ID), 'full');
But I know, this is not correct code. Its pseudo.
How can I fix my problem? Thanks.
Change your lightbox solution to fancyBox, use data-fancybox-group and a bit of Wordpress/PHP knowledge... that's it!
foreach ($myprojects as $post){
setup_postdata( $post );
$output .= '<div class="col-xs-6 col-sm-3">';
$output .= '<div class="portfolio-item">';
if (has_post_thumbnail($post->ID)) {
$thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'medium');
$large_image = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full');
$content = get_post_field('post_content', $post_id);
$output .= '<img class="img-responsive" src="'.$thumb[0].'" title="" alt="">';
}else{
$output .= '<img class="img-responsive" src="images/work_1.jpg" title="" alt="">';
}
$post_id = get_the_title($post->ID);
$post_name = CFS()->get('project_name', '');
$output .= '<a class="overlay test fancybox" data-fancybox-group="'.$post->ID.'" href="'.$large_image[0].'">';
$output .= '<p class="btn-preview">'.$post_id.'</p>';
$output .= '</a>';
$output .= '</div>';
$output .= '</div>';
$attached_images = get_attached_media('image', $post->ID);
foreach($attached_images as $image){
$large_attached_image = wp_get_attachment_image_src($image->ID,'full');
if($large_image[0] != $large_attached_image[0]){
$output .= '<a class="overlay test fancybox" data-fancybox-group="'.$post->ID.'" style="display:none" href="'.$large_attached_image[0].'"></a>';
}
}
$count++;
$index++;
}

Creating a Loop that only changes the field name

I'm teaching myself PHP and could not find an answer similar to what I'm trying to do. If you know of an article please paste it here and I'll view it or you can help me here.
What I'm trying to do is create a loop that will change the $field_name in get_field_object('$field_name'). Everything in my section tags are similar except the $field_name and the image I'm retrieving from my directory.
Here is my code:
<div class="clientele">
<section>
<img src="<?php echo get_template_directory_uri(); ?>/img/client.png" />
<h2><?php $field = get_field_object("client"); echo $field['label']; ?></h2>
<p><?php echo $field['value']; ?></p>
</section>
<section>
<img src="<?php echo get_template_directory_uri(); ?>/img/task.png" />
<h2><?php $field = get_field_object("task"); echo $field['label']; ?></h2>
<p><?php echo $field['value']; ?></p>
</section>
<section>
<img src="<?php echo get_template_directory_uri(); ?>/img/brand.png" />
<h2><?php $field = get_field_object("brand"); echo $field['label']; ?></h2>
<p><?php echo $field['value']; ?></p>
</section>
</div>
There is obviously a better way to loop this because I understand I'm repeating myself.
You can use this code
$data_array = array("client","task","brand");
$output = '<div class="clientele">';
foreach($data_array as $data){
$Field = get_field_object($data);
$output .= '<section>';
$output .= '<img src='. get_template_directory_uri()."/img/{$data}.png/>";
$output .= '<h2>'. $field['label'] . "</h2>";
$output .= "<p>" . $field['value'] . "</p>";
$output .= '</section>';
}
$output .= '</div>';
echo $output;

wordpress ignores formatting when using template tags in functions.php

I am using the following code to create a shortcode for use in the WYSIWYG.
function consultants( $atts, $content = null ) {
$output = '';
$consultant_query = new WP_Query('post_type=consultants&showposts=10');
if ($consultant_query->have_posts()) :
$output .= '<div class="col-md-12">';
while ($consultant_query->have_posts()) : $consultant_query->the_post();
$output .= '<div class="col-xs-12 col-sm-5 col-md-4 kam-tile-own-bg"><h1>' .the_title(). '</h1> ';
if(has_post_thumbnail())
{
$output .= get_the_post_thumbnail($post->ID,'wpbs-featured-avatar');
} else {
$output .= '
<img class="kam-avatar" width="62" height="62" src="'.get_template_directory_uri().'/images/avatar#2x.jpg" class="attachment-featured_image wp-post-image" alt="" />'; }
$output .= '</div>';
endwhile;
$output .= '</div>';
endif;
wp_reset_postdata();
return $output;
}
The code works fine - HOWEVER it fails on the .the_title(). it throws this at the top of the page it has no respect for the tags or the in which it is contained.
Many thanks
instead of the_title(); use get_the_title();

Wordpress: Wrapping two posts into one div

I'm using Foundation for a wordpress theme and I need to wrap two posts into one div with class of 'row'. The thing is I need to put div class="row" before the first post closing the the second post with div and it should repeat with every new posts.
Here is my code:
<?php query_posts( 'cat=2&showposts=9&orderby=date&order=DESC' ); ?>
<div <?php post_class('small-12 medium-6 large-6 columns') ?> id="post-<?php the_ID(); ?>">
<?php echo '<a href="', get_permalink(), '">';
if ( has_post_thumbnail() ) {the_post_thumbnail();}
else { echo '<img src="', get_template_directory_uri( 'template_directory' ), '/images/thumb-default.png','" alt="" />'; }
echo '</a>';
?>
<h3><?php the_title(); ?></h3>
<p><?php echo get_excerpt(); ?></p>
</div>
something like this i think
<?php
$count = 1;
$outputstring = "";
ur while loop
if ( $count % 2 != 0 )
{
$outputstring .= " <row div>";
}
$outputstring .= "<div" . post_class('small-12 medium-6 large-6 columns'). ' id="post-'. the_ID() .'>';
YOUR OUTPUT CODE HERE
if ( $count % 2 == 0 )
{
$outputstring .= " </end row div>";
}
$count++;
END your while loop
echo $outputstring; /// here is where u output the WHOLE thing outside of your loop
?>

Categories