I need to show some categories in my home page, and show the category image, and also the link of the same. Using the WORDPRESS.
For them to stick to the same style of example is not the problem. I'm having difficulties appearing, that is, the problem is in the code that calls the categories and their attributes like: image, link and title.
Example
Here's what I'm trying to do:
<section id=""
class="projects">
<div class="js-projects-gallery">
<div class="projects_block row">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php
$args = array(
'show_option_all' => '',
'echo' => 1,
'hide_empty' => 0,
'style' => 'list',
'title_li' => __('Categorias')
);
?>
<div class="project project_item col-sm-6 col-md-4 col-lg-3">
<?php foreach (get_categories($args) as $cat) : ?>
<a class="link" href="<?php echo get_category_link($cat->term_id); ?>"
title="<?php echo $cat->cat_name; ?>">
<figure>
<img src="<?php echo z_taxonomy_image_url($cat->term_id); ?>"
class="size-goarch-image-480x880-croped">
<figcaption>
<h3 class="project-title">
<?php echo $cat->cat_name; ?>
</h3>
<h4 class="project-category">
<?php echo $cat->cat_name; ?>
</h4>
<div class="project-zoom"></div>
</figcaption>
</figure>
</a>
<?php endforeach; ?>
</div>
<?php endwhile; else: ?>
<div class="project project_item col-sm-6 col-md-4 col-lg-3">
<p><?php echo "Sorry, we have nothing posted yet."; ?></p>
</div>
<?php endif; ?>
</div>
</div>
</section>
Related
I'm messing around with my code. My goal is to display 4 custom post type on the homepage in the HTML layout I've created. Here's my code. Actually I can get the href but I can't loop the code not even achieve my scope.
<div class="roundedframe ">
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-sm-6">
<a class="portfolio-box" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div style="background-image: url('<?php the_post_thumbnail_url(); ?>');">
<div class="project-name"> <?php // WP_Query arguments
$args = array(
'name' => 'case-studies',
'nopaging' => true,
'posts_per_page' => '4',
);
// The Query
$query = new WP_Query( $args );
while ( $query->have_posts() ) : $query->the_post();
?>
Project Name
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
Assuming the post type you want is case-studies you should name the key post_type and not name. You also have to place the column inside the loop and close it afterwards. You also missed a </div> tag.
<?php $query = new WP_Query( [
'post_type' => 'case-studies',
'nopaging' => true,
'posts_per_page' => '4',
] ); ?>
<?php if ( $query->have_posts() ) : ?>
<div class="roundedframe ">
<div class="container-fluid">
<div class="row">
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<div class="col-lg-4 col-sm-6">
<a class="portfolio-box" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div style="background-image: url('<?php the_post_thumbnail_url(); ?>');">
<div class="project-name">
<h2><?php the_title(); ?></h2>
</div>
</div>
</div>
</div>
</a>
</div>
<?php endwhile; ?>
</div>
</div>
</div>
<?php endif; ?>
<?php wp_reset_postdata(); ?>
You should put your code in the looping area. What i can see, you missed the endwhile also.
<div class="roundedframe ">
<div class="container-fluid">
<div class="row">
<?php // WP_Query arguments
$args = array(
'name' => 'case-studies',
'nopaging' => true,
'posts_per_page' => '4'
);
// The Query
$query = new WP_Query($args);
while ($query->have_posts()):
$query->the_post(); ?>
<div class="col-lg-4 col-sm-6">
<a class="portfolio-box" href="<?php
get_the_permalink();
?>" title="<?php
get_the_title();
?>">
<div class="project-category text-faded">
Category
</div>
<div style="background-image: url('<?php
the_post_thumbnail_url();
?>');">
<div class="project-name">
Project Name
</div>
</div>
</a>
</div>
<?php
endwhile;
?>
</div>
</div>
</div><!--.roundedframe-->
Try this and let me know. It may help you. Before that you should learn about wp_query
https://codex.wordpress.org/Class_Reference/WP_Query
My current blog page shows all my blog posts in a grid of 3 by 'x'. However at the top I want to display the latest blog post as some sort of a featured post and thus style it a bit different (i.e full width). I tried doing it through css with :first-child but that didn't really work well. So now I'm trying the php approach. I however have no clue how to approach this. Can anyone show me where to start? This is my current code.
<section id="blogs" class="cards-list">
<div class="container cards">
<div class="row center-xs">
<?php
if(get_post_type() == 'post') {
$currentBlog = get_the_ID();
} else {
$currentBlog = '';
}
$loopBlog = new WP_Query(array(
'post_type' => 'post',
'posts_per_page' => -1,
'post__not_in' => array($currentBlog)
));
while ( $loopBlog->have_posts() ) : $loopBlog->the_post();
$blogIntro = get_field('blog_intro');
$blogImage = get_field('blog_image');
$blogImageUrl = $blogImage['sizes']['large'];
?>
<div class="col col-xs-12 col-md-4">
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" class="card card-event">
<figure style="<?php if($blogImageUrl != '') { echo "background-image:url('".$blogImageUrl."');"; } ?>"></figure>
<div class="content">
<span class="tag"><?php the_time('M d Y'); ?></span>
<div class="link"><h3><span><?php the_title(); ?></span></h3></div>
</div>
</a>
</div>
<?php
endwhile; wp_reset_query();
?>
</div>
</div>
You should be able to use current_post inside the loop and output different markup for the first post:
while ( $loopBlog->have_posts() ) : $loopBlog->the_post();
$blogIntro = get_field('blog_intro');
$blogImage = get_field('blog_image');
$blogImageUrl = $blogImage['sizes']['large'];
?>
<?php if ($loopBlog->current_post == 0): ?>
<!-- Output some other markup for the first post here -->
<div class="container-fluid">
</div>
<?php else: ?>
<div class="col col-xs-12 col-md-4">
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" class="card card-event">
<figure style="<?php if($blogImageUrl != '') { echo "background-image:url('".$blogImageUrl."');"; } ?>"></figure>
<div class="content">
<span class="tag"><?php the_time('M d Y'); ?></span>
<div class="link"><h3><span><?php the_title(); ?></span></h3></div>
</div>
</a>
</div>
<?php endif; ?>
<?php endwhile; wp_reset_query(); ?>
Text within my h2 tags is floating to the top of the division. I feel like there may be something my eyes are overlooking that is causing the title of the post to float to the top of the division. Unfortunatly I cannot see another area where I output the tite.
Here is my HTML/PHP. I appologize for the messyness.
<!-- locations page array -->
<?php $args = array( 'post_type' => 'weblizar_portfolio','posts_per_page' => -1 );
$portfolio = new WP_Query( $args );
if( $portfolio->have_posts() )
{ while ( $portfolio->have_posts() ) : $portfolio->the_post(); ?>
<div class="col-lg-4 col-md-4">
<!--<div class="img-wrapper">-->
<?php $defalt_arg = array('class' => "enigma_img_responsive");
$portfolio_button_link = get_post_permalink( $sample );
$dates = get_post_meta(get_the_ID(), 'date', true);
$postTitle = the_title(); ?>
<?php if(!isMobile()){ ?>
<a href='<?php echo $portfolio_button_link; ?>'>
<div class="author-item">
<div class="imageItem">
<?php if(has_post_thumbnail()):
the_post_thumbnail('portfo_4_thumb', $defalt_arg);
$port_thumbnail_id = get_post_thumbnail_id();
$image_thumbnail_url = wp_get_attachment_url($port_thumbnail_id);
endif; ?>
</div>
<div class="author-info">
<!-- THIS IS THE AREA NOT WORKING -->
<h2><?php echo $postTitle; ?></h2>
<h4><?php echo $dates; ?></h4>
</div>
</div>
</a>
<?php } else { ?>
<table>
<a href='<?php echo $portfolio_button_link;?>'>
<tr>
<td>
<?php echo $postTitle;?>
</td>
<td>
<?php echo $dates; ?>
</td>
</tr>
</a>
</table>
<?php } ?>
And here is the executed html:
<div class="col-lg-4 col-md-4">
<!--<div class="img-wrapper">-->
San Jose <a href="">
<div class="author-item">
<div class="imageItem">
<img width="260" height="160" src="" class="enigma_img_responsive wp-post-image" alt="San Antonio" srcset="" sizes="(max-width: 260px) 100vw, 260px"> </div>
<div class="author-info">
<h2></h2>
<h4>April 23rd, 2016</h4>
</div>
</div>
</a>
<!--</div>-->
</div>
You should replace the_title with get_the_title. The reason is that the_title just echos the title wherever you use it, while get_the_title returns it (which is what you want).
Edit:
Another solution is to call the_title() where are displaying your h2 tag like this:
<h2><?php the_title() ?></h2>
I'm working on a Wordpress site. I'm trying to make a category with the id 968 show up on the Wordpress site under the stories and successes div. However for some reason the stories and successes div is not having the content from the category inserted into it. Any information on how I can improve my query or PHP is much appreciated. If I need to update this post with more information please let me know. Below you will see the php template file I am using.
<?php
/**
* Template name: Random Template
*
*
*/
// Custom styles
wp_enqueue_style('stories-styles', get_bloginfo('stylesheet_directory') . '/assets/css/stories.css');
// TEMP -- Get the category from the slug
the_post();
$categorySlugs = array(
'religious-freedom' => 'religious-freedom',
'social-and-economic-justice' => 'social-and-economic-justice',
'civil-and-human-rights' => 'civil-and-human-rights'
);
// Get category
$categorySlugs = $categorySlugs[$post->post_name];
$storyQuery = new WP_Query(array(
'post_type' => array('stories', 'press-releases'),
'category_name' => $categorySlugs,
'posts_per_page' => 4,
'paged' => (get_query_var('paged')) ? get_query_var('paged') : 1
));
$successesQuery = new WP_Query(array(
'post_type' => 'stories',
'cat' => 968,
'posts_per_page' => 1,
'offset' => 5
));
// Remove yarpp
remove_filter('the_content', array($yarpp, 'the_content'), 1200);
?>
<?php get_header(); ?>
<div class="category-title">
<div class="container">
<h2><?php the_title() ?></h2>
</div>
</div>
<div id="primary" class="content-area">
<div id="content" class="site-content" role="main">
<div class="container">
<div class="row">
<div class="col-md-12">
<?php if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb('<p id="breadcrumbs">','</p>');
} ?>
<article class="featured-issue-article">
<?php if ( has_post_thumbnail() && ! post_password_required() ) : ?>
<div class="entry-thumbnail">
<?php the_post_thumbnail('full', array( 'class' => "img-responsive attachment-post-thumbnail")); ?>
</div>
<?php endif; ?>
<div class="content">
<?php the_content() ?>
</div>
</article>
</div>
</div>
<hr class="large blue" />
<div class="row">
<div class="col-md-8">
<ul class="section-list">
<?php while ($storyQuery->have_posts()) : $storyQuery->the_post(); ?>
<li>
<h3><?php the_title() ?></h3>
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail('post-thumbnail', array( 'class' => "img-responsive attachment-post-thumbnail")); ?>
<?php endif; ?>
<?php if( get_field('custom_excerpt', $values_id)): ?>
<p><?php echo the_field('custom_excerpt'); ?></p>
<?php endif; ?>
<a class="more" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">Read More...</a>
</li>
<?php endwhile; ?>
</ul>
<?php
set_query_var('category_slug', $categorySlug);
get_template_part('issues-nav', 'bottom')
?>
<hr class="small blue" />
<div class="success-stories">
<h2>Stories & Successes</h2>
<ul>
<?php while ($successesQuery->have_posts()) : $successesQuery->the_post(); ?>
<li>
<h4>
<?php the_title() ?>
</h4>
<?= strip_tags($post->post_excerpt) ?>
<a class="more" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">Read More...</a>
</li>
<?php endwhile; ?>
</ul>
</div>
</div>
<div class="col-md-4">
<?php get_sidebar(); ?>
</div>
</div>
</div>
</div>
</div><!-- #content -->
</div><!-- #primary -->
<?php get_footer(); ?>
I am currently using this code below to display all the pages in my category:
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<a href="<?php echo get_permalink(); ?>">
<?php echo "<div class='col-md-6' style='margin-bottom:20px;'>"; ?>
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12 nopr"><?php echo get_the_post_thumbnail( $page->ID, 'categoryimage', array('class' => 'testclass')); ?> </div>
<div class="col-md-6 col-sm-6 col-xs-12 categorytiletext2">
<div class="testdiv">
<h4><?php the_title(); ?></h4>
<p><?php the_excerpt(); ?></p>
</div>
</div>
</div>
<?php echo "</div>"; ?>
</a>
<!-- If there is no posts, display an error message -->
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
<!-- If there is no posts, display an error message -->
This works really well, but I have now added tags to these pages. What I need to do, is remove certain tags from the loop. For example, my tag is called maintag.
I have tried to add the following:
<?php $my_query = new WP_Query(array('tag__not_in'=>array('maintag'), 'category_name'=>'Clients', 'orderby'=>'title', 'order'=>'ASC')); ?>
but this didn't work.
Does this need to be done by ID's?
EDIT:
New Code, still not working??
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php $tag_object = get_term_by('slug', 'sector1', 'post_tag');
$tagID = $tag_object->term_id;
$my_query = new WP_Query(array('tag__not_in'=> array($tagID), 'category_name'=>'Clients', 'orderby'=>'title', 'order'=>'ASC')); ?>
<a href="<?php echo get_permalink(); ?>">
<?php echo "<div class='col-md-6' style='margin-bottom:20px;'>"; ?>
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12 nopr"><?php echo get_the_post_thumbnail( $page->ID, 'categoryimage', array('class' => 'testclass')); ?> </div>
<div class="col-md-6 col-sm-6 col-xs-12 categorytiletext2">
<div class="testdiv">
<h4><?php the_title(); ?></h4>
<p><?php the_excerpt(); ?></p>
</div>
</div>
</div>
<?php echo "</div>"; ?>
</a>
<!-- If there is no posts, display an error message -->
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
<!-- If there is no posts, display an error message -->
if maintag is slug then use 'slug' in first parameter if it is name then use 'name' instead of slug
link: get_term_by()
$tag_object = get_term_by('slug', 'maintag', 'post_tag');
$tagID = $tag_object->term_id;
$my_query = new WP_Query(array('tag__not_in'=> array($tagID), 'category_name'=>'Clients', 'orderby'=>'title', 'order'=>'ASC'));