I'm editing the twenty eleven theme but I want to change the categories so they display the icons as a #fontface icon instead of a word.
The categories needs to look something like this (using an art category as an example):
<i class="icon-brush"></i>
However this is how it currently looks.
<span class="entry-utility-prep entry-utility-prep-cat-links">Posted in</span>Art
Here is what my code is at the moment:
<?php $show_sep = false; ?>
<?php if ( 'post' == get_post_type() ) : // Hide category and tag text for pages on Search ?>
<?php
/* translators: used between list items, there is a space after the comma */
$categories_list = get_the_category_list( __( ', ', 'twentyeleven' ) );
if ( $categories_list ):
?>
<span class="cat-links">
<?php printf( __( '<span class="%1$s">Posted in</span> %2$s', 'twentyeleven' ), 'entry-utility-prep entry-utility-prep-cat-links', $categories_list );
$show_sep = true; ?>
</span>
<?php endif;?>
<?php endif; // End if categories ?>
The class needs to change depending on what post category is set is there a way to manually set what icon links to which category?
You can view my live template here http://mhutchinson.me.uk/
Thanks for your help!
Megan
You might wanna try something like this:
(change the printed HTML inside the foreach to fit your needs)
<?php
foreach((get_the_category()) as $category) {
echo '<img src="http://example.com/images/' . $category->cat_ID . '.jpg" alt="' . $category->cat_name . '" />';
}
?>
Cheers
Related
Is it possible to add anchor links to Advanced Custom Fields?
I've created a page that shows images that when you click on the image a lightbox opens with the description. I have it all working without using Advanced Custom Fields but I'm trying to make it user friendly for the client so I added fields for them to just fill in the information and everything is already styled.
The problem is the tabs use an Anchor Link to link to the ID DIV that opens up the lightbox with the description - it works but not when I use the fields I created.
I created a url field for them to fill in the #div name for the anchor url and a field for the name of the #div for the anchor to link to. (Hope that makes sense!)
I'm also using repeater fields so they can add/delete flavors.
This is the code I am using -
<?php
// check if the repeater field has rows of data
if( have_rows('flavors') ):
// loop through the rows of data
while ( have_rows('flavors') ) : the_row();
// display a sub field value
?>
<li>
******** This is the anchor link *************
<?php
$link = get_sub_field('flavor_name');
if( $link ): ?>
<a href="<?php echo esc_url( $link ); ?>" class="wplightbox" data-width=900 data-height=800>
<?php
$image = get_sub_field('beer_image');
if( !empty( $image ) ): ?>
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
<?php endif; ?>
<?php if( get_sub_field('beer_title') ): ?>
<?php the_sub_field('beer_title'); ?>
<?php endif; ?>
</a>
<?php endif; ?>
********* This is the div that needs to pick up the anchor name typed in as the Div ID name *****
<div id="<?php if( get_sub_field('flavor_name') ): ?>" style="display: none;">
<?php the_sub_field('flavor_name'); ?>
<?php endif; ?>
<div class="flavors">
<div class="flavorsleft">
<?php
$image = get_sub_field('beer_image');
if( !empty( $image ) ): ?>
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
<?php endif; ?>
</div>
<div class="flavorsright">
<h3><?php if( get_sub_field('beer_title') ): ?>
<?php the_sub_field('beer_title'); ?>
<?php endif; ?></h3>
<div class="percent">
<?php if( get_sub_field('alcohol_percentage') ): ?>
<?php the_sub_field('alcohol_percentage'); ?>
<?php endif; ?>
</div>
<?php if( get_sub_field('beer_description') ): ?>
<?php the_sub_field('beer_description'); ?>
<?php endif; ?>
</div>
</div>
</div>
<div class="clear"></div>
</li>
<?php
endwhile;
else :
// no rows found
endif;
?>
</ul>```
This is the dev site where it's at - https://headley.tfm-dev.com/beers
The page is working right now because it's currently built not using the ACF fields (I took them off for now and rebuilt it) but I would like to change it so the owner can make changes.
Thank you!
[![Screenshot of Advanced Custom Fields][1]][1]
[![Screenshot of Advanced Custom Fields Redone][2]][2]
[1]: https://i.stack.imgur.com/NeKYe.jpg
[2]: https://i.stack.imgur.com/uUN0G.png
On your dev site in the source code the anchor href is an id but you are using a page link field to match to the get_sub_field('flavor_bottom_section_name') so this would return a url so won't work.
Correct me if I'm wrong but you are using 2 repeaters, does that not reply on each of them to match up to each other? I would do this wiht one repeater field and you'd be able to avoid mistakes being made and would probably require less fields e.g you would only need one field for the anchor and one field for the div. You can have 1 repeater field but you can have 2 separate loops through the same repeater just getting what you want out of it on each loop.
ADDITIONAL
This line of code nothing is being ouput into the id=""
<div id="<?php if( get_sub_field('flavor_name') ): ?>" style="display: none;">
I think you need to echo the sub field like this maybe
<div id="<?php echo get_sub_field('flavor_name') ?>" style="display: none;">
Yon can see in the red boxes I've marked that the id attribute is empty on the div, even if I change it locally in the inspector it works, not sure why you got an error earlier but I also think that the value in your field might have # before it but the # is only only required in the href not the id.
Final Solution (Hopefully)
Ok I used your code and I see why you were getting the critical error this:
<a href="#<?php if( get_sub_field('beer_title') ): ?>" class="wplightbox" data-width=900 data-height=800 >
<?php the_sub_field('beer_title'); ?>
<?php endif; ?>
Needs to change to this:
<a href="#<?php the_sub_field('beer_title'); ?>" class="wplightbox" data-width=900 data-height=800 >
<?php the_sub_field('beer_title'); ?>
You have and if in there which isn't needed so removing that and echoing the sub field fixes it, we just needed to remove the endif also. I should have asked what the error was originally.
What you are saying here is
<a href="#
// IF THERE IS A SUB FIELD VALUE FOR BEER TITLE
<?php if( get_sub_field('beer_title') ): ?>"
// OUTPUT THIS
class="wplightbox" data-width=900 data-height=800 >
<?php the_sub_field('beer_title'); ?>
get_sub_field() doesn't output anything it has to be echoed or else use the_sub_field() instead.
I have a wordpress blog page installed in subfolder of my website(converted from html)and a static html home page.
I would like to display 3 latest posts and its featured images on home page. With code below i can display latest posts text but i dont know how to show featured images of posts. Into index.php of a wordpress custom theme i placed featured photo inside a div:
<div id="blogphoto"><?php the_post_thumbnail(); ?></div>
This is the code on static html index.php page which is pulling out latest post. Can anyone help me to get featured images of these posts too?
<div id="wp-post">
<?php
$args = array('numberposts'=>1);
$recent_posts=wp_get_recent_posts($args);
foreach( $recent_posts as $recent_post ){
echo "<h3>".$recent_post['post_title']."</h3> <br>";
echo "<span>".$recent_post['post_date']."</span> <br>";
echo "<p>".$recent_post['post_content']."</p><br><br>";
}
?>
</div>
<div id="wp-post2">
<?php
$args = array('numberposts'=>1 , 'offset'=>1 );
$recent_posts=wp_get_recent_posts($args);
foreach( $recent_posts as $recent_post ){
echo "<span>".$recent_post['post_title']."</span> <br>";
echo "<p>".$recent_post['post_content']."</p><br><br>";
}
?>
</div>
<div id="wp-post3">
<?php
$args = array('numberposts'=>1 , 'offset'=>2 );
$recent_posts=wp_get_recent_posts($args);
foreach( $recent_posts as $recent_post ){
echo "<span>".$recent_post['post_title']."</span> <br>";
echo "<p>".$recent_post['post_content']."</p><br><br>";
}
?>
</div>
Please try to this code the_post_thumbnail getting the feature image
<?php
if ( $query->have_posts() ) {
$i = 1;
while($query->have_posts()) {
echo '<div id="wp-post-'.$i.'">';
$query->the_post();
?><h2><?php the_title(); ?></h2>
<?php
if ( has_post_thumbnail() ) { // only print out the thumbnail if it actually has one
echo '<p>post says it has a featured image</p>'; // double checking
the_post_thumbnail('thumbnail');
} else {
echo '<p>this post does not have a featured image</p>';
}
echo '</div>';
$i++;
}
} else {
echo '<p>no posts found</p>';
}
?>
how can i create a grid like image? for show last posts
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_query(); ?>
<?php $latest_post = get_posts( 'numberposts=4' ); ?>
<?php foreach( $latest_post as $post ) : setup_postdata( $post ); ?>
<?php the_title(); ?><br />
<?php the_content(); ?>
<?php endforeach; ?>
<?php wp_reset_query(); ?>
One option is to use PHP to swap around the position of the image based on whether or not the increment is odd or even, for instance:
$i = 0;
while ( have_posts() ) : the_post();
if ($i % 2 == 0 ) {
// Display two columns with image on left
}
else {
// Display two columns with image on right
}
$i++;
endwhile;
If you're building your theme from scratch I'd suggest using a grid framework to handle your columns, otherwise see if the theme you're using has a grid framework already.
Edit:
There are also ways of doing this without actually having to change the markup of the page. For instance:
Swapping columns (left / right) on alternate rows
In this case you'd be able to generate your post markup without the if statement and just use CSS to swap the position of the image/video.
You can use the masonry technology or you can try this plugin
In your code above you fired two WordPress content loops. I am not sure why you had to fire two loops, although they both will work. First will print the recent posts depending on the number of Posts Per Page you selected via Settings->Reading tab from your WordPress Dashboard and the second one will again print the top 4 recent posts. I am using the first loop to tell you how you can create the attached image like grid.
Below is the PHP/HTML modifications that you have to make:
<?php $count = 1; if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<div class="one-half <?php if( $count++ % 2 == 0 ): echo 'last-col'; endif; ?>">
<?php
// the function below will print the featured image attached to the post
the_post_thumbnail( 'your-featured-image-sizename' ); ?>
</div>
<!-- one-half -->
<div class="one-half">
<span class="post_stamp"><?php the_time( 'j m Y' ); ?></span>
<span class="post_cat"><?php the_category(', '); // This will print News if you filled the post under News Category ?></span>
<h3><?php the_title(); ?></h3>
<?php the_excerpt(); // Insteading of printing the whole content this function will print exceprt only ?>
</div>
<!-- one-half -->
<div class="clearfix"><!-- --></div>
<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_query(); ?>
You would have to put the below given links to your style file:
<style>
.one-half{width: 50%; float: left;}
.last-col{float: right;}
.clearfix{clear: both; overflow: hidden;}
</style>
After making the above changes your posts will be displayed as the attached image. Good Luck (y)
i have a single page website built on wordpress (twenty-thirteen-child template).
header content footer.
and 3 posts categories :category A category B category C.
i need to split the content into these 3 categories/sections -like this
<div class="section_top">
all the posts from category A
</div>
<div class="section_mid">
all the posts from category B
</div>
<div class="section_bot">
all the posts from category C
</div>
i got a little confused when i started to read about the wordpress main loop ,query_posts and WP_Query,eventually i have this code replacing the main loop ,so my questions are :
1 is this the correct way to do it?
2 how to give each section a unique class since i need to style each section diffrently?
here is the code (index php(in child theme)
<div id="primary" class="content-area">
<div id="content" class="site-content" role="main">
<?php
$args = array('category__in' => array(catA,catB,catC));
$category_posts = new WP_Query($args);
if($category_posts->have_posts()) :
while($category_posts->have_posts()) :
$category_posts->the_post();
?>
<div id="<?php
foreach((get_the_category()) as $category) {echo $category->cat_name . ' ';}?>"
class="post-item">
<div class="post-info">
<h2 class="post-title">
<a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
<?php the_title(); ?>
</a>
</h2>
</div>
<div class="post-content">
<?php the_content(); ?>
</div>
</div>
<?php
endwhile;
else:
?>
Oops, there are no posts.
<?php
endif;
?>
The problem with how you're trying to solve it is that all posts are still shown chronologically, so this could happen:
Category A post 12/01
Category B post 09/01
Category A post 05/01
What I'd recommend: make 3 different WordPress loops querying each category separately like so:
<div class="section_top">
WordPress loop for all the posts from category A
</div>
<div class="section_mid">
WordPress loop for all the posts from category B
</div>
<div class="section_bot">
WordPress loop for all the posts from category C
</div>
Example of such a loop:
// The Query
$the_query = new WP_Query('category_name=categoryA');
// The Loop
if ( $the_query->have_posts() ) {
echo '<ul>';
while ( $the_query->have_posts() ) {
$the_query->the_post();
echo '<li>' . get_the_title() . '</li>';
}
echo '</ul>';
} else {
// no posts found
}
/* Restore original Post Data */
wp_reset_postdata();
Difference between get_the_...() and the_...()
When you use functions like get_the_title() you are able to store them in a PHP variable like so:
$title = get_the_title();
echo strtoupper($title); //do something with it later
When you use functions like the_title() then the title is immediately printed on the page, so there's no need for an echo statement:
the_title();
Notice: the_permalink() has a function get_permalink(), the function get_the_permalink() does not exist. Don't ask my why ;)
I want to wrap my code in a function (and then put it in functions.php) so that I can call it elsewhere but my code fails as soon as I wrap it in a function.
I think this may be a scope issue, do I have to pass the the post number somehow to the function? If I get rid of the function that's wrapped around the query, the code works fine.
I'm guessing that the code is irrelevant really (although I may be wrong) - it's more to do with the fact that it's a loop and a function.
<?php function getGallery2() { ?>
<!-- 1. search for any pages with a custom field of 'test' that have a value of 'yes' -->
<?php query_posts('meta_key=Gallery - Promotion Gallery Photo Link&post_type=page'); ?>
<?php while ( have_posts() ) : the_post(); ?>
<!-- 2. echo the test field -->
<?php $link = get_post_meta($post->ID, 'Gallery - Promotion Gallery Photo Link', true); ?>
<?php $alt = get_post_meta($post->ID, 'Gallery - Promotion Gallery Photo Alt text', true); ?>
<img src="<?php echo $link ?>" alt="<?php echo $alt ?>" />
<?php endwhile;?>
<?php wp_reset_query(); ?>
<?php } ?>
<?php getGallery2(); ?>
You would have it something like this I think (not tested):
<?php function getGallery2() { ?>
$global post;
$link = get_post_meta($post->ID, 'Gallery - Promotion Gallery Photo Link', true); ?>
$alt = get_post_meta($post->ID, 'Gallery - Promotion Gallery Photo Alt text', true); ?>
<img src="<?php echo $link ?>" alt="<?php echo $alt ?>" />
<?php } ?>
Then call the function within any loop on any PHP page. Make sense? i.e. don't loop within the function. I don't understand why you don't just use a php include? i.e.
require('get-gallery.php');
Hope that helps :D
$post is not in the functions scope.
You can add global $post; to the top of the function or you can include it as a parameter like this:
function getGallery2($post){
// code
}
echo getGallery2($post)
Code inside a function can only see variables that were created within the same function or in global scope. Meaning the $post object is undefined.
//
On a slightly off topic note, you have lots of HTML comments within PHP. You could easily tidy things p by making it all PHP.
EDIT:
function getGallery2(){
global $post;
// 1. search for any pages with a custom field of 'test' that have a value of 'yes' -->
query_posts('meta_key=Gallery - Promotion Gallery Photo Link&post_type=page');
while ( have_posts() ) : the_post();
// 2. echo the test field -->
$link = get_post_meta($post->ID, 'Gallery - Promotion Gallery Photo Link', true);
$alt = get_post_meta($post->ID, 'Gallery - Promotion Gallery Photo Alt text', true);
echo '<img src="'.$link.'" alt="echo $alt " />';
endwhile;
wp_reset_query();
}
getGallery2();