{"id":33866,"date":"2019-03-01T12:29:33","date_gmt":"2019-03-01T12:29:33","guid":{"rendered":"http:\/\/getshortcodes.com\/?post_type=docs&p=33866"},"modified":"2019-05-28T14:22:42","modified_gmt":"2019-05-28T14:22:42","slug":"attributes-of-custom-shortcodes","status":"publish","type":"docs","link":"https:\/\/getshortcodes.com\/docs\/attributes-of-custom-shortcodes\/","title":{"rendered":"Attributes of custom shortcodes"},"content":{"rendered":"

Table of contents<\/p>\n\n

  1. Intro<\/a><\/li>
  2. How to create attribute<\/a><\/li>
  3. Field name and description<\/a><\/li>
  4. Attribute name<\/a><\/li>
  5. Default value<\/a><\/li>
  6. Field type<\/a>
    1. Text<\/a><\/li>
    2. Number<\/a><\/li>
    3. Color<\/a><\/li>
    4. Dropdown<\/a><\/li>
    5. Switch<\/a><\/li>
    6. Icon<\/a><\/li>
    7. Media library<\/a><\/li>
    8. Image source<\/a><\/li><\/ol><\/li><\/ol><\/li><\/ol>\n\n\n

      Intro<\/h2>\n\n\n\n

      You can create attributes during creation of custom shortcodes. Attributes are shortcode settings. Using the attributes you can, for example, create two identical shortcodes of different colours or sizes. Created attributes will be available in shortcodes creator, at insertion of a custom shortcode to post editor.<\/p>\n\n\n\n

      This is how shortcode without attributes\/settings looks like:<\/p>\n\n\n\n

      [divider]<\/pre>\n\n\n\n
      and this is a shortcode with attributes\/settings:<\/p>\n\n\n\n
      [divider color=\"red\"]<\/pre>\n\n\n\n
      How to create attribute<\/h2>\n\n\n\n
      While creating\/editing custom shortcode, find Attributes section and press Add attribute button. You can add any number of attributes. Settings for creation of attributes are described below.<\/p>\n\n\n\n
      Field name and description<\/h2>\n\n\n\n
      Full name of the field and its description. This text will be shown in shortcode creator at insertion of a shortcode into page editor.<\/p>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      Attribute name<\/h2>\n\n\n\n
      Attribute’s short name. This name will be used at insertion of a shortcode into editor. This field can be filled with Latin letters in lower case [a..z], figures [0..9], and underscore “_” only. Example: use color<\/em> as a name, and the shortcode will look like:<\/p>\n\n\n\n
      [shortcode color=\"\"]<\/pre>\n\n\n\n
      Default value<\/h2>\n\n\n\n
      This value will be used as attribute value, unless any other value is specified at insertion of shortcode into editor. <\/p>\n\n\n\n
      Field type<\/h2>\n\n\n\n
      This setting indicates the field type which will be used in shortcode creator at insertion of shortcode to page editor. All available field types are described below, in “Field types” section of the article.
      <\/p>\n\n\n\n
      Text<\/h3>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      Simple text field. Possible default value: any text.<\/p>\n\n\n\n
      Number<\/h3>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      Field for selection of number. Allows to select number using slider or text field. Allows to set minimum and maximum values and slider increments.<\/p>\n\n\n\n
      Color<\/h3>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      Field for selection of colour. Allows to select color from drop-down color ring.<\/p>\n\n\n\n
      Dropdown<\/h3>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      Dropdown list. When adding this attribute, dropdown options should be set as follows:<\/p>\n\n\n\n
      value1|Option 1
      value2|Option 2<\/pre>\n\n\n\n
      value1<\/em> text will be inserted into post editor as attribute value as shown in code below. Option 1<\/em> text will be shown in shortcode creator at insertion of shortcode.<\/p>\n\n\n\n
      [shortcode dropdown=\"value1\"]<\/pre>\n\n\n\n
       Use one of the values specified in Dropdown options field as a default values, for example value1<\/em>.<\/p>\n\n\n\n
      Switch<\/h3>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      Field with selection of value between Yes and No. Possible default values: yes<\/em>, no<\/em>.<\/p>\n\n\n\n
      Icon<\/h3>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      Field for icon picker. Possible default values: name of vector icon in “icon: ICON_NAME” format or link to the image (for example: http:\/\/example.com\/image.jpg).<\/p>\n\n\n\n
      Media library<\/h3>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      Field for selection of image from media library. When selecting the image, link to it will be inserted. Possible default values: link to the image (for example: http:\/\/example.com\/image.jpg).<\/p>\n\n\n\n
      Image source<\/h3>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      Advanced field for selection of several images from the media library. Allows to create image galleries, sliders, etc. IDs of selected images divided by decimal points will be added as attribute values. Possible default values: list of image IDs divided by decimal points.<\/p>\n","protected":false},"featured_media":0,"template":"","docs_category":[25],"class_list":["post-33866","docs","type-docs","status-publish","hentry","docs_category-addons"],"_links":{"self":[{"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/docs\/33866","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/types\/docs"}],"wp:attachment":[{"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/media?parent=33866"}],"wp:term":[{"taxonomy":"docs_category","embeddable":true,"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/docs_category?post=33866"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}