-
Notifications
You must be signed in to change notification settings - Fork 4
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] );
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 |
[
'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') )
]
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 ) ) |
[
'itemprop' => 'author',
'itemscope' => 'itemscope',
'itemtype' => 'http://schema.org/Person'
]
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 |
[
'itemscope' => 'itemscope',
'itemtype' => 'http://schema.org/Breadcrumb'
]
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')
]
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 | '' |
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'
],
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. | '' |
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 |
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 |
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()
)
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' |
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 | '' |
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 | '' |
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' |
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' |
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') )' |
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. | '' |
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 | '' |
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 | '' |
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 |
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 |
Renders a scroll button that moves away from it's parent element, or scrolls to top
Property | Type | Description | Default Values |
---|---|---|---|
icon | string | By default, a mouse icon is displayed. Use this to display a custom font-awesome icon, for example 'angle-down' | '' |
top | boolean | If set to true, this element scrolls to top | false |
Displays a search field, which optionally may haeve ajax powered search
Property | Type | Description | Default Values |
---|---|---|---|
attributes | array | The custom attributes for the search atom | See below |
ajax | boolean | Enables the ajax search action | false |
all | string | The string for searching through all results | __('View all search results', 'components') |
collapse | boolean | If set to true, only shows a search icon that opens a form upon click | false |
form | string | The searchform | get_search_form(false) |
link | string | The link to the search page | esc_url( get_search_link('') ) |
The data attributes are used to define how the ajax search is performed.
'data' => [
'appear' => 'bottom', // Determines from which direction posts apear, using scroll-reveal. Accepts bottom, top, left or right
'delay' => 300, // Delay to start searching after typing
'length' => 3, // The length of the search string to start querying with ajax
'none' => __('Bummer! No results found', 'components'), // The text when there are no results
'number' => 5 // The amount of posts to query with ajax
]
Displays a set of sharing buttons
Property | Type | Description | Default Values |
---|---|---|---|
colorBackground | boolean | If the sharing buttons should have a background | true |
enabled | array | The networks that are enabled | [ 'facebook', 'twitter', 'linkedin', 'google-plus', 'pinterest', 'reddit', 'stumbleupon', 'pocket', 'whatsapp' ] |
fixed | boolean | If the shared icons should be fixed to the left of the screen | false |
share | string | The label at the beginning of the sharing icons | __('Share:', 'wp-components') |
networks | array | How the sharing buttons are build up | See below |
The default sharing links are set-up with the networks attribute, and they get their sources from the following code:
if( has_post_thumbnail($postID) ) {
$id = get_post_thumbnail_id( $postID );
$image = wp_get_attachment_image_url( $id, isset( $atom['size'] ) ? $atom['size'] : 'large' );
} else {
$image = '';
}
$image = isset( $atom['image'] ) ? $atom['image'] : $image;
$source = isset( $atom['source'] ) ? $atom['source'] : get_bloginfo('name');
$title = isset( $atom['title'] ) ? $atom['title'] : rawurlencode( get_the_title($postID) );
$url = isset( $atom['url'] ) ? $atom['url'] : rawurlencode( get_permalink($postID) );
$via = isset( $atom['via'] ) ? $atom['via'] : '';
[
'facebook' => [ 'url' => 'http://www.facebook.com/sharer.php?u=' . $url, 'icon' => 'facebook' ],
'twitter' => [ 'url' => 'http://twitter.com/share?url=' . $url . '&text=' . $title . '&via=' . $via, 'icon' => 'twitter' ],
'linkedin' => [
'url' => 'http://www.linkedin.com/shareArticle?mini=true&url=' . $url . '&title=' . $title . '&source=' . $source,
'icon' => 'linkedin'
],
'google-plus' => [ 'url' => 'https://plus.google.com/share?url=' . $url, 'icon' => 'google-plus' ],
'pinterest' => [
'url' => 'http://pinterest.com/pin/create/button/?url=' . $url . '&description=' . $title . '&media=' . $image,
'icon' => 'pinterest'
],
'reddit' => [ 'url' => 'http://www.reddit.com/submit?url=' . $url . '&title=' . $title, 'icon' => 'reddit-alien' ],
'stumbleupon' => [ 'url' => 'http://stumbleupon.com/submit?url=' . $url . '&title=' . $title, 'icon' => 'stumbleupon' ],
'pocket' => [ 'url' => 'https://getpocket.com/edit.php?url=' . $url, 'icon' => 'get-pocket' ],
'whatsapp' => [ 'url' => 'whatsapp://send?text=' . $title . ' ' . $url, 'icon' => 'whatsapp' ]
]
Optionally, each network supports the 'title' key if it should display a text next to it's icon.
Displays a sidebar
Property | Type | Description | Default Values |
---|---|---|---|
attributes | array | The custom attributes for a sidebar | ['itemscope' => 'itemscope', 'itemtype' => 'http://www.schema.org/WPSideBar'] |
sidebars | array | An array with the sidebar names as values | [] |
Displays a selection of social icons, linking to social profiles
Property | Type | Description | Default Values |
---|---|---|---|
colorBackground | boolean | If the icons should have a background | true |
icons | array | The default font awesome icons for each network | See below |
urls | array | The urls to profiles, in the format 'network' => 'url', e.g. ['facebook' => 'http://www.facebook.com/profile/'] | [] |
titles | array | Optional titles, displayed next to the icons, in the format 'network' => 'title', e.g. ['facebook' => 'Facebook'] | [] |
[
'email' => 'envelope',
'telephone' => 'phone',
'facebook' => 'facebook',
'instagram' => 'instagram',
'twitter' => 'twitter',
'linkedin' => 'linkedin',
'google-plus' => 'google-plus',
'youtube' => 'youtube-play',
'pinterest' => 'pinterest',
'dribbble' => 'dribbble',
'behance' => 'behance',
'reddit' => 'reddit-alien',
'stumbleupon' => 'stumbleupon',
'whatsapp' => 'whatsapp'
]