<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>WP Engineer &#187; HTML5</title>
	<atom:link href="http://wpengineer.com/tag/html5/feed/" rel="self" type="application/rss+xml" />
	<link>http://wpengineer.com</link>
	<description>WordPress News, Hacks, Tips, Tutorials, Plugins and Themes</description>
	<lastBuildDate>Mon, 21 May 2012 22:48:48 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Replace p-Tag on Images in Content of WordPress</title>
		<link>http://wpengineer.com/2264/replace-p-tag-on-images-in-content-of-wordpress/</link>
		<comments>http://wpengineer.com/2264/replace-p-tag-on-images-in-content-of-wordpress/#comments</comments>
		<pubDate>Tue, 08 Nov 2011 10:14:13 +0000</pubDate>
		<dc:creator>Frank</dc:creator>
				<category><![CDATA[WordPress Hacks]]></category>
		<category><![CDATA[Code]]></category>
		<category><![CDATA[HTML5]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[WordPress]]></category>
		<category><![CDATA[WP]]></category>

		<guid isPermaLink="false">http://wpengineer.com/?p=2264</guid>
		<description><![CDATA[Personally I think the use of HTML5 makes sense and I like the new possibilities, also in the field of semantics. WordPress has a feature on delivering content that come from the editor &#8211; setting breaks and paragraphs. Since forever WordPress is the reason for that, not TinyMCE and the same applies to the integration [...]]]></description>
			<content:encoded><![CDATA[<p>Personally I think the use of HTML5 makes sense and I like the new possibilities, also in the field of semantics. WordPress has a feature on delivering content that come from the editor &#8211; setting breaks and paragraphs. Since forever WordPress is the reason for that, not TinyMCE and the same applies to the integration of images or other elements of this kind. In order to use HTML5 in a perfect way I had to replace the p-Tag with the <a href="http://dev.w3.org/html5/markup/figure.html" title="figure with optional caption">figure</a>-Tag and so is this small filter was created.<br />
<span id="more-2264"></span></p>
<p>An alternative when inserting the image into the editor is the filter <code>image_send_to_editor</code>, which makes adjustments in many ways, but the p-Tag is not involved, since this is set when serving - <a href="http://codex.wordpress.org/Function_Reference/wpautop" title="wpautop function in codex"> <code>wpautop()</code></a>.</p>
<p>I'm not particularly gifted in regex expressions and would be happy if you are providing some improvements and ideas to the solution, since this type is used frequently and the use of HTML5 is progressing. Maybe <a href="http://blog.fublo.net/2011/05/wordpress-p-tag-removal/">this solution</a> from James is an great part. To what extent WordPress is respondeding is currently not clear at this point and I also couldn't see a filter, so a regex wouldn't be necessary at this place. In this context, there are some issues that require a revision of the WordPress Editor to use the editor in a clean way with HTML5. The <a href="http://code.google.com/p/wp-basis-theme/source/browse/trunk/basis-html5/functions.php" title="die functions.php des HTML5 Basis Theme">Basic Theme I have in HTML5 Version</a> version already incorporated some things.</p>
<pre>
// unautop for images
function fb_unautop_4_img( $content ) {

    $content = preg_replace(
        &#039;/&lt;p&gt;\\s*?(&lt;a rel=\&quot;attachment.*?&gt;&lt;img.*?&gt;&lt;\\/a&gt;|&lt;img.*?&gt;)?\\s*&lt;\\/p&gt;/s&#039;,
        &#039;&lt;figure&gt;$1&lt;/figure&gt;&#039;,
        $content
    );

    return $content;
}
add_filter( &#039;the_content&#039;, &#039;fb_unautop_4_img&#039;, 99 );
</pre>
<hr /><a href="http://wpplugins.com/plugin/281/snippets" title="More informations about this plugin for WordPress"><img src="http://wpengineer.com/wp-content/themes/wpe-3/images/snippets-125-125.png" height="90" alt="WordPress Snippet Plugin" /></a> <a href="http://xtreme-theme.com"><img src="http://wpengineer.com/wp-content/uploads/feed-banner-2.jpg" alt="Xtreme One WordPress Framework"/></a><br />
&copy; <a href="http://wpengineer.com/">WP Engineer Team</a>, All rights reserved <small>(Digital Fingerprint: WPEngineer-be0254ce2b4972feb4b9cb72034a092d)</small></p>
]]></content:encoded>
			<wfw:commentRss>http://wpengineer.com/2264/replace-p-tag-on-images-in-content-of-wordpress/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>WordPress Basis Theme &#8211; Also In HTML5</title>
		<link>http://wpengineer.com/1564/wordpress-basis-theme-html5/</link>
		<comments>http://wpengineer.com/1564/wordpress-basis-theme-html5/#comments</comments>
		<pubDate>Thu, 30 Jul 2009 08:26:44 +0000</pubDate>
		<dc:creator>Frank</dc:creator>
				<category><![CDATA[WordPress Themes]]></category>
		<category><![CDATA[HTML5]]></category>
		<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://wpengineer.com/?p=1564</guid>
		<description><![CDATA[Since I deal with WordPress (version 0.71), I have my own theme layout created, which I always use to start with a new theme - WP Basis. I published this theme under GPL since then and it is quite popular. I have continued the development on the theme and it has grown with every version [...]]]></description>
			<content:encoded><![CDATA[<p>Since I deal with WordPress (version 0.71), I have my own theme layout created, which I always use to start with a new theme - <a href="http://wpbasis.de/readme-en_US.html">WP Basis</a>.<br />
I published this theme under GPL since then and it is quite popular. I have continued the development on the theme and it has grown with every version of WordPress up to 2.8.2. To better handle these changes, I put the theme in the <a href="http://code.google.com/p/wp-basis-theme/">SVN of Google Code</a> and were able to profit of the cooperation of <a href="http://andreas-isaak.de/">Andreas</a>and <a href="http://ocean90.de/">Dominik</a> - many thanks to them!</p>
<p>The theme is also backward compatible, tested up to version 1.5 of WordPress. </p>
<p><a href="http://wpbasis.de/">Download the theme here</a></p>
<ul>
<li><a href="http://wpbasis.de/">Projektsite</a></li>
<li><a href="http://code.google.com/p/wp-basis-theme/">SVN Repository mit Diskussionsplattform</a></li>
</ul>
<p>FYI, the theme is <strong>not a Framework</strong>, it is a simple theme, which contains the foundation of a theme only and also a variety of little features from my experience with WordPress. It really means that you have a theme for your clients or yourself created, adapted to the requirements. It doesn't contain any unnecessary markup, as you have with most Frameworks. It will remain as it is now, no Child-Themes or something similar, no hooks for comfortable implementing of code. I like this kind of work, lean and fast, direct to the point. That's why I'm not a big fan of Frameworks in WordPress, but that does not mean that other developers should do the same!</p>
<p>If you like this kind of work and you always write your own theme, then Basis Theme might be something for you. By the management in the SVN you are also have the opportunity to <a href="http://code.google.com/p/wp-basis-theme/issues/list">report errors and issues</a>. It would be great if you could help to make this theme even better.</p>
<h4>The future</h4>
<p>I began to build the Basic Theme in HTML5, so that WordPress can work with it. I also added an example stylesheet, so there is a design available.</p>
<p>In addition, there is a small stylesheet, which displays the new fields and their tags, a good start in HTML5 to have it more visual. The stylesheet is not included in the code but can be added via the web developer toolbar. You can find the stylesheet in the structure under <code>layout/html5areas/html5areas.css</code>. A post with this stylesheet looks like that:</p>
<p><img src="http://wpengineer.com/wp-content/uploads/html5areas.png" alt="html5areas" title="html5areas" width="450" height="497" class="aligncenter size-full wp-image-1569" /></p>
<p>Several parts are currently only in Opera > 9.5 visible. These include all the contents of the comment form.</p>
<p><img src="http://wpengineer.com/wp-content/uploads/form-opera.png" alt="form-opera" title="form-opera" width="450" height="303" class="aligncenter size-full wp-image-1567" /></p>
<h4>Work with ...</h4>
<p>As a reference I use the summary of w3c and the blog about HTML5. Unfortunately, validating is not so easy, because I don't know any validator which can validate locally. If you know one, please let me know. For IE, I added a script, which teaches IE to deal with various elements.</p>
<ul>
<li><a href="http://dev.w3.org/html5/spec/Overview.html">HTML 5</a></li>
<li><a href="http://html5doctor.com/">html5doctor</a></li>
<li><a href="http://html5.validator.nu/">HTML5 Validator</a></li>
<li><a href="http://remysharp.com/2009/01/07/html5-enabling-script/">HTML5 enabling script</a></li>
</ul>
<h4>Why all this?</h4>
<p>It would be great if one or another can look at it, maybe people who have a profound knowledge of HTML5. Feedback would be great and perhaps one or other might expand the theme with specific tags or elements.</p>
<h4>How do I get it?</h4>
<p>There is no download link and as of now there are only a few guidelines but it should become the same as WP Base Theme. To become acquainted with the theme or just look over it, you can check it out in the <a href="http://code.google.com/p/wp-basis-theme/source/browse/#svn/tags/html5">repository</a>. There you are able to comment and discuss.</p>
<p>The folder with all contents can be found in <a href="http://code.google.com/p/wp-basis-theme/source/browse/#svn/trunk/basis-html5">trunk/basis-html5</a> of the <a href="http://code.google.com/p/wp-basis-theme/source/browse/#svn">SVN</a>.</p>
<hr /><a href="http://wpplugins.com/plugin/281/snippets" title="More informations about this plugin for WordPress"><img src="http://wpengineer.com/wp-content/themes/wpe-3/images/snippets-125-125.png" height="90" alt="WordPress Snippet Plugin" /></a> <a href="http://xtreme-theme.com"><img src="http://wpengineer.com/wp-content/uploads/feed-banner-2.jpg" alt="Xtreme One WordPress Framework"/></a><br />
&copy; <a href="http://wpengineer.com/">WP Engineer Team</a>, All rights reserved <small>(Digital Fingerprint: WPEngineer-be0254ce2b4972feb4b9cb72034a092d)</small></p>
]]></content:encoded>
			<wfw:commentRss>http://wpengineer.com/1564/wordpress-basis-theme-html5/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
	</channel>
</rss>

