[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$fSxo5C0-YV70lHp4Fvk0ZwIwaSwdoj-cID487Yk3KIeU":3},{"slug":4,"display_name":4,"profile_url":5,"plugin_count":6,"total_installs":7,"avg_security_score":8,"avg_patch_time_days":9,"trust_score":10,"computed_at":11,"plugins":12},"webmediatree5","https:\u002F\u002Fprofiles.wordpress.org\u002Fwebmediatree5\u002F",1,20,85,30,84,"2026-05-20T00:14:42.944Z",[13],{"slug":14,"name":15,"version":16,"author":4,"author_profile":5,"description":17,"short_description":18,"active_installs":7,"downloaded":19,"rating":20,"num_ratings":20,"last_updated":21,"tested_up_to":22,"requires_at_least":23,"requires_php":24,"tags":25,"homepage":30,"download_link":31,"security_score":8,"vuln_count":20,"unpatched_count":20,"last_vuln_date":32,"fetched_at":33},"html-to-shortcode-generator","HTML to Shortcode Generator","1.0","\u003Cp>Generate a WordPress Shortcode with basic HTML\u002FCSS knowledge only – No PHP knowledge required!\u003C\u002Fp>\n\u003Cp>Install this plugin in your WordPress website and use a simple form to generate shortcode that a non-technical person can easily use. The only things you need are knowledge of basic Wordress & HTML \u002F CSS and absolutely NOTHING ELSE!\u003C\u002Fp>\n\u003Cp>For example, you like a ‘photo gallery’ and this gallery is only available in HTML\u002FCSS but you want to add this to your WordPress site and you want the admin of your site to change contents (add\u002Fdelete photos, titles, etc.) of this gallery through wp-admin. Using this plugin, you can easily do this – generate a shortcode without using PHP\u002FmySQL and then this shortcode you have generated can be used by the wp-admin to add\u002Fdelete\u002Fupdate items in the gallery.\u003C\u002Fp>\n\u003Cp>This plugin also has a \u003Ca href='http:\u002F\u002Fcodecanyon.net\u002Fitem\u002Fplugin-composer-for-wordpress\u002F15913717?ref=webmediatree' rel=\"nofollow ugc\">Pro Version\u003C\u002Fa> with following Advance Features\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Create Unlimited Modules.\u003C\u002Fli>\n\u003Cli>PHP Code Support\u003C\u002Fli>\n\u003Cli>Extra advance fields.\u003C\u002Fli>\n\u003Cli>Ability to include external resource\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3>Practical Example\u003C\u002Fh3>\n\u003Cp>In this example we will show you how you will convert existing HTML code into wordpress shortcode which you can place anywhere in the wordpress to display your HTML.\u003C\u002Fp>\n\u003Cp>Existing HTML:\u003C\u002Fp>\n\u003Cp>                    body{font-family: ‘Open Sans’, sans-serif;}\u003Cbr \u002F>\n                    #faqs h3 {cursor: pointer;font-size: 16px;font-weight: 400; margin-bottom: 0px; color: #333;}\u003Cbr \u002F>\n                    #faqs h3.active { color:#d74646; }\u003Cbr \u002F>\n                    #faqs div { height:0; overflow:hidden; position:relative; }\u003Cbr \u002F>\n                    #faqs div p { padding:0; margin-bottom:15px; font-size: 14px; padding-left: 12px; }\u003Cbr \u002F>\n                    .heading span { padding: 8px 20px 8px 10px; display: inline-block; background: #f9f9f9;}\u003Cbr \u002F>\n                    .heading .fa{margin-right: 9px; color: rgba(193,103,103,0.6);}\u003Cbr \u002F>\n                    .heading .fa:before {content: “\\f0fe”;}\u003Cbr \u002F>\n                    .active .fa:before {content: “\\f146” !important;}\u003C\u002Fp>\n\u003Cpre>\u003Ccode>            \u003C\u002Fstyle>\n            \u003Cscript>\n                $(document).ready(function () {\n                    $('#faqs h3').each(function () {\n                        var tis = $(this), state = false, answer = tis.next('div').hide().css('height', 'auto').slideUp();\n                        tis.click(function () {\n                            state = !state;\n                            answer.slideToggle(state);\n                            tis.toggleClass('active', state);\n                        });\n                    });\n                });\n            \u003C\u002Fscript>\n\n\n    \u003Cdiv id=\"faqs\">\n                \u003Ch3 class=\"heading\">\u003Cspan>\u003Ci class=\"fa\">\u003C\u002Fi>What is lorem ipsum?\u003C\u002Fspan>\u003C\u002Fh3>\n                \u003Cdiv style=\"display: none; height: auto;\">\n                    \u003Cp>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap in\u003C\u002Fp>\n                \u003C\u002Fdiv>\n                \u003C!-- \u002F Cell --> \n\n    \u003Ch3 class=\"heading\">\u003Cspan>\u003Ci class=\"fa\">\u003C\u002Fi>What is lorem ipsum?\u003C\u002Fspan>\u003C\u002Fh3>\n                \u003Cdiv style=\"display: none; height: auto;\">\n                    \u003Cp>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap in\u003C\u002Fp>\n                \u003C\u002Fdiv>\n                \u003C!-- \u002F Cell --> \n\n\n                \u003Ch3 class=\"heading\">\u003Cspan>\u003Ci class=\"fa\">\u003C\u002Fi>What is lorem ipsum?\u003C\u002Fspan>\u003C\u002Fh3>\n                \u003Cdiv style=\"display: none; height: auto;\">\n                    \u003Cp>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap in\u003C\u002Fp>\n                \u003C\u002Fdiv>\n                \u003C!-- \u002F Cell --> \n\n\n                \u003Ch3 class=\"heading\">\u003Cspan>\u003Ci class=\"fa\">\u003C\u002Fi>What is lorem ipsum?\u003C\u002Fspan>\u003C\u002Fh3>\n                \u003Cdiv style=\"display: none; height: auto;\">\n                    \u003Cp>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap in\u003C\u002Fp>\n                \u003C\u002Fdiv>\n                \u003C!-- \u002F Cell --> \n\n\n                \u003Ch3 class=\"heading\">\u003Cspan>\u003Ci class=\"fa\">\u003C\u002Fi>What is lorem ipsum?\u003C\u002Fspan>\u003C\u002Fh3>\n                \u003Cdiv style=\"display: none; height: auto;\">\n                    \u003Cp>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap in\u003C\u002Fp>\n                \u003C\u002Fdiv>\n                \u003C!-- \u002F Cell --> \n\n                \u003C\u002Fdiv>\n\n\nBreif detail of above HTML\nThis is HTML for FAQs. In this HTML you can see that this snippet contain External CSS resource, fonts and script and also contain inline css and javascript code. If you further review the html code you will see that there is a div whose id is 'faqs' and this div contain list of Faqs, and you can also see the pattern in the list, which is each FAQ consist of a h3 and a div with paragraph tag, so here we can divide this html code in three parts. One is Repeating pattern part, one is TOP HTML before the pattern and one is Bottom HTML after the pattern. \n\nTop HTML:\n\n\u003Clink rel=\"stylesheet\" href=\"https:\u002F\u002Fmaxcdn.bootstrapcdn.com\u002Ffont-awesome\u002F4.6.1\u002Fcss\u002Ffont-awesome.min.css\">\n            \u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss?family=Open+Sans:400,300,600\" rel=\"stylesheet\" type=\"text\u002Fcss\">\n            \u003Cscript src=\"https:\u002F\u002Fajax.googleapis.com\u002Fajax\u002Flibs\u002Fjquery\u002F1.12.2\u002Fjquery.min.js\">\u003C\u002Fscript>\n            \u003Cstyle>\n                body{font-family: 'Open Sans', sans-serif;}\n                #faqs h3 {cursor: pointer;font-size: 16px;font-weight: 400; margin-bottom: 0px; color: #333;}\n                #faqs h3.active { color:#d74646; }\n                #faqs div { height:0; overflow:hidden; position:relative; }\n                #faqs div p { padding:0; margin-bottom:15px; font-size: 14px; padding-left: 12px; }\n                .heading span { padding: 8px 20px 8px 10px; display: inline-block; background: #f9f9f9;}\n                .heading .fa{margin-right: 9px; color: rgba(193,103,103,0.6);}\n                .heading .fa:before {content: \"\\f0fe\";}\n                .active .fa:before {content: \"\\f146\" !important;}\n\n            \u003C\u002Fstyle>\n            \u003Cscript>\n                $(document).ready(function () {\n                    $('#faqs h3').each(function () {\n                        var tis = $(this), state = false, answer = tis.next('div').hide().css('height', 'auto').slideUp();\n                        tis.click(function () {\n                            state = !state;\n                            answer.slideToggle(state);\n                            tis.toggleClass('active', state);\n                        });\n                    });\n                });\n            \u003C\u002Fscript>\n\n\n    \u003Cdiv id=\"faqs\">\n\n\nRepeating Part:\nWe will only take the repeating pattern. Below is the repeating part!\n\n\n    \u003Ch3 class=\"heading\">\u003Cspan>\u003Ci class=\"fa\">\u003C\u002Fi>What is lorem ipsum?\u003C\u002Fspan>\u003C\u002Fh3>\n                \u003Cdiv style=\"display: none; height: auto;\">\n                    \u003Cp>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap in\u003C\u002Fp>\n                \u003C\u002Fdiv>\n                \u003C!-- \u002F Cell --> \n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Bottom HTML:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>\u003C\u002Fdiv>\n\n\n\nIntegrate into Plugin.\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Now we know the before part, repeating part and after part! We will now integrate it into our plugin\u003Cbr \u002F>\nInstall the plugin and Click on HTML Shortcode Generator link on left navigation menu. Click on the first entry in the list. Now Place the Top HTML part in Top HTML Field, Bottom HTML part in Bottom HTML Field and Repeating HTMl part in Reapting HTML Field.\u003Cbr \u002F>\nRepeating HTML will need some changes in the code as explained below\u003Cbr \u002F>\nWe will need to replace the dynamic section of repeating HTML into the fields, in our current example there are two dynamic section, one is question and second is Answer, question is text field whereas answer is textarea field. so we will add text and text area field. After placing the Repeating HTML in the Repeating HTML field, Delete the Question “What is lorem ipsum?” and click on Editable Text Field button Provide the label “Question” in the prompt, this label will be use when adding the items, which is described later below, After that Delete the answer part with in the paragraph, and click on Editable Description Provide the label of this field “Answer” and click Ok. Now the repeating HTML section should be like this:\u003C\u002Fp>\n\u003Ch3>#–txt–Question–#\u003C\u002Fh3>\n\u003Cpre>\u003Ccode>                \u003Cdiv style=\"display: none; height: auto;\">\n                    \u003Cp>#--txtarea--Answer--#\u003C\u002Fp>\n                \u003C\u002Fdiv>\n                \u003C!-- \u002F Cell --> \n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Now Click on update button and and after that you will see a checkbox beside the update button click on it and press the update button again. Now you will see a new navigation menu item on the left side named “WP Plugins”.\u003C\u002Fp>\n\u003Cp>Add Items:\u003Cbr \u002F>\nNow we will add question and answers which we want to display in front end. To do this click WP Plugins Link on the left side and click Add New button. Now you will see a form with Title field and Two dynamic fields which you have added in the plugin composing part! Fill out these fields and click Publish. Repeat this step to add as many question and answers as you want.\u003C\u002Fp>\n\u003Cp>Display in front end.\u003C\u002Fp>\n\u003Cp>Now Again go to the plugin composing form and copy the shortcode displayed under the Implementation heading. and place this shortcode anywhere you want to display it.\u003C\u002Fp>\n\u003Cp>Open the page on which you have place the shortcode and you will see a nice Faq list.\u003C\u002Fp>\n","Generate a WordPress Shortcode with HTML\u002FCSS knowledge only! Install this plugin in your WordPress website and use a simple form to generate a shortco …",3595,0,"2016-06-30T10:40:00.000Z","4.5.33","3.0.1","",[26,27,28,29,14],"custom-plugin-builder","custom-plugin-creator","custom-plugin-maker","custom-wordpress-plugin-builder","http:\u002F\u002Fwww.avaib.com","https:\u002F\u002Fdownloads.wordpress.org\u002Fplugin\u002Fhtml-to-shortcode-generator.zip",null,"2026-04-16T10:56:18.058Z"]