Displaying Advanced Custom Fields within Zefir theme

Hi there,

This will probably have to be a developer job, but I thought if someone had insight that might help I'd try asking first. My Wordpress website has the Advanced Custom Fields plugin installed and everything is great, but when I try to display it within my theme I'm not sure how to get it where I want it. Take a look at my website and you'll see a bunch of posts displayed with each having a bottom interactive bar for sharing, views, likes. I want to add a link for the viewer to buy the featured image within the bar, a Fonts Awesome icon. I'm not sure how someone can help without looking into it deeper, but anything helps! Maybe a better question is how much (about) would this kind of work cost to have done?

  • Michelle Shull
    • DEV MAN’s Apprentice

    Hey there, Abbie!

    Let me make sure I understand what you want. You like everything about how it looks now, you just want to add a "buy it" link to the bar under the photos?

    That's actually not too terribly difficult. : )

    Step 1: Do you already have MarketPress or another ecommerce platform in place to handle ordering/inventory/payment/etc? If not, that'll be a key first step.

    Step 2: All we'd need to do is add an icon with a link to the product page for each photos in the bar.

    Drawback: That's going to be dependent on this theme to work, if you change themes in the future, you'd need new code written to add this functionality to the new theme.

    If you've already got ecommerce set up, I can take a peek at your site and see about giving you some custom code to make this feature work. Would you mind if I logged in to your site and did some testing? This might help get to the bottom of this faster. If this is ok, just grant me temporary admin access to your site by clicking "Grant Access" button in the WPMU DEV Dashboard Settings from the following path and reply on this thread after granting it?

    Admin -> WPMU DEV -> Support -> Support Access Tab

    If you have not installed WPMU DEV Dashboard plugin yet, kindly do that here : https://premium.wpmudev.org/project/wpmu-dev-dashboard/ and then allow access as per the above process.

    If you don't yet have an ecommerce platform installed, you'll need to get one up and running before I can write the custom code for you. : )


  • Abbie
    • Flash Drive


    Thanks for getting back to me right away! Yes, you've understood correctly. I've got a smugmug account that I'm going to use for people to make a wide variety of purchases (prints, canvases, mugs, digital download...). It provides a "buy" link that once clicked brings them to smugmug and pulls up their purchase options. I'd rather have them take care of all the details of purchasing than me.

    When I went into the theme php files I tried adding the display codes from the Advanced Custom Fields, but nothing came up. I added it where the views, likes, and share fields all are within the single.php, content-standard.php (which is the only post type I use for this site), and the functionality required by ACF within the functions.php file, plus the code to have Fonts Awesome display within the header.php file.

    I'm happy to give you access to take a look if you still want to, being that I'm only needing a link than e-commerce things.

    Appreciate your help!


  • Michelle Shull
    • DEV MAN’s Apprentice

    Thanks Abbie!

    I've poked around a bit, and I think the easiest way to do this is by editing a template file for that theme to add the link/icon. If it's okay, can I get temporary FTP access to make a copy of that file directly? If that's okay, use the contact form (link follows) to send me the following:

    Subject: "Attn: Michelle Shull"
    -WordPress admin username
    -WordPress admin password
    -login url
    -FTP credentials (host/username/password)
    -link back to this thread for reference
    -any other relevant urls

    Select "I have a different question" for your topic - this and the subject line ensure that it gets assigned to me.



  • Michelle Shull
    • DEV MAN’s Apprentice

    Hi Abbie! Sorry for the delay!

    Here's the new file. I also sent it by email, with a changelog, so you can easily go back in and make these changes the next time your theme updates. Unzip it, and drop it in wp-content/themes/wp-zefir.

    I added a font-awesome dollar sign, a link to your store page, and a title (which will work like a tool tip in a browser) with "Buy Now!"

    Hope this helps!

  • Abbie
    • Flash Drive

    Thanks so much for your work on this Michelle! I wonder if you can tell me how come I'm getting a bunch of extra $ around photos marked as "image", which is the type to use to get the purchase photo link? Image of what I see is attached.

    Also, is there a way to add a code so I can put a certain link in for a certain post? That's what I was originally thinking of doing, which is why I was using the Advanced Custom Field. I want the link to be for buying a specific picture, the one that matches the post. Let me know if that's too much to ask for on here. Appreciate your help!


  • Michelle Shull
    • DEV MAN’s Apprentice

    Hi Abbie!

    Wow, that's not supposed to happen at all. Sorry about that! That did not show up on my test site. I will make some hasty edits.

    On your second question, it's possible, but it's going to be a bit more than I can throw together for you in the forum. This may be too DIY for you, but a workaround could be to change the link on the image itself to go to the store page on the the other site (instead of to the media file), and change the title to "Buy [IMAGE NAME] Now" so it shows up on hover. If you chose that, strip out the code I added that gave your site the dollar sign chicken pox. (OMG, I'm SOOOOO sorry about that, and baffled.)

    Thanks! For your patience, especially!

  • Abbie
    • Flash Drive

    Hi Michelle,
    No problem. I haven't implemented the image content post yet, waiting for the fix. I sure appreciate your work on this.
    And if I choose to pay a developer to individualize the post link I'll make sure and get in touch with you!

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.