Skip to content

Atoms

Jump to bottom
Michiel Tramper edited this page Mar 15, 2018 · 41 revisions

Each atom has unique properties, besides the common properties you may give to each atom or molecule. These are listed here. These properties also have default values.

A set of properties is defined while rendering an atom in the following way:

The second parameter are the properties for the given atom. Properties are always in the form of an array,

MakeitWorkPress\WP_Components\Build::atom( 'image', ['lazyload' => true] );

 

Archive Title

The archive title automatically displays a title if it is used within a post, category or taxonomy archive. Often, this is in the archive.php, category.php or taxonomy.php theme template file.

Property Type Description Default Values
custom string A custom title ''
types array The default titles for different kind of archives See below

Default values for types property

    [
        'author'    => __( 'Posts Author Archive: %s', 'components' ),
        'category'  => single_cat_title( '', false ),
        'day'       => sprintf( __( 'Daily Archives: %s', 'components' ), '<span>' . get_the_date() . '</span>' ),
        'default'   => isset(get_queried_object()->labels->name) ? get_queried_object()->labels->name : __( 'Blog Archives', 'components' ),
        'month'     => sprintf( __( 'Monthly Archives: %s', 'components' ), '<span>' . get_the_date('F Y') . '</span>' ),
        'search'    => sprintf( 
            _n( '%1$s result for: %2$s', '%1$s results for: %2$s', $wp_query->found_posts, 'components' ),
            '<span>' . number_format_i18n( $wp_query->found_posts ) . '</span>',
            '<span>' . get_search_query() . '</span>'
        ),  
        'tag'       => sprintf( __( 'Posts tagged: %s', 'mt' ) , '<span>' . single_tag_title( '', false ) . '</span>' ),
        'tax'       => single_term_title( '', false ),
        'year'      => sprintf( __( 'Yearly Archives: <span>%s</span>', 'mt' ), get_the_date('Y') )   
    ]

 

Author

The author element displays a post author box, with a possible image and description.

Property Type Description Default Values
attributes array Custom attributes See below
avatar string The avatar image element for get_avatar( $post->post_author, 100 )
description string Author Description get_the_author_meta( 'description' )
imageFloat string The float of the author avatar. Accepts 'none', 'left', 'center', 'right' 'none'
imageRounded boolean If the image should be rounded or not. true
jobTitle string An optional job title for the author ''
name string The name of the author get_the_author()
prepend string A custom string before the author's name ''
url string The url to the author's page esc_url( get_author_posts_url( $post->post_author ) )

Default values for attributes property

    [
        'itemprop'  => 'author',
        'itemscope' => 'itemscope',
        'itemtype'  => 'http://schema.org/Person'    
    ]

 

Breadcrumbs

The breadcrumbs element displays breadcrumbs for any type of content.

Property Type Description Default Values
attributes array Custom attributes See below
archive boolean If a link to the posts archive should be included in a post false
home string The text for the homepage crumb __('Home', 'components')
seperator string The seperator between breadcrumbs '&rsaquo;'
taxonomy boolean or string Adds the posts taxonomy in the breadcrumb. If set to true, takes the first taxonomy. If set to string, assumes that the given string is a taxonomy name. false
locations string The title values for the different breadcrumb locations See below

Default values for attributes property

    [
        'itemscope' => 'itemscope',
        'itemtype'  => 'http://schema.org/Breadcrumb'
    ]

Default values for locations property

The locations property indicates the titles that are used for the given location. For example, the breadcrumb at the 404 page is in this case: Home > 404

    [           
        '404'       => __('404', 'components'),
        'archive'   => isset(get_queried_object()->labels->name) ? get_queried_object()->labels->name : '',
        'author'    => '',
        'category'  => single_cat_title( '', false),
        'day'       => get_the_date(),
        'month'     => get_the_date('F Y'),
        'page'      => get_the_title(),
        'search'    => sprintf( __('Search Results: %s', 'components'), urldecode(get_query_var('s')) ), 
        'single'    => get_the_title(),
        'tag'       => single_tag_title( '', false ),
        'tax'       => single_term_title( '', false ), 
        'year'      => get_the_date('Y')
    ]

 

Button

Displays a button.

Property Type Description Default Values
attributes array Custom attributes See below
iconAfter string The icon before the label. Accepts a fontawesome string, such as 'user-o' ''
iconBefore string The icon afterthe label. Accepts a fontawesome string, such as 'user-o' ''
iconVisible string If the icon is visible by default or by hover. Accepts 'standard' or 'hover' 'standard'
label string The button label ''
size string The size of the button. Accepts 'none', 'small', 'large'. An empty size results in the default button. If set to none, renders a button without background, border and padding ''

Default values for the attributes property

If the key 'href' is set to 'post', it will link to the current post. Otherwise, it accepts a custom url.

    'attributes'    => [
        'href'   => 'post',
        'target' => '_self'
    ],

 

Callback

Executes a function using call_user_func. Accepts a the name of a function or a class method in the form of an array [$this, 'method']

Property Type Description Default Values
callback array or string The function that should be executed. ''

 

Cart

Displays a woocommerce cart, for use in menu's and pages. Requires the WooCommerce Plugin to function.

Property Type Description Default Values
cart boolean Whether to show the cart's contents or not. true
collapse boolean Whether to collapse the cart by default. A collapsed cart becomes visible by clicking the icon. true
icon boolean Whether to show a shopping icon or not true

 

Comments

Displays a section with a comments form and list of comments, using the comments_template function. May be used within posts.

Property Type Description Default Values
closed boolean If comments are closed. ! comments_open()
closedText string The text when comments are closed __('Comments are closed.', 'components')
form string The comments form comment_form()
haveComments int If there are comments get_comments_number()
next string The text for the next comments page when using comments pagination '&rsaquo;'
paged boolean If comments are paged get_comment_pages_count() > 1 && get_option( 'page_comments' ) ? true : false
prev string The text for the previous comments page when using comments pagination '&lsaquo;'
seperate boolean If comments should be seperated by type false
template string The name of a custom template file ''
title string The title above the comments See below

Default values for title property

sprintf( 
        _n( 'One Response to %2$s', '%1$s Responses to %2$s', get_comments_number(), 'components' ),
        number_format_i18n( get_comments_number() ),
        get_the_title()
)

 

Content

Displays the content or excerpt for a post

Property Type Description Default Values
attributes array Custom content attributes ['itemprop' => 'text']
content string A string for displaying custom content ''
pages string Includes the pagination element for multi-page content wp_link_pages( ['echo' => false] )
type string The type of content, accepts 'content' or 'excerpt' 'content'

 

Copyright

Displays a copyright element, properly formatted with rich snippets.

Property Type Description Default Values
copyright string The copyright symbol '©'
date string The copyright date date('Y')
itemtype string The default itemtype for the copyrightHolder 'http://schema.org/Organization'
name string The name of the copyright holder ''

 

Date

Displays a date in a time element.

Property Type Description Default Values
attributes array Custom attributes for date ['datetime' => get_the_date('c'), 'itemprop' => 'datePublished']
date string The displayed date get_the_date()
icon string Optional icon before the date ''

 

Description

Displays a description

Property Type Description Default Values
attributes array Custom attributes for description ['itemprop' => 'description']
description string The actual description ''
tag string The html tag used for displaying the description 'p'

 

Image

Displays an image wrapped in a figure element

Property Type Description Default Values
enlarge boolean Whether the image should be enlarged on hover or not. false
image string or int Accepts a complete tag, an integer to an attachment ID or a custom string. If set to a custom string, it will look for the image id in a meta key equal to that string ''
lazyload boolean If the image should be lazyloaded false
link boolean Accepts any url, linking the image. If set to post, gets the link of the current post. ''
post boolean Passes a post id. Can be used if the permalink does not work ''
size boolean The image size to load 'large'

 

Logo

Displays a logo with accompanying rich snippets.

 

Menu

 

Meta

 

Modal

 

Pagination

 

Rate

 

Scroll

 

Search

 

Share

 

Sidebar

 

Social

 

String

 

Tabs

 

Termlist

 

Terms

 

Title

 

Type

 

Video

Clone this wiki locally