How to echo the value of an array element using a function via a shortcode

Question

I do not understand this response unfortunately. I don’t know how to
take this, and turn it into working code.

What I meant by that response, is that you would be using a shortcode that looks like these in your posts:

[print-price key="price1"]
[print-price key="price2"]
[print-price key="foo-bar"]

Where key is an attribute for the shortcode named print-price, and that the attribute value corresponds to a key in the prices array which is $prices in the question. So with your sample array or prices, the first shortcode above would return 100, whereas the second one would return 150, because 100 is the value of $prices['price1'] and 150 is the value of $prices['price2'].

And that is how we access an item in that array, i.e. array[key] and not array->key (which is actually used with objects). So for example, use $prices['price1'] and not $prices->price1.

So here’s a full working example you can try:

_{Note that I defined the prices array in the shortcode callback, but if you’ve got hundreds or more prices, then you might instead want to store the prices in the database, e.g. as an option in the WordPress options table (wp_options).}

function print_price_shortcode( $atts ) {
    $atts = shortcode_atts(
        // default attributes and their value
        array(
            'key' => '',
        ),
        // attributes defined in the shortcode
        $atts
    );

    // Define the price list.
    $prices = array(
        'price1' => 100,
        'price2' => 150,
        // more prices here..
    );

    // Return the price for the specific key if one was set and it exists in the
    // price list, i.e. the above $prices array.
    if ( isset( $prices[ $atts['key'] ] ) ) {
        return $prices[ $atts['key'] ];
    }

    // If the key isn't in the list, then let's return an empty string. Or just
    // return something else if you want to.
    return '';
}

// Registers a shortcode named or with the tag print-price and the above function
// being the callback which RETURNS whatever text/number/etc. which will replace
// the shortcode, e.g. [print-price] or [print-price key="price1"], in the post.
add_shortcode( 'print-price', 'print_price_shortcode' );

PS: If you’re using PHP 7 or later, you can, if you want to, replace the entire lines starting from the if to return ''; with this, which uses the null coalescing operator, i.e. ??:

return $prices[ $atts['key'] ] ?? '';

Update: A better/user-friendly solution

So as I commented, shortcode is easy, but if you’re familiar with the block editor, then you would want to create a block which can give you a nice user interface (UI) like so where you would simply select a price from a dropdown instead of having to type in a key value. However, the block editor uses JavaScript (and React), so you will need to have some decent JavaScript programming skills in order to develop blocks. =)

Here’s the edit() function code for the above, but see my GitHub repo for the save() function and other code:

// Static prices array, but if you want to, you can make it dynamic (inside of
// the edit() function).
const PRICES = [ 100, 150, 199.99 ];

const Edit = ( { attributes, setAttributes } ) => {
    const blockProps = useBlockProps( { style: blockStyle } );

    const currency = '$'; // or maybe, use a `currency` attribute

    // Build an options object for the SelectControl element below.
    const prices = PRICES.map( price => ( {
        label: currency + price,
        value: price,
    } ) );

    // Callback which updates the `price` attribute when a new price is selected
    // from the dropdown.
    const setNewPrice = ( value ) => setAttributes( { price: Number( value ) } );

    return (
        <>
            <InspectorControls>
                <PanelBody title={ __( 'Price', 'wpse-407885' ) }>
                    <SelectControl
                        label={ __( 'Price', 'wpse-407885' ) }
                        options={ [ { // add a "Select a price" option to the price list
                            label: __( 'Select a price', 'wpse-407885' ),
                            value: '',
                        }, ...prices ] }
                        onChange={ setNewPrice }
                        value={ attributes.price }
                        hideLabelFromVision
                        __nextHasNoMarginBottom
                    />
                </PanelBody>
            </InspectorControls>

            <div { ...blockProps }>
                <p>
                    { ( !! attributes.price ) ? sprintf(
                        /* translators: %s: Price with currency, e.g. $100.00 */
                        __( 'Selected price: %s', 'wpse-407885' ),
                        currency + attributes.price.toFixed( 2 )
                    ) : <em>{ __( 'No price selected', 'wpse-407885' ) }</em> }
                </p>
            </div>
        </>
    );
};

_{You can also download any of these plugins that you can simply install & activate: A price dropdown right in the block editor content area, A price dropdown in the settings sidebar, or both blocks in a single plugin.}

Some specific resources and tools I used:

The official Gutenberg examples
https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/block-controls-toolbar-and-sidebar/
https://raw.githubusercontent.com/WordPress/gutenberg/trunk/schemas/json/block.json
Node.js v16.16.0 (with NPM v8.13.2), Git v2.37.1 and the @wordpress/scripts package v23.0.0

Update: A better/user-friendly solution

Related Posts: