I've been working on a redesign for a website on a local development setup and have decided to give a shot at WordPress for the first time. On my front page, I have an image slider that slides through the three most recently posted items that I want on the front page. On all of the posts, I have attached an image that I want to display on the front page. Here's my code on the homepage:
<?php query_posts('category_name="main page"&showposts=3');
while ( have_posts() ) : the_post(); ?>
<div class="panelContent">
<img class="panelPhoto" src="<?php echo wp_get_attachment_url(get_the_ID()); ?> "/>
<div class="panelCaption">
<h2><?php the_title(); ?></h2>
<?php the_excerpt(); ?>
</div>
</div>
<?php endwhile; ?>
The code returns an underscore in the src part of the img tag. Not exactly sure why.
Also, here's an image of my media panel showing that the images are indeed attached:
wp_get_attachment_url() takes an Attachment ID, not a Post ID.
Use get_children() to get the attachments for a specific post.
<?php $images = get_children(array(
'post_parent' => get_the_ID(),
'post_type' => 'attachment',
'numberposts' => 1,
'post_mime_type' => 'image',)); ?>
<img class="panelPhoto" src="<?php echo wp_get_attachment_url($images[0]->ID); ?> "/>
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.
The problem on a Wordpress site is that even though links are set properly in the WP admin area (see attachment 1) they do not work once the site has been published. When using inspect element it kind of shows the problem (see attachment 2).
Clicking and opening the links within the admin area is working just fine. Other links on the website work correctly. What is missing here?
Code in WP template:
<?php if ($section['link_to_doc']) : ?>
<?php foreach ($section['link_to_doc'] as $link) : ?>
<div>
<a href="<?php echo $link['link_to_doc'] ?>" class="btn-txt">
<?php echo $link['text_of_link'] ?>
</a>
</div>
<?php endforeach; ?>
<?php endif; ?>
Repeater fields:
It seems the ACF link object is not returning the right output in the href because of an error in how the links where coded.
Usually you'll want something like this:
$link = get_field('link');
<a href="<?= $link['url']) ?>"<?= $link['title'] ?></a>
That's providing the ACF field is not nested, and the field name is 'link' and there's just one.
Amended code (presumably):
<?php if ($section['link_to_doc']) : ?>
<?php foreach ($section['link_to_doc'] as $link) : ?>
<div>
<a href="<?= $link['url'] ?>" class="btn-txt">
<?= $link['text_of_link'] ?>
</a>
</div>
<?php endforeach; ?>
<?php endif; ?>
Even thought the whole concept is not the best, as you wouldn't create an extra custom field to put the text of the link since you can use $link['title'] for that but yeah...
Edit 2:
According to your screenshot edit the a to be:
<a href="<?= $link['link'] ?>" class="btn-txt">
<?= $link['text_of_link'] ?>
</a>
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'm building my own theme. I have a page set for my blog (with a template that I made) which I'd like to just display a few of my posts. It uses the following loop:
<?php
query_posts('post_type=post');
if (have_posts()) {
while (have_posts()) {
?>
<div class="blog_post">
<h2><?php the_title(); ?></h2>
<div class="entry_date"><?php the_time('F jS, Y') ?></div>
<?php
the_post();
the_content();
?>
</div>
<?php
}
}
?>
The titles of my posts are "First Post, Second Post, Third Post, and Fourth Post" respectively. When the posts are displayed on the blog page, they are displayed in the correct order, but the titles of the posts are incorrect. The first post's title reads: "Second Post". The second post's title is: "Third Post", and so on until the last (most recent) post which has the title: "Blog" (the page title). What happened to the titles that they got so screwed up?
What I've Tried:
I've researched this a lot before I came here. I tried using get_the_title() instead but that lead to no titles being displayed. I've also tried using the_title_attribute() to no avail. I also understand that I shouldn't be using query_posts for this loop but I'm unsure which is the correct method to use for getting the posts in this particular case. Most of the info I've read was unclear though and didn't seem to fix the issue.
Any help is greatly appreciated.
Try something like this: untested
<?php
global $post;
$args = array();
$myposts = get_posts( $args );
foreach( $myposts as $post ) :
setup_postdata($post); ?>
YOUR HTML HERE
<?php endforeach;
wp_reset_postdata(); ?>
Okay Nevermind! I just found out what the problem was. I moved, "the_post()" to just after the while loop so now it reads like this:
<?php
query_posts('post_type=post');
if (have_posts()) {
while (have_posts()) {
the_post();
?>
<div class="blog_post">
<h2><?php the_title(); ?></h2>
<div class="entry_date"><?php the_time('F jS, Y') ?></div>
<?php
the_content();
?>
</div>
<?php
}
}
?>
I found this solution while I was reading about the_post() in the wordpress codex. Turns out this function is setting up information for the next post in the line, so it shouldn't be mixed in with the html output for the current post.
In regards to whether or not I should be using "query_posts()" is still something I'm unsure of and willing to take any advice. But the loop in it's current form is working.
I am using a wordpress theme, Pitch Pro, and it has a built in slider. My issue is that sometimes the slider will flash the wrong image for a second. I noticed that it does not do it normally but only if I go from a page such as support to the home page. I have tried changed and setting the order. Changing the max amount of slides, currently 6, but nothing seems to fix it.
The site currently is jrummy16.com/test if anyone has any idea on a fix.
Not sure if this could relate to it anyway but the server I am using has issues and to fix it hostgator told me to add define( 'CONCATENATE_SCRIPTS', false ); to my config.php file. It fixed the issue but I do not recall the slider having this issue before adding that.
I have no idea on how to even start troubleshooting this. So any help would be greatly appreciated.
EDIT
All of the files were found inside the Theme, Pitch Pro.
I opened up my home.php file and I find this at the top for slider.
<?php
$slider_template = apply_filters('pitch_slider_template', array('slider', null));
get_template_part( $slider_template[0], $slider_template[1] );
?>
I then went and opened up slider.php in the same folder. It has this code,
<?php
$slides = new WP_Query(array(
'numberposts' => siteorigin_setting('slider_max_slides'),
'nopaging' => true,
'post_type' => 'slide',
'orderby' => 'menu_order',
'order' => 'ASC'
));
if($slides->have_posts()){
?>
<div id="slider">
<div class="container">
<div class="slides nivoSlider">
<?php while ($slides->have_posts()) : $slides->the_post(); if(has_post_thumbnail()) : ?>
<?php if(get_post_meta(get_the_ID(), 'slide_destination', true)) : $destination = get_post_meta(get_the_ID(), 'slide_destination', true) ?>
<?php echo '<a href="'.esc_url(get_permalink($destination)).'" title="'.esc_attr(get_the_title($destination)).'">' ?>
<?php elseif(get_post_meta(get_the_ID(), 'slide_destination_url', true)) : $destination = get_post_meta(get_the_ID(), 'slide_destination_url', true) ?>
<?php echo '<a href="'.esc_url($destination).'">' ?>
<?php endif; ?>
<?php echo get_the_post_thumbnail(get_the_ID(), 'slide') ?>
<?php if(!empty($destination)) echo '</a>' ?>
<?php endif; endwhile; ?>
</div>
<?php $slides->rewind_posts(); ?>
<div class="indicators-wrapper">
<ul class="indicators">
<?php while ($slides->have_posts()) : $slides->the_post(); if(has_post_thumbnail()) : ?>
<li class="indicator <?php if($slides->current_post == 0) echo 'active' ?> indicator-group-<?php echo $slides->post_count ?>">
<div class="indicator-container">
<div class="pointer"></div>
<h4><?php the_title() ?></h4>
<?php the_excerpt() ?>
</div>
</li>
<?php endif; endwhile; ?>
</ul>
</div>
</div>
</div>
<?php
wp_reset_postdata();
}
I am not sure if this will help or not but I hope that it does.
I think the reason is that before slider loads completely, the page will show last image in the list of slides and in your case it is this one:
<img width="705" height="344" src="http://jrummy16.com/test/wp-content/uploads/BA-slider.jpg" class="attachment-slide wp-post-image" alt="BA-slider">
Here is a similar problem and it has few of the solutions which you may use it as well.
UPDATE:
I found this article which suggests to modify your CSS. I would paste the code here but the article uses image to show CSS code:)