Skip to content

Card Function (wpex_card) Arguments

In this article

    Here you can find a list of arguments that can be passed onto the wpex_card function when displaying theme cards in custom loops or when creating custom cards.

    Parameters List

    ParameterTypeDescription
    stylestringYour card style.
    post_idintThe post being displayed.
    allowed_mediaarrayList of allowed media: thumbnail, video, audio, gallery.
    thumbnail_idintThe post thumbnail ID to use for the get_thumbnail method.
    thumbnail_sizestring/arrayAccepts any registered image size name, or an array of width, height, crop values in pixels (in that order).
    thumbnail_filterstringImage filter (grayscale, sepia, contrast-150, saturate-2)
    thumbnail_hoverstringImage hover (opacity,opacity-invert, shrink, grow, side-pan, vertical-pan, tilt, blurr, blurr-invert, sepia, fade-out, fade-in, grayscale, grascale-invert).
    thumbnail_overlay_stylestringOverlay style name @see wpex_overlay_styles_array() at Total/framework/functions/overlays.
    title_tagstringHTML tag used for the title (h2, h3. h4, h5, h6, div, span).
    excerpt_lengthintExcerpt length in words.
    excerptstringCustom excerpt output if not wanting to use the themes excerpt function.
    more_link_textstringText used for any “more” links.
    more_link_aria_labelstringText used for any “more” link aria-label attribute.
    datestringCustom date output.
    authorstringCustom author name output.
    iconhtmlCustom Icon to be used for Icon style cards.
    avatarhtmlCustom author avatar output
    ratinghtmlCustom rating output.
    is_on_salehtmlCustom onsale output.
    pricehtmlCustom price output.
    css_animationstringWPBakery CSS animation classname.
    el_classstringAny custom classes to add to the card output.
    featuredbooleanIs this a featured card?
    breakpointstringUsed for cards that have different mobile looks (such cards that go from left/right to top/bottom) – use the theme’s utility breakpoints (sm, md, lg, xl)
    modal_contenthtmlCustom output for popup link modal windows.
    modal_titlestringCustom test for the popup link modal window title.
    urlstringThe URL to be used for the card links.
    link_typestringLink type for the card.
    link_titlestringLink title attribute value.
    link_targetstringLink target attribute value.
    link_relstringLink rel attribute value.
    link_datastring/arrayLink data attributes
    lightbox_urlstringCustom URL to use for the card.
    lightbox_typestringLightbox type (video, gallery, thumbnail, modal).
    post_videostringPost video oEmbed URL.

    Sample Usage

    These arguments can be passed to the card function like such:

    // Query posts
    $the_query = new WP_Query( [
        'post_type' => 'post',
        'posts_per_page' => 4,
    ] );
    
    // The Loop
    if ( $the_query->have_posts() ) {
       while ( $the_query->have_posts() ) {
    
            $the_query->the_post();
    
            // Card arguments
            $card_args = [
                'style'   => 'blog_1',
                'post_id' => get_the_ID(),
            ];
    
            // Display post card
            wpex_card( $card_args );
    
        }
        echo '</ul>';
    } else {
        // no posts found
    }

    The example shows how you would pass your arguments to the wpex_card function when used inside a custom loop. You can also define arguments at the top of a custom card design so that they will apply in all loops like such:

    // Define custom args
    $args['thumbnail_size'] = 'large';
    $args['title_tag'] = 'h3';
    
    // Card output
    $output = '';
    
    $output .= $this->get_media( [
    	'class' => 'wpex-mb-20',
    ] );
    
    $output .= $this->get_title( [
    	'class' => 'wpex-heading wpex-text-lg wpex-mb-10',
    ] );
    
    return $output;
    Important Notice

    When defining arguments in your card output it will override any theme settings. So for example, if you define a thumbnail_size in your card you won’t be able to alter the thumbnail size when using the Post Cards module because you’ve hard-coded it.

    Related Articles
    Back To Top