“Can we have a l way to link a slider image to a specific page?” my client asked.
“Sure, no problem,” I said.
Now, I had never done this before, but it seemed easy enough to do. In my mind, I pictured the solution:
- In the slider custom post type (cpt), I need a custom field that can store the hyperlink they need.
- Then I need to be able to get that hyperlink data in the slider cpt php file, and wrap the slider in an `<a>` tag.
- That sound work, and there will be much rejoicing.
Well.. it wasn’t quite as straightforward as that, but not too far off. Thanks to Google, the WordPress Codex (bless you!), and a pointer from the awesome folks at ZigZagPress.com (thanks Joe!), I was off to the races.
Here’s what I did…
Adding the Metabox
I’m still a little murky on the difference between custom fields and custom metaboxes, as there’s definitely some overlap, but the long and short of it is:
Custom fields are key/value pairs for storing data. Metaboxes are structures that contain custom fields, or at least, a place to store custom data. Metaboxes can be styled and dragged around on a post type view.
Great! So, I set to work on adding my first real like custom metabox!
I headed over to the WordPress Codex and grabbed the code for adding a metabox. After check the parameters, and deciding I wanted the box on the sidebar high up on the post page, I ended up with this basic function and hook:
/*
* Adds Custom Meta Box for Slider Hyperlink
-------------------------------------------*/
/**
* Adds a box to the main column on the Post and Page edit screens.
*/
function n8f_add_meta_box() {
$screens = array( 'slide' ); //determines what post type this will show up on
foreach ( $screens as $screen ) {
add_meta_box(
'n8f_sectionid',
__( 'Slide hyperlink ', 'n8f_textdomain' ), //'Slide hyperlink' is the title of the metabox
'n8f_meta_box_callback',
$screen,
'side', //where I want the metabox to be, main or side content
'high' //priority of the metabox, we want that guy on top!
);
}
}
add_action( 'add_meta_boxes', 'n8f_add_meta_box' );
If you look at the comments in the code, you can see the main pieces I changed and why. Parameter values are listed on the Codex page.
Implementing this code in my functionality plugin yielded the desired results:
Booyah! I also added the rest of the of the code from the Procedural example on the Codex page because I also wanted to:
- have the stored data print when the page was loaded
- save the data properly
- make sure the data was secure (using sanitization and nonces, two things I know very little about)
These all seemed like good things to me, so they’re in!
I tested to make sure a hyperlink would save, it did, so it was on to the next thing…
**Note: I could have also written code to evaluate the data entered to validate that it was a proper URL, and not just a note that said “Howdy!” or something. I didn’t do that simply because of time constraints and I don’t think anyone is going to put anything but a URL in there… but you never know…
Linking to the Slide
This part was fairly simple as well, thanks to Joe from ZigZagPress.com telling me where to look. I am using their Dharma theme for this particular client’s site, with some modifications and customizations.
First, I needed to make sure I could get the necessary metadata, so, I used get_post_meta() to get the necessary data and store it in a variable:
$n8f_slide_id = $post->ID; $n8f_slide_hyperlink = ( get_post_meta( $n8f_slide_id, $key = '_n8f_slide_hyperlink', $single = true ));
After that, I located the slider output and wrapped the slider image in an <a> tag as planned:
$output .= '<a href="'.$ecck_slide_hyperlink.'"><img class="img-responsive" alt="'.get_the_title().'" src="'.$image_url.'" /></a>';
And done! Wait… that didn’t exactly work. I went to the homepage of the site and the images weren’t clickable or linked! What did I miss?
Thankfully, Joe reminded me there was an overlay <div> a few lines before. Once that was removed, all the links worked like a charm!
Takeaways
The WordPress Codex is your friend and has done a TON (I cannot overstate this word enough, a TON) of work for you already so you can come in with fairly clear examples and direction on what to do and expect when you’re customizing a site.
Don’t be afraid to ask for help from people that know more. While I pay for ZigZag support, you can go to a local WP meetup or connect with folks online. The WordPress community is always eager to help.
Part of what I LOVE about this work is the amount of learning as I got. This was a fairly simple metabox and metadata application. However, I’ll be able to draw on this in the future.
Looking forward to that moment.
Peace,
Nate
**Note: some code changed to protect the innocent, or at least the production code.