{"id":2276,"date":"2024-03-05T10:29:57","date_gmt":"2024-03-05T10:29:57","guid":{"rendered":"https:\/\/wpshortcode.org\/?p=2276"},"modified":"2024-03-05T10:29:58","modified_gmt":"2024-03-05T10:29:58","slug":"grid-shortcodes","status":"publish","type":"post","link":"https:\/\/wpshortcode.org\/grid-shortcodes\/","title":{"rendered":"Grid Shortcodes Shortcodes"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Below, you&#8217;ll find a detailed guide on how to add the <strong>Grid Shortcodes Shortcodes<\/strong> to your WordPress website, including their <strong>parameters<\/strong>, <strong>examples<\/strong>, and <strong>PHP function code<\/strong>. Additionally, we&#8217;ll assist you with common issues that might cause the Grid Shortcodes Plugin shortcodes not to show or not to work correctly.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Before starting, here is an overview of the Grid Shortcodes Plugin and the shortcodes it provides:<\/p>\n\n\n<p>    <div class=\"plugin-info-box\">\n        <div class=\"top-main\">\n            <!-- SVG Image -->\n            <div class=\"plugin-image\">\n                <img decoding=\"async\" src=\"https:\/\/ps.w.org\/grid-shortcodes\/assets\/icon-128x128.png?rev=1178716\" alt=\"Plugin Icon\" \/>\n            <\/div>\n            \n            <div class=\"plugin-descriptive-part\">\n                <!-- Plugin Name with Link -->\n\n                    <a class=\"plugin-title\" href=\"https:\/\/wordpress.org\/plugins\/grid-shortcodes\" target=\"_blank\" rel=\"noopener\">\n                        Grid Shortcodes                    <\/a>\n\n\n                <!-- Plugin Description -->\n                <p class=\"plugin-description\">\n                    &quot;Grid Shortcodes is a handy WordPress plugin that lets users incorporate stylish and responsive grid layouts in their posts and pages with simple shortcodes. Ideal for organized presentation.&quot;                <\/p>\n            <\/div>\n        <\/div>\n\n        <!-- Rating and Additional Info -->\n        <div class=\"plugin-meta\">\n            <span class=\"plugin-rating\">\n                <span class='stars'>\u2605\u2605\u2605\u2605\u2605<\/span> (10)\n            <\/span>\n            <span class=\"plugin-active-installs\">\n                <strong>Active Installs<\/strong>: 2000+\n            <\/span>\n            <span class=\"plugin-tested\">\n                <strong>Tested with<\/strong>: 6.3.2            <\/span>\n            <span class=\"plugin-php-version\">\n                <strong>PHP Version<\/strong>: false            <\/span>\n        <\/div>\n\n        <!-- List of Included Shortcodes -->\n        <div class=\"plugin-shortcodes\">\n            <strong>Included Shortcodes:<\/strong>\n            <ul>\n                <li>[]<\/li><li>[GDC_column]<\/li>            <\/ul>\n        <\/div>\n    <\/div>\n    <\/p>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Grid Shortcodes [null] Shortcode<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The GDC_row shortcode is part of the grid-shortcodes plugin. It&#8217;s used to create a new row within your content. The shortcode: [GDC_row] wraps the content in a div with the class &#8220;gdc_row&#8221;, allowing for custom styling and layout. This shortcode uses regex to identify and handle any preceding or trailing content, ensuring a clean implementation.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Shortcode<\/strong>: <code>[null]<\/code><\/p>\n\n\n\n<div style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Examples and Usage<\/h3>\n\n\n<p><strong>Basic example<\/strong> &#8211; A simple implementation of the GDC_row shortcode without any parameters.<\/p>\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">[GDC_row][\/GDC_row]<\/code><\/pre>\n\n\n<p><strong>Advanced examples<\/strong><\/p>\n<p>Using the GDC_row shortcode to wrap two GDC_column shortcodes. The content within the GDC_column shortcodes will be displayed in two columns within a single row.<\/p>\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">\n[GDC_row]\n[GDC_column]Content for column 1[\/GDC_column]\n[GDC_column]Content for column 2[\/GDC_column]\n[\/GDC_row]\n<\/code><\/pre>\n\n\n<p>Implementing the GDC_row shortcode to wrap three GDC_column shortcodes. The content within the GDC_column shortcodes will be displayed in three columns within a single row.<\/p>\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">\n[GDC_row]\n[GDC_column]Content for column 1[\/GDC_column]\n[GDC_column]Content for column 2[\/GDC_column]\n[GDC_column]Content for column 3[\/GDC_column]\n[\/GDC_row]\n<\/code><\/pre>\n\n\n<p>Please note that the GDC_row shortcode doesn&#8217;t support any parameters or attributes. It&#8217;s mainly used to wrap GDC_column shortcodes, which will be displayed as columns within a single row.<\/p>\n\n\n<div style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">PHP Function Code<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">In case you have difficulties debugging what causing issues with <code>[null]<\/code> shortcode, check below the related PHP functions code.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Shortcode line<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">add_shortcode( 'GDC_row', 'gsc_row_sc' );<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Shortcode PHP function<\/strong>:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: php; light: false; title: ; toolbar: true; notranslate\" title=\"\">\nfunction gsc_row_sc( $atts, $content = null ) {\n\n  $before_column_regex = &#039;\/^(\\s*(&lt;p&gt;)*(&lt;\\\/p&gt;)*(&lt;br \\\/&gt;)*(&lt;br&gt;)*)*(\\&#91;GDC_column)\/&#039;;\n  $mid_column_regex = &#039;\/(\\&#91;\\\/GDC_column\\])(\\s*(&lt;p&gt;)*(&lt;\\\/p&gt;)*(&lt;br \\\/&gt;)*(&lt;br&gt;)*)*(\\&#91;GDC_column)\/&#039;;\n  $last_column_regex = &#039;\/(\\&#91;\\\/GDC_column\\])(\\s*(&lt;p&gt;)*(&lt;\\\/p&gt;)*(&lt;br \\\/&gt;)*(&lt;br&gt;)*)*$\/&#039;;\n\n  $new_content = trim(strstr($content, &#039;&#91;GDC_&#039;));\n  $new_content = preg_replace($before_column_regex, &quot;$6&quot;, $new_content);\n  $new_content = preg_replace($mid_column_regex, &quot;$1$7&quot;, $new_content);\n  $new_content = preg_replace($last_column_regex, &quot;$1&quot;, $new_content);\n  $output = &#039;&lt;div class=&quot;gdc_row&quot;&gt;&#039; . $new_content . &#039;&lt;\/div&gt;&#039;;\n\n  return do_shortcode($output);\n\n}\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\"><strong>Code file location<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">grid-shortcodes\/grid-shortcodes\/gsc.php<\/code><\/pre>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Grid Shortcodes [GDC_column] Shortcode<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Grid-Shortcodes plugin shortcode, &#8216;GDC_column&#8217;, is used to create a custom-sized column in a grid layout. \n\n\n\n&#8216;GDC_column&#8217; shortcode allows you to specify the size of the column using the &#8216;size&#8217; attribute. The content within the column is wrapped within a div with class &#8216;gdc_inner&#8217;.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Shortcode<\/strong>: <code>[GDC_column]<\/code><\/p>\n\n\n\n<div style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Parameters<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Here is a list of all possible GDC_column shortcode parameters and attributes:<\/p>\n\n\n<ul>\n<li><code>size<\/code> &#8211; Determines the width of the column in the grid layout.<\/li>\n<\/ul>\n\n\n<div style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Examples and Usage<\/h3>\n\n\n<p><strong>Basic example<\/strong> &#8211; A simple usage of the &#8216;GDC_column&#8217; shortcode to create a grid column of unspecified size.<\/p>\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">[GDC_column size=1 \/]<\/code><\/pre>\n\n\n<p><strong>Advanced examples<\/strong><\/p>\n<p>Creating a grid column with a specified size using the &#8216;size&#8217; attribute. The size attribute determines the width of the column.<\/p>\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">[GDC_column size=3 \/]<\/code><\/pre>\n\n\n<p>Creating multiple grid columns with different sizes. This example creates three columns with sizes 2, 3, and 4 respectively.<\/p>\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">[GDC_column size=2 \/]\n[GDC_column size=3 \/]\n[GDC_column size=4 \/]<\/code><\/pre>\n\n\n<p>Embedding content within a grid column. This example creates a column of size 3 and embeds a paragraph of text within it.<\/p>\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">[GDC_column size=3]This is some content within a grid column.[\/GDC_column]<\/code><\/pre>\n\n\n\n<div style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">PHP Function Code<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">In case you have difficulties debugging what causing issues with <code>[GDC_column]<\/code> shortcode, check below the related PHP functions code.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Shortcode line<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">add_shortcode( 'GDC_column', 'gsc_column_sc' );<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Shortcode PHP function<\/strong>:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: php; light: false; title: ; toolbar: true; notranslate\" title=\"\">\nfunction gsc_column_sc( $atts, $content = null ) {\n\n    extract( shortcode_atts( array(\n        &#039;size&#039; =&gt; &#039;&#039;,\n    ), $atts ) );\n    \n    $content = &#039;&lt;div class=&quot;gdc_column gdc_c&#039;.$size.&#039;&quot;&gt;&lt;div class=&quot;gdc_inner&quot;&gt;&#039;.$content.&#039;&lt;\/div&gt;&lt;\/div&gt;&#039;;\n\n    return do_shortcode($content);\n\n}\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\"><strong>Code file location<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">grid-shortcodes\/grid-shortcodes\/gsc.php<\/code><\/pre>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Now that you&#8217;ve learned how to embed the <strong>Grid Shortcodes Plugin shortcodes<\/strong>, understood the parameters, and seen code examples, it&#8217;s easy to use and debug any issue that might cause it to &#8216;not work&#8217;. If you still have difficulties with it, don&#8217;t hesitate to leave a comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Below, you&#8217;ll find a detailed guide on how to add the Grid Shortcodes Shortcodes to your WordPress website, including their parameters, examples, and PHP function code. Additionally, we&#8217;ll assist you with common issues that might cause the Grid Shortcodes Plugin shortcodes not to show or not to work correctly. Before starting, here is an overview [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"name":"Grid Shortcodes","slug":"","version":"1.1","author":"<a href=\"https:\/\/wpdarko.com\">WP Darko<\/a>","icons":"https:\/\/ps.w.org\/grid-shortcodes\/assets\/icon-128x128.png?rev=1178716","plugin_tags":"{\"columns\":\"columns\",\"grid\":\"grid\",\"rows\":\"rows\",\"shortcode\":\"shortcode\",\"shortcodes\":\"shortcodes\"}","author_profile":"https:\/\/profiles.wordpress.org\/spwebguy\/","requires":"3.6","tested":"6.3.2","requires_php":"false","rating":100,"num_ratings":10,"active_installs":2000,"downloaded":17935,"last_updated":"2023-08-28 8:12pm GMT","added":"2015-06-11","homepage":"https:\/\/wpdarko.com\/support\/get-started-with-the-grid-shortcodes-plugin\/","short_description":"A responsive and easy-to-use tool for dividing your content in your posts\/pages. This ultra-lightweight plugin allows you to put your content in colum &hellip;","description":"\"Grid Shortcodes is a handy WordPress plugin that lets users incorporate stylish and responsive grid layouts in their posts and pages with simple shortcodes. Ideal for organized presentation.\"","shortcodes":"[null,\"GDC_column\"]","footnotes":""},"categories":[1],"tags":[],"class_list":["post-2276","post","type-post","status-publish","format-standard","hentry","category-plugins"],"_links":{"self":[{"href":"https:\/\/wpshortcode.org\/wp-json\/wp\/v2\/posts\/2276","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpshortcode.org\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpshortcode.org\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpshortcode.org\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpshortcode.org\/wp-json\/wp\/v2\/comments?post=2276"}],"version-history":[{"count":1,"href":"https:\/\/wpshortcode.org\/wp-json\/wp\/v2\/posts\/2276\/revisions"}],"predecessor-version":[{"id":2798,"href":"https:\/\/wpshortcode.org\/wp-json\/wp\/v2\/posts\/2276\/revisions\/2798"}],"wp:attachment":[{"href":"https:\/\/wpshortcode.org\/wp-json\/wp\/v2\/media?parent=2276"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpshortcode.org\/wp-json\/wp\/v2\/categories?post=2276"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpshortcode.org\/wp-json\/wp\/v2\/tags?post=2276"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}