HTML to Shortcode GeneratorbyAvaib.com

Generate a WordPress Shortcode with basic HTML/CSS knowledge only – No PHP knowledge required!

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 / CSS and absolutely NOTHING ELSE!

For example, you like a ‘photo gallery’ and this gallery is only available in HTML/CSS but you want to add this to your WordPress site and you want the admin of your site to change contents (add/delete photos, titles, etc.) of this gallery through wp-admin. Using this plugin, you can easily do this – generate a shortcode without using PHP/mySQL and then this shortcode you have generated can be used by the wp-admin to add/delete/update items in the gallery.

This plugin also has a Pro Version with following Advance Features

• Create Unlimited Modules.
• PHP Code Support
• Extra advance fields.
• Ability to include external resource

Practical Example

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.

Existing HTML:

body{font-family: ‘Open Sans’, sans-serif;}
#faqs h3 {cursor: pointer;font-size: 16px;font-weight: 400; margin-bottom: 0px; color: #333;}
#faqs h3.active { color:#d74646; }
#faqs div { height:0; overflow:hidden; position:relative; }
#faqs div p { padding:0; margin-bottom:15px; font-size: 14px; padding-left: 12px; }
.heading span { padding: 8px 20px 8px 10px; display: inline-block; background: #f9f9f9;}
.heading .fa{margin-right: 9px; color: rgba(193,103,103,0.6);}
.heading .fa:before {content: “\f0fe”;}
.active .fa:before {content: “\f146” !important;}

            
            


    

                
What is lorem ipsum?
                

                    
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
                
                 

    
What is lorem ipsum?
                

                    
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
                
                 


                
What is lorem ipsum?
                

                    
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
                
                 


                
What is lorem ipsum?
                

                    
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
                
                 


                
What is lorem ipsum?
                

                    
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
                
                 

                


Breif detail of above HTML
This 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. 

Top HTML:


            
            
            
            


    



Repeating Part:
We will only take the repeating pattern. Below is the repeating part!


    
What is lorem ipsum?
                

                    
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
                
                 

Bottom HTML: