Atoms

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	'›'
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	'›'
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	'‹'
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.

Property	Type	Description	Default Values
attributes	array	The custom logo attributes.	['href' => esc_url( home_url('/') ), 'itemscope' => 'itemscope', 'itemtype' => 'http://schema.org/Organization',]
alt	string	The alt text for the logo	'__('Logo', 'components')'
default	array	The default logo image	['src' => '', 'height' => '', 'width' => '']
defaultTransparent	array	The logo for transparent headers	['src' => '', 'height' => '', 'width' => '']
mobile	array	The logo image displayed for cellphones	['src' => '', 'height' => '', 'width' => '']
mobileTransparent	array	The transparent logo image displayed for cellphones	['src' => '', 'height' => '', 'width' => '']
tablet	array	The logo image displayed for tablets	['src' => '', 'height' => '', 'width' => '']
tabletTransparent	array	The transparent logo image displayed for tablets	'large'
title	string	The title for the logo	'esc_attr( get_bloginfo('name') )'

 

Menu

Displays a WordPress menu.

Property	Type	Description	Default Values
attributes	array	The custom menu attributes.	['itemtype' => 'http://schema.org/SiteNavigationElement', 'itemscope' => 'itemscope']
args	array	Custom arguments for wp_nav_menu	[]
collapse	boolean	Whether submenu items should be collapsed for mobile menus or not	true
dropdown	boolean	Whether to show submenu items or not	true
hamburger	array	Accepts 'mobile' to display a hamburger menu under 767px viewport width, 'tablet' for under 1024px viewport width and 'always' to always display the hamburger menu.	'mobile'
indicator	boolean	If submenus should be indicated by a downward arrow	true
menu	string	The logo image displayed for tablets	''
view	string	Custom menu style. Accepts dark for a dark mobile menu, fixed, left or right to display a hamburger menu variation.	''

 

Meta

Displays the values from a custom meta field

Property	Type	Description	Default Values
after	string	A string echoed after the meta information	''
before	string	A string echoed before the meta information	''
key	string	The key for the custom meta field .	''
id	int	Passes a post id.	get_the_ID()
meta	string	An optional string with meta information	''

 

Modal

Renders a modal, hidden by default. Can be made visible by own liking with a JavaScript click event.

Property	Type	Description	Default Values
attributes	array	Custom modal attributes	['data' => ['id' => uniqid()]]
content	string	The content of the modal	''

 

Pagination

Displays a pagination element for use in archives, grids and single posts

Property	Type	Description	Default Values
format	string	The format of the pagination link	'/page/%#%'
next	string	The next text within the pagination	'›'
pagination	string	An optional pagination element. Overwrites the default output of this atom.	''
prev	string	The previous text within the pagination	'‹'
size	int	The amount of pagination numbers	2
type	string	The type of pagination. Accepts 'numbers', 'arrows' (for archives or grids) or 'post' (for pagination at single posts).	'numbers'
query	string	The WP_Query object this pagination is related to. Required for arrows and numbers type.	$wp_query

 

Rate

Displays a component with a certain rating value displayed by stars, which may optionally be influenced by visitors. The rating component stores it value in the components_rating meta field and the rating count in components_rating_count by default. These fields are also used for ajax-powered ratings.

Property	Type	Description	Default Values
attributes	array	Custom rate attributes	['itemprop' => 'aggregateRating', 'itemscope' => 'itemscope', 'itemtype' => 'http://schema.org/AggregateRating']
author	string	An optional author for this review	''
authorType	string	The itemtype for this author	'http://schema.org/Person'
count	string	The count of ratings	get_post_meta(get_the_ID(), 'components_rating_count', true)
id	string	The id for the post that is rated	get_the_ID()
max	string	The maximum rating value	5
min	string	The minimum rating value	0
rate	boolean	If visitors can rate	true
reviewed	string	The name of the item that is being reviewed	''
value	string	An optional author for this review	get_post_meta(get_the_ID(), 'components_rating', true) ? get_post_meta(get_the_ID(), 'components_rating', true) : 0

 

Scroll

 

Search

 

Share

 

Sidebar

 

Social

 

String

 

Tabs

 

Termlist

 

Terms

 

Title

 

Type

 

Video