Posts and Pages Tagged ‘wordpress’

WordPress wrapping shortcodes with p tags Last updated:15 June 2011

Been struggling over the last day or so to stop WordPress wrapping p tags around a shortcode. I’m using Arnan de Gans Events plugin on a WordPress site for a client. One of the pages just includes this shortcode:

[events_show]

This shows a list of events. I’ve configured the plugin so each event is in its own div. And it all works fine, except WordPress insists on wrapping the whole thing in a couple of p tags, making the code invalid, producing this:

<p><div class="event>.........</div></p>

Irritating. The WP shortcode API site says “wpautop recognizes shortcode syntax and will attempt not to wrap p or br tags around shortcodes that stand alone on a line by themselves”. Nooooo.

I finally solved this by adding the following to my functions.php file:

function simonbattersby_shortcode_format($content){
$content = preg_replace('/(<p>)\s*(<div)/','<div',$content);
$content =  preg_replace('/(<\/div>)\s*(<\/p>)/', '</div>', $content);
return $content;
}

add_filter('the_content','simonbattersby_shortcode_format',11);

Points to note – the filter needs to be set with priority 11 (or higher) because otherwise the shortcode won’t have produced its output, and it’ll have no effect. All the preg_replace lines are doing is looking for a <p> tag followed by <div>, with any number of whitespaces between them, and replacing with just a <div> tag. Brute force, inelegant, but it works, and I couldn’t find any other way….

Body classes on WordPress pages Last updated:11 November 2010

I spent hours this weekend trying to apply a different body class to a WordPress page. Specifically, I wanted to apply a different class to WordPress pages as opposed to WordPress posts. Why? Because I wanted to be allow comments to be left on a number of pages which were previously outside WordPress, but I wanted the menu, in line with the rest of my site, to display the submenu for either web pages or photo pages, depending on the actual page displayed. My css controls this by using the body class.

Once I’d worked it out it was straightforward, inevitably. First off, I used the “Custom Fields” functionality to define a custom field called bodyclass, then set this to “web” or “photo” as my css requires. Easy so far.

I then amended header.php using WordPress conditional comments to use the bodyclass value for pages, and to use “blog” as standard for posts. The following statement did the trick here:

<body class="
<?php if (is_page()) echo get_post_meta($post->ID, 'bodyclass', true); 
else echo "blog";?>
">

Integrating WordPress into your website Last updated:29 October 2010

In the last couple of weeks I have incorporated WordPress blogs into two sites, applying the existing site style to the WordPress pages.  You’re looking at one of these right now…

I didn’t particularly want to replace all my existing pages with WordPress pages, I just wanted to use the WordPress functionality to power the blog element. Pretty common requirement I’d have thought. I found this article a useful starting point.

So, if you have an existing site with its own css file and you follow this tutorial exactly then you will end up with two similar css files, your original one and one just for WordPress files called style.css. So then you have to make changes in two places…I didn’t want this so additionally amended header.php to point at my “main” css file. The downside of this is that you can’t update your css file through the WordPress admin module, but that wasn’t at all an issue for me.

It’s pretty much guaranteed that this will break the display of at least some of the wordpress pages, as chances are you won’t have entries in your css file corresponding to the html markup that WordPress generates. The same things will happen of course, if you replace the contents of style.css with your own css.

For example, my main site uses #header and #footer as id names, just as WordPress does, so no changes required here, but I used #maintext instead of #content for the main page content. So you can either amend the html so the WordPress files use #maintext, or add #content to your css.

In this case, you can identify #content just by viewing the various .php files – but some classes and ids are directly generated “on the fly” and don’t appear.  I found the easiest way to do this was to view the actual pages using Firebug, and make additions to my css file accordingly.

This isn’t quite as painful as it sounds as WordPress is pretty consistent about the markup.

I’d guess it took a couple of hours in total to do, including actually amending the contents of sidebar.php. Worth it as all my styling sits in one file.

Stop WordPress adding <br/> tags Last updated:29 October 2010

Been swearing at WordPress this afternoon…

I’ve been trying to transfer an html form, which I had working perfectly on a static html page, onto a WordPress page. WordPress insisted on adding multiple <br/> tags where I didn’t want them. Mutter.

Eventually, after much searching, I identified a parameter within wp-includes/formatting.php, which allows you to disable this irritating feature. If you open formatting.php and find the function wpautop you’ll see this:

function wpautop($pee, $br = 1)

Change this to:

function wpautop($pee, $br = 0)

Save the file and publish it back to your server and that’s it. Works fine in WP2.8.

Note: WP 2.8.3 overwrites formatting.php so this change needs redoing.

Update 24 October 2010

Fed up with repeatedly doing this I’ve developed a WordPress plugin to address the issue. Give it a try and let me know if it works for you.

Loading a webpage in stages Last updated:29 October 2010

I reworked my homepage this weekend and wanted to display the latest WordPress blog post on it. No problem there. However, the initial response times for my blog are sometimes quite slow, and this then meant that the whole of my homepage was slow to display, because the page was waiting for the blog to respond before displaying anything.

So what I wanted to do was display the home page immediately, and then load the blog post when it’s available. The solution was to use AJAX, which turned out to be very straightforward. More information on AJAX here, but essentially it allows a page to communicate with a server without refreshing the whole page.

First things first – here’s the php code to retrieve the latest post from WordPress as follows (I originally had this on the homepage itself):

<?php require($_SERVER['DOCUMENT_ROOT']."/blog/wp-blog-header.php");
query_posts('showposts=1');
while (have_posts()): the_post();?> 
<h2><a href="<?php the_permalink(); ?>" title="Blog">
Latest blog: <?php the_title(); ?></a></h2>
<?php the_excerpt(); ?>
<?php endwhile;?>

I saved this code separately into a file called latest_post.php (stored in my “includes” folder).

In my homepage file I added some “placeholder” code where I want the blog post to appear. This will be displayed until the data comes back from WordPress:

<div id="latest_post">
<h2>Latest blog: loading...</h2>
</div>

Note the id of latest_post assigned to the div. Then I added the following javascript code to the <head> section of the homepage:

<script type="text/javascript">
window.onload = new Function("loadXMLDoc('/includes/latest_post.php');");
function loadXMLDoc(url)
  {
  if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
  else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.open("GET",url,false);
  xmlhttp.send(null);
  document.getElementById('latest_post').innerHTML=xmlhttp.responseText;
  }
</script>

The function loadXMLDoc retrieves the php file I’ve created above (latest_post.php) and then the last line replaces the text within the element with id “latest_post” with whatever is retrieved. This is standard ajax code which can be used for any purpose. Only the last line is specific to my page.

The code window.onload... calls this function when the page is loaded.

So, when the page is requested the php and html that’s on the page display the page with the placeholder text, but without the blog post, so the page loads nice and quickly. Once the page loads, the javascript is fired which calls the AJAX function to retrieve the blog post, and this loads on the page when it’s available.

This was the first time I’ve used AJAX, and it seemed quite a neat little solution, so I thought I’d post it here. This is the basic solution which could be further enhanced with some error handling.