displaying custom fields

I hope you are very well today and, after a little explanation, may be able to offer some suggestions that will save me some effort or solve this problem completely.

I'm trying to add some custom fields to pages in an existing site. A lot of the page layout is handled by Visual Composer. I've tried creating custom fields with CustomPress, ACF and Piklist with similar results using the shortcode for the custom field or equivalent PHP in the Visual Composer elements.

The fields are for URLs to offsite eBook pages. It varies for each book, but there should be max 7 fields each with a URL for a different eBook seller (Amazon has 4 for different regions). There may also be an additional four fields with URLs for audiobooks, but so far that's only a couple of titles.

I would like to display an icon for each eBook site with the custom field providing the URL, at bit like this:

<a href="[bookstore URL='amazon_us']">
<img src="http://www.louisebay.com/wp-content/uploads/2016/12/Kindle-for-PC-logo.png" alt="Amazon US">

It should be possible to put a snippet like this into a VC Raw HTML element so that VC handles the layout. The custom field provides the URL to link the image to the store. I've tried it with shortcodes and PHP tags with no success. In every attempt the PHP is removed (which may be a WP security measure) or the quotes/variables in the shortcode are mangled in some way that makes them unusable (I've tried escaping quotes but not sure I've done it correctly).

To avoid the problems of trying to insert a custom field value into HTML, I find myself looking at making one big shortcode that will created the block of bookstore icons, which should look like the eBooks block here:

This is a lot more work than putting some HTML with a shortcode into a VC element. I'm looking for any suggestions for how I can avoid this and do it more quickly/efficiently.

I'm openminded about how to do the custom fields. CustomPress seems solid, with opportunities to expand to a full Book CPT. ACF is well documented and has lots of features. Piklist sees best for custom shortcodes but may require a bit of learning.

I had hoped that using custom fields for these URL would enable the site owner to do more updates on her own and create a more uniform result across publications.

Many thanks,

  • Rupok
    • Support Ninja

    Hi Morgan,

    Thanks for sending all the details. Can you please confirm you added your CustomPress shortcode in Visual Composer "My Shortcodes" area and then used that in your VC HTML block? I think it may work. You will get details here: https://vc.wpbakery.com/video-academy/add-shortcodes-visual-composer-wordpress/

    I'm sorry but Visual Composer is a third party paid plugin, so I don't have any access to their coding and architecture. But the plugin developer can give you best idea regarding this. Can you please ask Visual Composer plugin developers about it? I believe, they will be able to provide you an easy workaround for accomplishing this. You can get their support from here: http://support.wpbakery.com/

    Please let us know what they say about this. If there is anything we can do from our end, we will be glad to do that. I'm looking forward to hearing from you and resolving this issue as soon as possible.

    Have a nice day. Cheers!

  • Morgan
    • Site Builder, Child of Zeus

    Thanks very much for your reply.

    I tried shortcode mapper but didn't fully understand its purpose from the docs. It appears to be a convenience only, to turn a shortcode into a drag and drop element. It doesn't appear to have any bearing on how that is interpreted. In any case, shortcodes work on their own when entered in a text box or as a standalone element, but fail to work when combined with HTML or PHP. The element that the mapper generates does not solve the problem. It just gives me the value in the field as text.

    When I use the shortcode inside an HTML snippet, WP doesn't parse it so I get a URL for the site ending in the original shortcode text.

    I didn't think this was a VC problem, but something general to WP. It affects the shortcodes and doshortcode() snippets for CustomPress, ACF, etc. What I read in the WP codex suggests that quotes are tricky when mixing HTML and shortcodes. Elsewhere, I read that WP strips out PHP in content boxes for safety. I thought it was something like this.

    I'll have to contact the client about WPbakery as she holds the envato details and licence.

    Without other solutions, I think the options are:
    Write a block to hold these icons/links and put it in the theme.
    Or put the block into its own shortcode.
    Or write a smaller shortcode that just returns the anchor tag with the correct href.

    None sound ideal, but the last one seems the least hassle.


  • Rupok
    • Support Ninja

    Hi Morgan,

    I do agree with you. So if you want to go with the last option, which is creating a custom shortcode which will output your desired HTML with proper links from the shortcode attribute, then you can use the following code to create that shortcode:

    function amazon_custom_image_link( $atts ) {
        extract( shortcode_atts( array(
            'azurl' => do_shortcode('[ct id="_ct_text_5871eef72fd7c"]'),
            'azimgurl' => 'http://static1.businessinsider.com/image/539f3ffbecad044276726c01-960/amazon-com-logo.jpg',
        ), $atts, 'multilink' ) );
    	echo '<a href='.$azurl.'><img src='.$azimgurl.'></a>';
    add_shortcode( 'azimgwithurl', 'amazon_custom_image_link' );

    Please note, you should replace
    [ct id="_ct_text_5871eef72fd7c"]
    with your bookstore URL shortcode.

    And you should be using this shortcode in VC shortcode element in the following way:
    [azimgwithurl azimgurl="http://www.underconsideration.com/brandnew/archives/google_2015_logo_detail.png"]
    And you should replace the image URL with your desired image obviously.

    So it will render your bookstore URL in the shortcode function of your "azimgwithurl" shortcode.

    I believe this will serve your purpose. Please let us know if I missed anything. We will be glad to assist further.

    Have a nice day. Cheers!

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.