Link to child page in wordpress - php

I'm quite new to wordpress and php in generall and am currently building my first real theme.
On one of my sites I show various projects which are child-pages of the overview-page
On that page I show preview-Images and then on hover I add a div with a background-color and blend in the project-Name and a button to get to the project (it's sort of a hover in a hover). But that isnt my real problem, most of that actually works. But I can't seem to figure out how to actually link to the displayed child pages. It allready gets the right thumbnails and everything, just the link that uses the same function doesnt seem to work.
Can one of you tell me how I modify my code to link the h6 to its child page?
Would be a huge help.
Thanks a lot in advance.
<div id="mainContent">
<div id="primary">
<p>
<?php the_content(); ?>
</p>
<?php
$args = array(
'child_of' => get_the_ID(),
'sort_order' => 'ASC'
);
$pages = get_pages($args);
// var_dump($pages);
foreach($pages as $page) {
?>
<div class="moreProjectsImages left">
<div class="projectHover">
<h5 class="title center">
<?php echo $page->post_title ; ?>
</h5>
<a href="<?php get_permalink($page->ID) ?>" class="btnDoubleHover">
<h6 class="center">
View Project
</h6>
</a>
</div>
<img src="<?php echo ''.get_the_post_thumbnail($page->ID, array(285,175)).''; ?>" />
</div>
<?php
}
?>
</div>
</div>

The function get_permalink() only returns the result, you need to echo it which you are doing for the thumb but not for the URL. Also there is a function specifically for page links get_page_link().
Correct code to get the link:
<a href="<?php echo get_page_link($page->ID) ?>" class="btnDoubleHover">

Related

Can I change a permalink of a Wordpress content preview linking to a category instead of the post?

I'm trying to make a slider in the home with six contents previews. I don't want the previews links to their content, I would want to change their link to some subcategories under a parent. I think changing the permalink to the featured image would be good.
I try to use this tutorial: https://slickmedia.co.uk/blog/wordpress-add-link-featured-image/
It works well but not for the preview, it changes the permalink of the featured image in the open content, not in the preview.
A link like this:
It works well but only for a subcategory, I think I would need a sorting loop to take the subcategories of Articles.
I post the code of the slider from front-page.php
<!-- SLIDES STORIE -->
<div class="uk-section color-bg-storie">
<div class="uk-container-large">
<h2 class="uk-heading-small uk-text-center"><?php bloginfo('name');?>:</h2>
<div uk-slider="clsActivated: uk-transition-active; autoplay: true;">
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1">
<ul class="uk-slider-items uk-child-width-1-2#s uk-child-width-1-3#m" uk-scrollspy="cls: uk-animation-slide-bottom; target: .uk-padding-large; delay: 300; repeat: true">
<?php
// La Query
$ipp_the_query = new WP_Query( 'category_name=slider&posts_per_page=6' );
// Il Loop
while ( $ipp_the_query->have_posts() ) :
$ipp_the_query->the_post(); ?>
<?php $ipp_image_attributes = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'ipp_small' ); ?>
<li class="uk-padding-large">
<a href="/index.php/category/articoli/paesaggi/">
<img src="<?php echo $ipp_image_attributes[0]; ?>" alt="" uk-svg>
</a>
<div class="uk-position-center uk-panel">
<a href="<?php the_permalink(); ?>">
<div><?php the_excerpt(); ?></div>
</a>
</div>
</li>
<?php endwhile;
// Ripristina Query & Post Data originali
wp_reset_query();
wp_reset_postdata(); ?>
</ul>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>
</div>
<ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
</div>
</div>
</div>
I'm searching for a method to link some banner/post preview to a category instead of the open post.
Thanks for all the support!

How to use a field block in many Wordpress Pages with Advanced Custom Fields?

I am building an eCommerce site using Wordpress and Woocommerce and hit a roadblock and don't see how to solve.
I am using ACF (Advanced Custom Fields) to create a block of content that I want to reuse in many different pages. The problem is, when you create the field block, you have to choose where do you want to display this. My thought was, let's display it in the Admin section of the Home Page, which will be the only place where the admin will be able to manipulate this content.
Then my thought process was to create a partial in the code (not the admin, of course) and then call this partial from all the pages I wanted to display this content.
The problem is, the content displays in the Home Page, but anywhere else I only get the empty HTML tags without the content.
My partial:
content-footer-callouts.php
<?php
// FOOTER CALLOUTS
// ---------------
// Left
$left_callout_image = get_field('left_callout_image');
$left_callout_title = get_field('left_callout_title');
$left_callout_description = get_field('left_callout_description');
// Center
$center_callout_title = get_field('center_callout_title');
$center_callout_description = get_field('center_callout_description');
// Right
$right_callout_image = get_field('right_callout_image');
$right_callout_title = get_field('right_callout_title');
$right_callout_description = get_field('right_callout_description');
?>
<div class="row">
<div class="gives-back section phone-12 laptop-4 columns">
<img src="<?php echo $left_callout_image['url']; ?>" alt="<?php echo $left_callout_image['alt']; ?>">
<h3><?php echo $left_callout_title; ?></h3>
<?php echo $left_callout_description; ?>
</div><!-- .gives-back -->
<div class="social section phone-12 laptop-4 columns">
<ul class="social-links">
<?php
$social_footer_args = array(
'post_type' => 'social',
'order_by' => 'post_id',
'order' => 'ASC',
'posts_per_page' => '4'
);
$social_icons = new WP_Query($social_footer_args);
?>
<?php while ($social_icons -> have_posts()) : $social_icons -> the_post(); ?>
<li>
<a href="<?php the_field('social_url'); ?>" target="_blank">
<i class="fa fa-<?php the_field('social_icon'); ?> fa-2x"></i>
</a>
</li>
<?php endwhile; wp_reset_query(); ?>
</ul><!-- #social-links -->
<h3><?php echo $center_callout_title; ?></h3>
<?php echo $center_callout_description; ?>
</div><!-- .social -->
<div class="purchase section phone-12 laptop-4 columns">
<img src="<?php echo $right_callout_image['url']; ?>" alt="<?php echo $right_callout_image['alt']; ?>">
<h3><?php echo $right_callout_title; ?></h3>
<?php echo $right_callout_description; ?>
</div><!-- .purchase -->
</div><!-- .row -->
My call from any page:
<section class="engage row-full padded-section">
<?php get_template_part('template-parts/content', 'footer-callouts'); ?>
</section><!-- .engage .row-full -->
A screenshot from the ACF interface:
Add the post ID of your "Home" page as the second parameter to your get_field() calls.
// Your home page post ID
$post_id = 1;
// Your get_field() calls should look like the one below
$field_var = get_field( 'meta_key', $post_id );
See the documenation for more info: http://advancedcustomfields.com/resources/get_field
You should also use proper sanitation functions before output. Check out the link below to find WordPress core sanitation functions. Try to be as strict as needed.
https://codex.wordpress.org/Data_Validation#Output_Sanitation

Issue with ACF fields showing up in WordPress template

Okay, I am having the most bizarre issue ever. I have a custom home page template for a WordPress site I am working on.
You can see a screenshot of how I have my ACF fields for this template setup on the backend here.
The issue I am having is that when I try to display the field
<img src="<?php the_field('slide_1_thumb'); ?>" alt="" />
the image doesn't show up at all. I have the Return Value set to 'Image URL', and the odd thing is that it shows the images for
<?php the_field('slide_1'); ?>
just fine with no issues at all.
I'm not sure what I am doing wrong here, but there are no spelling errors at all, for some reason those slide_1_thumb images won't show up. I want to think this is one of those Occam's Razor type of situations where I missed something so simple, but I've gone over this a million times with no luck.
Below you will find a copy of the PHP code for my home-page.php template.
<?php
/**
* Template Name: Home Page
*
* A custom template for the home page.
*
* The "Template Name:" bit above allows this to be selectable
* from a dropdown menu on the edit page screen.
*/
get_header(); ?>
<div id="slideshow-container">
<div id="slideshow" class="slideshow pcfcu-theme">
<div class="slideshow-img" style="background-image: url(<?php the_field('slide_1'); ?>);">
<div class="slideshow-img-inner">
<div class="slideshow-img-text">
<h1><?php the_field('slide_1_title'); ?></h1>
<p><?php the_field('slide_1_description'); ?></p>
</div>
</div>
</div>
<div class="slideshow-img" style="background-image: url(<?php the_field('slide_2'); ?>);">
<div class="slideshow-img-inner">
<div class="slideshow-img-text">
<h1><?php the_field('slide_2_title'); ?></h1>
<p><?php the_field('slide_2_description'); ?></p>
</div>
</div>
</div>
<div class="slideshow-img" style="background-image: url(<?php the_field('slide_3'); ?>);">
<div class="slideshow-img-inner">
<div class="slideshow-img-text">
<h1><?php the_field('slide_3_title'); ?></h1>
<p><?php the_field('slide_3_description'); ?></p>
</div>
</div>
</div>
</div>
</div>
<div id="content-container">
<div id="content-container-inner">
<div id="recent-blog-entries-container">
<div id="recent-blog-entries">
<header><h1>Recent Blog Entries</h1></header>
<?php $postslist = get_posts('numberposts=2&order=DESC&orderby=date');
foreach ($postslist as $post) : setup_postdata($post);
?>
<h2 class="rbe-title"><?php the_title(); ?></h2>
<p class="rbe-posted-on">Posted on: <?php the_time(get_option('date_format')) ?></p>
<div class="rbe-excerpt"><?php the_excerpt(); ?></div>
<?php endforeach; ?>
</div>
</div>
<div id="features">
<header><h1>Features</h1></header>
<a class="goTo1"><div class="feature-thumb"><img src="<?php the_field('slide_1_thumb'); ?>" alt="" /></div></a>
<a class="goTo2"><div class="feature-thumb"><img src="<?php the_field('slide_2_thumb'); ?>" alt="" /></div></a>
<a class="goTo3"><div class="feature-thumb"><img src="<?php the_field('slide_3_thumb'); ?>" alt="" /></div></a>
</div>
</div>
</div>
<?php get_footer(); ?>
Another strange thing is that if you take one of the working ACF images such as
<?php the_field('slide_1'); ?>
it works perfectly and outputs the image, but when you move it down to the 'Features' section of the code to see if it will work in place of one of those small feature thumbnails, it won't work in that portion of the code. It's almost as if that bottom 'Features' portion of the page has some sort of error, but I don't see any errors at all in my code.
In other words, ALL of this code works perfect up until the very last portion of it with the 'feature' thumbnail images. You can see this live on the website here.
When making a new loop using get_posts(), you should end it with the wp_reset_postdata() function to reset your loop's data back to what it was before the get_posts(). So try this:
<div id="recent-blog-entries">
<header><h1>Recent Blog Entries</h1></header>
<?php $postslist = get_posts('numberposts=2&order=DESC&orderby=date');
foreach ($postslist as $post) : setup_postdata($post); ?>
<h2 class="rbe-title"><?php the_title(); ?></h2>
<p class="rbe-posted-on">Posted on: <?php the_time(get_option('date_format')) ?></p>
<div class="rbe-excerpt"><?php the_excerpt(); ?></div>
<?php endforeach; ?>
<?php wp_reset_postdata(); ?>
</div>
Adding the wp_reset_postdata() after your loop should fix this for you.
Okay, I have NO idea what was going on, but all I had to do to fix this was delete the ACF fields on the backend and then recreate them with the EXACT same names as before. Sure enough that fixed it.
So, while I don't have a conclusive answer as to why this was happening, all I can say is that it must have been some sort of odd glitch.

Fancybox links only opening first Wordpress post - need to open different posts each time its clicked

I'm working on a site that has a buy now option on a book catalog page (each book is a custom posts). The books are added as custom posts by an admin in addition to custom fields with links, etc. When the user clicks a buy it now button, Fancybox pops up a window that has different places where one can buy the book. The problem I'm running into is each popup is just of the first post in the array. I'm extremely new to jQuery and PHP. I'm assuming I have to create some kind of counter, but I have no idea how to do that. But basically, each buy it now button has to open the separate custom post.
Relevant code:
js:
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox(); });
</script>
html:
<?php else: ?>
<li>
<div class="thumbnail"><?php the_post_thumbnail(); ?></div>
<div class="content">
<h2><?php the_title(); ?></h2>
<p><?php echo substr(get_the_content(), 0, 250); ?></i>...
<a class="read-more" href="<?php echo get_permalink(); ?>">Read More ></a></p>
<a class="buy-now fancybox" href="#buy-now-popup2">
<img class="buy-now-img2" src="http://www3.patriciacornwell.com/wordpress/wp-content/uploads/buy-now.png">
</a>
</div>
</li>
<div id="buy-now-popup2">
<h2>Choose a Format</h2>
<ul>
<li>
<div class="thumb"><img src="http://www3.patriciacornwell.com/wordpress/wp-content/uploads/paperback.png"></div>
<h4>Paper Back</h4>
<div class="stores">
<?php $pbamazon = get_post_meta($post->ID, 'paperback-amazon', true); ?>
<?php $pbbn = get_post_meta($post->ID, 'paperback-barnesnoble', true); ?>
<?php $pbib = get_post_meta($post->ID, 'paperback-indiebound', true); ?>
<?php $pbpenguin = get_post_meta($post->ID, 'paperback-penguin', true); ?>
</div>
</div>
That isn't the whole buy-now-popup2 div but I don't think the rest of it has anything to do with my problem. Thanks in advance.
Well, I was able to figure this out on my own, and it was much simpler than I thought it would be.
I simply changed the fancybox href attribute to:
<a class="buy-now fancybox" href="#buy-now-popup<?php the_ID(); ?>">
and the popup id to:
<div id="buy-now-popup<?php the_ID(); ?>" class="buy-now-catalog">
so that Wordpress would automatically generate new divs for each link.

Applying anchor link to WordPress pagination twice on same page

For my portfolio site, I would like to add anchor links to both the 'work' and 'blog' sections so that when clicked through to the next page it goes to the respective section. I noticed this is possible using jQuery from this question: WordPress pagination - Adding an Anchor link, but am unsure how this would work with two loops on the same page?
my current loops look like this, just replacing categories for each section:
<?php $paged = (get_query_var('page')) ? get_query_var('page') : 1;
$args=array('category_name'=>'portfolio','posts_per_page'=>4,'paged'=>$paged);
query_posts($args);
if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="blog-post">
<div class="thumbnail">
<a href="<?php the_permalink(); ?>">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
?>
</a>
<a class="details" href="<?php the_permalink(); ?>">
<h6><?php echo get_the_excerpt(); ?></h6>
</a><!-- DETAILS -->
</div><!-- THUMBNAIL -->
<div class="aside">
<h4><?php the_title(); ?></h4>
</div><!-- ASIDE -->
</div><!-- BLOG - POST -->
<?php endwhile; ?>
<div class="navigation">
<h3><?php posts_nav_link('∞','« Newer Posts','Older Posts »'); ?></h3>
</div><!-- PAGED-NAVIGATION -->
<?php wp_reset_query(); ?>
Ah I see what you mean; actually you are better off using wordpresses $args for the paginate_links() function. You can see it here: http://codex.wordpress.org/Function_Reference/paginate_links .
The one you want to change is 'format'=>'?page=%#%', (which is the page number) and changing it to something like 'format' => '?page=%#%#work', and 'format' => '?page=%#%#blog',
So you can do:
echo paginate_links(array('format' => '?page=%#%#work')); which should make clicking the link jump back down to the work anchor.
The problem is, you will still have a page jump if the user isn't scrolled exactly to the position of the anchor link. You are best to implement an Ajax solution so there is no reload of the page at all. Here is a good tutorial to get you started: http://wp.tutsplus.com/articles/getting-started-with-ajax-wordpress-pagination/
Where you have your first <div class="navigation">
Add an id="work" and to the second id="blog"
so you would have
<div class="navigation" id="work">
</div>
<div class="navigation" id="blog">
</div>
Somewhere on your page.
Then you need a small modification to the jquery from the question you referred to to make the correct anchor link:
<script type="text/javascript">
$(document).ready(function() {
$('.pagenavi a').each(function(i,a){
$(a).attr('href',$(a).attr('href')+'#'+a.parents('.navigation').attr('id'));
//$(a).attr('href',$(a).attr('href')+'#blog') <-- instead of this
});
});
</script>
The parents('.navigation').attr('id') tells jquery to move up the dom intil it finds the navigition tag, and just grab it's ID to use as the text for the achor text
If you already have the ids blog and work on the page, you could use rel="work" instead and then you would in the jquery use attr('rel')

Categories