You are here: Home / Wordpress Plugins / Pure HTML

Pure HTML

Pure HTML is a WordPress plugin that allows you to add html markup, such as the code to embed Google maps, that is normally stripped out and removed by visual mode in the page/post editor.

It also comes with the ability to save code snippets for use on multiple pages without needing to update all pages when making a change to that particular snippet.

Usage

Using pure HTML is simple; either place your html inside the pure HTML shortcode or save your html as a snippet and call it using the ID attribute inside the shortcode tag, e.g. [pureHTML id=1]

When inserting your html directly into the page using the pure html shortcode you will need to change ALL < and >’s to [ and ] respectively. These prevent WordPress removing them when the view is changed to visual mode. These square brackets are then changed back at run time.

At run time ALL square brackets are converted to their < > counter parts so to add in a square bracket that isn’t to be converted you need to ‘escape’ it using a \ so it will be \].

Saved Snippets

Using saved snippets is simple, on the Pure HTML Snippets page you can see a list of the snippets you have saved. On this screen you can add, modify and remove snippets.

There is no limit to the number of snippets you can save except for the maximum size of your database! To add a new snippet simply enter a name for it in the name field, this name is used to find and identify it easily, this could be a description of the snippet or just a name, however there is a character limit of 100 characters. Next, add your HTML to the text box, this HTML does NOT use the square bracket replacement system that the inline html does. Once saved the snippet will be shown at the top of the page with an ID. It is this ID that you place into the shortcode to use that snippet. For example: [pureHTML id=1] will use the snippet ID 1.

Installation

Installation is Quick, just upload the 2 PHP files to a PureHtml folder within wp-content/plugins and then activate the plugin through the admin dashboard, or find the plugin using the WordPress plugin search and click install

FAQ

Q. What Tags Are Automatically Removed?
Currently all <br /> and <p> (and its closing counterpart) tags are removed from the input code because these are the tags that WordPress automatically add.

Q. How Do I Add Tags Without Them Being Stripped?

If you want to echo a paragraph tag or a line break, or any other tag (strong, em etc) instead of enclosing them in < and > tags, enclose them in [ ] brackets for example [p] instead of <p> The square brackets are converted after the inital tags are stripped and function as normal tags.

Q. How Do I Include a [ or ] In My Output Without It Being Removed

To prevent [ or ] being changed to the < or > (respectively) you will need to ‘escape’ it using a \, so ] will become \] and [ will become \[.

Q. What Happens To The Output If I Delete The Snippet It Uses?

If you delete a snippet that is being used in a page then the output generates a 404 error that displays in its place.

Comments

  1. In your example, you include a space after the open bracket and before the close bracket. Doing this doesn’t work: [ pureHTML id=1 ]
    You must take out these spaces! [pureHTML id=1]

    • Hi Ron,

      Thank you for your comment. We include the space before and after to stop the plugin from effecting that particular item, because we have the plugin installed to this site, if we put the spaces in so that the shortcode doesn’t execute and display the 404 message.

      Thanks,
      Jamie

  2. Hi, I need the script beneath on my WordPress site. I’ve tried with [js] and with purehtml with don’t get it running. It display nothing.
    In the purehtml snippet I’ve included and in the sourcecode I only wrote
    [pureHTML id=1], but it doesn’t work. Apparently I don’t understand how it works…
    ==========

    // You can change the values of object “bmi”
    var bmi = {
    color : ["#ffffff","#ccc"], // bg,border
    font : “Tahoma, Verdana, Arial, Helvetica, sans-serif”,
    measure : 0, // 0=metric system / 1=american system (feets, inches & pounds)
    decimal : “.”, // “,” or “.”
    bigfields : 1, // show big fields?
    size : {
    range : [150,220,10,175], // min,max,step,start
    textcolor : ["#222222","#222222","#666666"], // text,small,slider
    slidercolor : ["#52C703","#307802","#307802","#307802","#52C703","#307802","#307802","#ffcccc","#ff6666"], // slider,btn,btnborder,moveslider,movebtn,movebtnborder,outrangeslider,outrangebtn,outrangebtnborder
    text : ["Lengte","Lengte in cm"], // short,long
    field : ["#333333","#fff","#666666","#000000","#ffffff","#222222"], // color,bgcolor,bordercolor,movecolor,movebgcolor,movebordercolor
    bigfield : ["#6666","#fff","#000000","#666666","#cccccc","#888888"] // color,bgcolor,bordercolor,movecolor,movebgcolor,movebordercolor
    },
    weight : {
    range : [50,140,10,75], // min,max,step,start
    textcolor : ["#222222","#222222","#666666"], // text,small,slider
    slidercolor : ["#52C703","#307802","#307802","#307802","#52C703","#307802","#307802","#ffcccc","#ff6666"], // slider,btn,btnborder,moveslider,movebtn,movebtnborder,outrangeslider,outrangebtn,outrangebtnborder
    text : ["Gewicht","Gewicht in kg"], // short,long
    field : ["#333333","#fff","#666666","#000000","#ffffff","#222222"], // color,bgcolor,bordercolor,movecolor,movebgcolor,movebordercolor
    bigfield : ["#6666","#fff","#000000","#666666","#cccccc","#888888"] // color,bgcolor,bordercolor,movecolor,movebgcolor,movebordercolor
    },
    bmi : {
    range : [18,40,2,22], // min,max,step,start ()
    textcolor : ["#222222","#222222","#666666"], // text,small,slider
    slidercolor : ["#52C703","#307802","#307802","#307802","#52C703","#307802","#307802","#ffcccc","#ff6666"], // slider,btn,btnborder,moveslider,movebtn,movebtnborder,outrangeslider,outrangebtn,outrangebtnborder
    text : ["BMI","Body Mass Index"], // short,long
    field : ["#333333","#eeeeee","#666666","#000000","#ffffff","#222222"], // color,bgcolor,bordercolor,movecolor,movebgcolor,movebordercolor
    bigfield : ["#6666","#eee","#000000","#666666","#cccccc","#888888"] // color,bgcolor,bordercolor,movecolor,movebgcolor,movebordercolor
    }
    };

    • Hi Jos,

      if you are using the purehtml snippets to output javascript you still need to include script tags before and after the code and you do not need to use tag replacement.

      the shortcode for purehtml works as [purehtml id=#] also,

      Please try adding in the script tags etc and then let me know the results.

      Thanks
      Jamie

  3. I am trying to save a snippet and it is giving me this message every time:

    Parse error: syntax error, unexpected ‘{‘ in /var/www/wp-content/plugins/pure-html/alter.php on line 21

    I’m really a beginner so I have no idea what this means.

  4. I am trying to embed a Keepandshare folder according to the script here.


  5. Thank you so much!!!! It works!!!!

  6. Dear Jamie,

    Looks like a great plugin you have here. But sadly, I’m stumped. I pasted the script below as snippet id 2, and called on that in a page with [pureHTML id=2]. When I load the page, I can see Firefox “Connecting to” and Trasferring data from”the remote site where the Javascript is hosted. But, as I can see in Firebug, all that gets printed to the page are a couple of paragraph tags, not a long list of birds.

    If I paste the javascript in a local HTML page, the list comes up.

    I’m running WP 3.2.1

    Any thoughts??

    /* table and font formats */
    /* tablewidth: width of table in pixels; default = 800 */
    /* bgcolor: background color of table; default = #FFFFFF */
    /* fontcolor: font color; default = #000000 */
    /* font: font used; default = Arial */
    /* fontsize: font size; default = 12 */

    /* display options; possible values = yes or no */
    /* showstats: whether the region statistics are displayed; default = yes */
    /* showenglish: whether english names are displayed; default = yes */
    /* showfamily: whether family names are displayed; default = yes */
    /* showstatus: whether species status are displayed; default = yes */

    var tablewidth = 600;
    var bgcolor = “#FFFFF”;
    var fontcolor = “#00000″;
    var font = “Arial”;
    var fontsize = 11;

    var showstats = “no”;
    var showenglish = “yes”;
    var showfamily = “yes”;
    var showstatus = “no”;

    printlist();

  7. Whoops! The comment box stripped my script…

    Here’s another try. I’ve replaced LT and GT brackets with square brackets in this comment. In my pureHTML snippet, they remain unchanged.

    [script type="text/javascript" src="http://www.bsc-eoc.org/avibase/webservice.jsp?login=djuna&key=06B512085C270DAD&lang=EN&synlang=&list=clements"]
    [/script]

    [script]
    /* table and font formats */
    /* tablewidth: width of table in pixels; default = 800 */
    /* bgcolor: background color of table; default = #FFFFFF */
    /* fontcolor: font color; default = #000000 */
    /* font: font used; default = Arial */
    /* fontsize: font size; default = 12 */

    /* display options; possible values = yes or no */
    /* showstats: whether the region statistics are displayed; default = yes */
    /* showenglish: whether english names are displayed; default = yes */
    /* showfamily: whether family names are displayed; default = yes */
    /* showstatus: whether species status are displayed; default = yes */

    var tablewidth = 600;
    var bgcolor = “#FFFFF”;
    var fontcolor = “#00000″;
    var font = “Arial”;
    var fontsize = 11;

    var showstats = “no”;
    var showenglish = “yes”;
    var showfamily = “yes”;
    var showstatus = “no”;

    printlist();

    [/script]

  8. I’ll give this approach a whirl… http://www.internetlifestyle.ca/internet/wordpress/how-to-embed-iframes-and-javascript/

    You’ll earn a nice rating from me for your responsive support.

    Thanks :)

  9. Amazing plugin but i’m having a error:

    Parse error: syntax error, unexpected

    could you please help me? I’m new to plugins im a total nube.

  10. Florian Harr says:

    Hi there,
    I tried to add new snippets but I always end up with an 404 error that alter.php is not found even that it is there.

    I saw the alter.php code that if some if clause fail it will end up on an 404, but I’m not familiar enough with php to understand everything what is checked there…

    Any idea what’s this about?

  11. I am trying to add this minus some stuff:

    to a wordpress post….

    I have no idea what I am doing.

    I tried using pure html
    and one for java script

    Can you help?

    • Hi Monica,

      It appears that some of your html has been stripped.

      with the purehtml plugin, you should either save the html as a snippet or convert the html to a bbcode format using [ and ] instead of < and >

      Thanks,
      Jamie

  12. Hi Jamie,
    I tried your plugin work perfectly in my gallery page, then when i set my permalink to post name doesn’t work anymore. Is there need change the .htaccess?

    Thanks.

  13. Hi Edward,

    The plugin does not have any link with the permalink structure, so changing the permalink structure should not effect the plugin functionality.

    Thanks,
    Jamie

  14. You’re right, Jamie. Sorry for my mistake, I forget to change location. Thanks for you support. I’m wait you’re future release.

    Thanks.

  15. It doesn’t have a link.
    And the plugin doesn’t work but I keep trying.

  16. John Patterson says:

    Hi – seems like a great plugin but when i try to save snippet I get 403 errors (access forbidden) for alter.php.

    Any ideas what permissions I need to change?

    Thanks John

  17. John Patterson says:

    Thanks for the reply Jamie. I’ve had a look but can’t spot it. The plugins folders and pure-html folders are both 755 while the pure-html files are both 644. Even if change to full permission on everything I get the error.

    I’ve experimented a bit though. It seems if I enter random text then it will let me save a snippet. If I try to paste a snippet from elsewhere e.g.

    etc

    (I’m essentially trying to create a snippet which includes a Google Docs chart)

    Then I get the 403 error. It’s probably me doing it wrong!

    • Hi John,

      It appears that the html in your comment has been stripped out, if you email me your code that you are trying to use, and the version of the plugin you are using, I will be able to look into this further for you :)

      Thanks,
      Jamie

  18. Chris Wilson says:

    i am having trouble understanding the purehtml editor. im trying to encode one, i cant add it to the snippit because its too long so i need help adding the brackets. Can someone help me with this, Thank you in advance

  19. Don’t modify and delete snippets. Error message “One Does Not Simply Walk Into Alter”.

    • Hi MIV

      I have just tested this and it is working correctly,

      The message you are seeing should only be showing if the server variable “http Referer” is not set

      Thanks,
      Jamie

  20. this message (“One Does Not Simply Walk Into Alter”) and delete snippets.

    • Hi MIV,

      Once again,
      if the server variable HTTP_REFERER is not set, then the plugin blocks code execution,
      so you need to either remove those lines from the code, or ensure the HTTP_REFERRER is set during form submission.

      Thanks
      Jamie

  21. It seems like I cannot modify my code snippets. I use the modify button but my changes to the code switch back to the old code. What am I doing wrong?

    Thanks

  22. Hi,
    It seems like I cannot modify my code snippets. I use the modify button but my changes to the code switch back to the old code. What am I doing wrong?
    This is what I do:
    1. Change the code.
    2. Click “Modify”
    3. Confirm that I want to change the code.
    Then the code changes back to what it was before I changed it.

    Thanks

  23. I am using pureHTML and it is working well for most things.

    But I am having problems modifying the code snippets.

    (The same problems as ‘hokan’ in the post above from June 12, 2012 at 1:19 pm )

    Sometimes the change updates the code and sometimes it reverts back to the old code.

    I was able to edit the code directly using MySQL. But it would be good to the the pureHTML editor working. Let me know if there is anything I can do to help out.

  24. I realise it has been quite long since there was any activity here, but I’ll just givet it a try anyway.
    I have the problem that when I try to save [div style="width: 100%"], all my changes are lost. I have tried to trick it in in several ways, but no luck.
    Also, will pureHTML be updated to support wp 3.4.1?

    thanks
    David

    • Hi David,

      Try using single quotes for the style tag and see if that works.

      We will be looking to update this plugin as well as others as soon at we get time :)

      Thanks,
      Jamie

  25. is their a problem with external js files? when I do this
    [ script type="text/javascript" src="http://api.zippyshare.com/api/embed.js" ][ /script ]

    But with correct HTML instead of [ and ] nothing is entered to the page

    • Hi Martin,

      I have tested the script using the code:

      [purehtml]
      [script type="text/javascript" src="http://api.zippyshare.com/api/embed.js"][/script]
      [/purehtml]
      

      It outputted the script correctly, except there is an error with the script file which is why you aren’t seeing the output.

      Thanks
      Jamie

  26. Hi Jamie,
    I’m trying to get some js/html to work with the purehtml plugin. I’m using the snippet feature and it worked for a day, then the next it didn’t.

    I have a js and a images folder in my ftp that the code calls to using:

    I can send you the whole snippet if that helps as well.

    • [script src="scripts/mootools.v1.11.js" type="text/javascript">
      [script src="scripts/jd.gallery.js" type="text/javascript">
      [link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" />

      < instead of [

  27. Hi Jamie,

    I installed PureHTML plugin by downloading the zip file and activating it in our WordPress website. I inputted a Snippet Name and a Snippet Code:

    <!– Place this Script before the closing Tag –>

    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var coverphoto_fanpage = ’20percentTool’; /* ID – Facebook Fanpage-ID */
    var coverphoto_width = 640; /* Pixel – The minimal width is 520px */
    var coverphoto_height = 328; /* Pixel – The minimal height is 300px */

    /* * * DONT EDIT BELOW THIS LINE * * */
    (function () {
    var e = document.createElement(‘script’);
    e.type = ‘text/javascript’; e.async = true;
    e.src = (‘https:’ == document.location.protocol ? ‘https’ : ‘http’) + ‘://paavo.ch/coverphoto/embed/?version=2′;
    e.className = ‘createsend-script’;
    var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(e, s);
    })();

    I then got the Shortcode [purehtml id=2]. I created a page to put the shortcode. My question is that what else should I put in the page aside from [purehtml id=2] to generate what I want to show in our website? I am a newbie to html, div, javascript.

    • Hi Alva,

      Your script should be placed within <script> tags in order for it to work correctly, other than that, I cannot advise you further as I don’t know what script it is your using.

      Thanks,
      Jamie

  28. possible to include into snippets something like:?
    <?php wp_tag_cloud('number=0'); ?>
    Thank you.

    • grant@HitReach says:

      Yeah there should be no problem running that. Just remember you don’t need the php tags around it.

  29. Wanted to say thank you! This issue has been blighting me for ages, for many javascript plugins!

    It took a lot of research to find this, that is to get the term right. I really think this is a massive problem that beginner to intermediate WP users face.

    Works Perfectly. Thanks again.

Add Comment Register



Leave a comment

*


four × = 32

What Our Clients Say

James AgateJames Agate
Managing Director
Skyrocket SEO

Chris and his team are patient, responsive and have a sense of humour even when I asked them to change something that I'd insisted upon initially. Would definitely recommend to anyone looking for an awesome WordPress development and design team.

Richard SedleyRichard Sedley
Director
Seren

Hit Reach were really easy to deal with and provide exemplary service. They implemented exactly what we wanted and guided us when we were uncertain about the solution. A highly professional and cost effective solution – what's not to love.

Roger GreenRoger Green
Director
Best4tyres.com

Hit Reach got it absolutely right. They embraced the challenge and complexity of the site, and exceeded expectation with quick response times and great service.

Our Key Services
Menu