{"id":386,"date":"2012-07-11T14:52:14","date_gmt":"2012-07-11T14:52:14","guid":{"rendered":"https:\/\/www.frozenlogistic.com\/?p=386"},"modified":"2013-04-15T06:19:17","modified_gmt":"2013-04-15T06:19:17","slug":"typography-button","status":"publish","type":"post","link":"https:\/\/www.frozenlogistic.com\/?p=386","title":{"rendered":"Typography button"},"content":{"rendered":"<p>To simplify shortcodes use available in themes based on GavernWP framework, a button for theme&#8217;s typography has been implemented which is available in a posts editor:<a href=\"https:\/\/www.frozenlogistic.com\/wp-content\/uploads\/2012\/07\/meetgavernwp_typo1.jpg\"><img fetchpriority=\"high\" decoding=\"async\" class=\"aligncenter size-full wp-image-905\" alt=\"meetgavernwp_typo1\" src=\"https:\/\/www.frozenlogistic.com\/wp-content\/uploads\/2012\/07\/meetgavernwp_typo1.jpg\" width=\"474\" height=\"118\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>By clicking this button, you will see a list of available typography elements:<a href=\"https:\/\/www.frozenlogistic.com\/wp-content\/uploads\/2012\/07\/meetgavernwp_typo2.jpg\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-906\" alt=\"meetgavernwp_typo2\" src=\"https:\/\/www.frozenlogistic.com\/wp-content\/uploads\/2012\/07\/meetgavernwp_typo2.jpg\" width=\"265\" height=\"353\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>It is possible to choose a version with a stylistic specified for the majority of elements. After choosing a particular style, a shortcode will appear which will be replaced in entry content by scripts to structure styled in a way given.<\/p>\n<p>Please, note that adding a new Shortcode code requires three operations:<\/p>\n<ul>\n<li>adding an entry in shortcodes.js configuration file<\/li>\n<li>adding PHP code supporting a shortcode given<\/li>\n<li>adding optional CSS and JavaScript code (if a shortcode given requires it)<\/li>\n<\/ul>\n<p><strong>shortcodes.js<\/strong> file in <strong>config<\/strong> catalog includes entries which are replaced to menu structure visible after clicking a typography button &#8211; it includes <strong>$GAVERNWP_SHORTCODES<\/strong> variable which is a table including objects representing elements of a menu. Each object has three features: <strong>title<\/strong>, <strong>code<\/strong> and <strong>submenu<\/strong>. Let&#8217;s analyze this structure with a <strong>Highlight<\/strong> position:<\/p>\n<p>[code]{<\/p>\n<p>\u00abtitle\u00bb: \u00abHighlight\u00bb,<br \/>\n\u00abcode\u00bb: \u00ab[highlight]Your text[\/highlight]\u00bb,<br \/>\n\u00absubmenu\u00bb: [<br \/>\n{<br \/>\n\u00abtitle\u00bb: \u00abStyle I\u00bb,<br \/>\n\u00abcode\u00bb: \u00ab[highlight style=\\\u00bb1\\\u00bb]Your text[\/highlight]\u00bb<br \/>\n},<br \/>\n{<br \/>\n\u00abtitle\u00bb: \u00abStyle II\u00bb,<br \/>\n\u00abcode\u00bb: \u00ab[highlight style=\\\u00bb2\\\u00bb]Your text[\/highlight]\u00bb<br \/>\n},<br \/>\n{<br \/>\n\u00abtitle\u00bb: \u00abStyle III\u00bb,<br \/>\n\u00abcode\u00bb: \u00ab[highlight style=\\\u00bb3\\\u00bb]Your text[\/highlight]\u00bb<br \/>\n}<br \/>\n]<br \/>\n},[\/code]<\/p>\n<ul>\n<li><strong>title<\/strong> &#8211; it includes a menu positon name displayed by a script<\/li>\n<li><strong>code<\/strong> &#8211; it is a shortcode code which will be added to an entry when clicking a menu position given &#8211; you have to remember that not all menu positions on the first level have a value in this field &#8211; if it was an empty sequence of symbols, it means for a script that clicking on a menu position given does not request any action.<\/li>\n<li><strong>submenu<\/strong> &#8211; it is a table\u00a0 of a submenu of a menu position given. Each submenu position is built the same as menu positions as these on the first level but with one difference &#8211; a submenu cannot have the next submenu, so you do not add a <strong>submenu<\/strong> feature in a submenu object.<\/li>\n<\/ul>\n<p>Let&#8217;s say, we added our shortcode to a typography button using shortcodes.js file. So, there is one thing left to do &#8211; support our shortcode from a theme side.<\/p>\n<p>To do this, you have to open <strong>gavern\/helpers\/helpers.shortcodes.php<\/strong> file.<\/p>\n<p>This file is divided into three main sections starting with lines similar to:<\/p>\n<p>[code]if(get_option($tpl-&gt;name . &#8216;_shortcodes1_state&#8217;, &#8216;Y&#8217;) == &#8216;Y&#8217;) {[\/code]<\/p>\n<p>It is a conditional\u00a0 IF instruction connected with a group of typography elements given. Gavern icludes three groups:<\/p>\n<ul>\n<li>typography elements &#8211; functions connected with it have <strong>gavern_ts_<\/strong> prefix in the title<\/li>\n<li>interactive elements &#8211; functions connected with it have <strong>gavern_ies_<\/strong> prefix in the title<\/li>\n<li>elements characteristic for a particular theme &#8211; functions connected with it have <strong>gavern_tss_<\/strong> prefix in the title<\/li>\n<\/ul>\n<p>We recommend to add new typography elements in the last group &#8211; in Meet GavernWP theme, it is empty by default. Please, remember about using an appropriate prefix in a function name for a group given, e.g. in the case of the third group, it will be <strong>gavern_tss_<\/strong>. The code itself of a shortcode given has to be created according to guidelines described in<a href=\"http:\/\/codex.wordpress.org\/Shortcode_API\"> Shortcode API<\/a>.<\/p>\n<p>The last step is rather optional and depends on your Shortcode type. If your Shortcode requires additional CSS or JavaScript code, you have to define it in <strong>shortcodes.*.css<\/strong> i <strong>shortcodes.*.js<\/strong> files, where <strong>*<\/strong> is a group name to which a Shortcode given was assigned.<\/p>\n<p>It is very important to place elements of CSS and JavaScript code in an appropriate file, as it will give a possibility of optimizing whole theme code when switching off given group of Shortcodes codes.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>To simplify shortcodes use available in themes based on GavernWP framework, a button for theme&#8217;s typography has been implemented which is available in a posts editor: &nbsp; By clicking this &#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[57],"tags":[56,39,40,62,50,42],"class_list":["post-386","post","type-post","status-publish","format-standard","hentry","category-theme-back-end","tag-back-end","tag-css","tag-js","tag-shortcodes","tag-theme","tag-typography"],"_links":{"self":[{"href":"https:\/\/www.frozenlogistic.com\/index.php?rest_route=\/wp\/v2\/posts\/386","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.frozenlogistic.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.frozenlogistic.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.frozenlogistic.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.frozenlogistic.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=386"}],"version-history":[{"count":3,"href":"https:\/\/www.frozenlogistic.com\/index.php?rest_route=\/wp\/v2\/posts\/386\/revisions"}],"predecessor-version":[{"id":1028,"href":"https:\/\/www.frozenlogistic.com\/index.php?rest_route=\/wp\/v2\/posts\/386\/revisions\/1028"}],"wp:attachment":[{"href":"https:\/\/www.frozenlogistic.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=386"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.frozenlogistic.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=386"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.frozenlogistic.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=386"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}