scriptygoddess

Ran into a bizarre problem today using swfobject. A lot of wasted time, but I'll give you the short story / solution.

I'm not sure of what other factors played a role (the fact that the element was in a absolute positioned container, or that the immediate container to the flash element was in a float) but I had the call to the swfobject javascript in the BODY tags of the html (not within the head tags). This was apparently causing Firefox to not display the flash. Simply moving the swfobject javascript code within the head tags of the html instantly fixed the problem.

I know I've used swfobject inside the body before – so I'm sure there's something else that contributed to the problem.

On a site I was working on recently, the client was using the Featured Content Galleries plugin for their homepage (you can download it from here) – but they wanted to add a gallery like this to other pages on their website and have other featured content on those pages. This is not a feature currently supported "out of the box" with this plugin. But hacking it in is pretty easy.

First – you will need to create a category that you will use for the other Featured Content Galleries – one per page you want to use it with. Assign posts you want to appear in the featured content gallery with this new category. For example – lets say on your homepage you're running the featured content gallery, and it's showing posts from the "featured-posts" category. But lets say you have a "products" page and on that page, you only want articles related to your products showing up on that page. So you would need to create another category – lets call it "featured-posts-about-products". Then assign this new category to your articles about products. (**Make a note of what the category ID is of this new category!)

You will still need to make sure those posts have a custom field with a key of "articleimg" and a value that is the full URL to the image you want in the featured content gallery.

Now we can start hacking at the plugin…

Open up gallery.php (found in the featured-content-gallery plugin directory). MAKE A BACKUP OF GALLERY.PHP JUST IN CASE! :) Then, look for this line:

query_posts('category_name=' . get_option('gallery-category') . '&showposts=' . get_option('gallery-items'));

and replace with the following:

$categoryToUse = 'category_name=' . get_option('gallery-category');
if (isset($catidforgallery) && is_numeric($catidforgallery)) {
$categoryToUse = 'cat=' . $catidforgallery;
}
query_posts($categoryToUse . '&showposts=' . get_option('gallery-items'));

NOW in your theme – where you have the featured content gallery appearing – if you want it to pull from that special category, you can do this:

<?php
$catidforgallery = 1234;
include (ABSPATH . '/wp-content/plugins/featured-content-gallery/gallery.php');
?>

The above code assumes our category ID is "1234".

But lets say you're using this template for a number of different pages, and on each one you want a different content gallery… Again, set up these new categories, make notes of what their IDs are – then on each page that's using this template, to specify what category ID the featured content gallery should use, add a custom field with a key of "category-feature-rotator" and a value of the category ID you want in the gallery.

Modify the theme/template code to this instead:

<?php
$category_feature_rotator = get_post_meta($post->ID, "category-feature-rotator", true);
$catidforgallery = false;
if (isset($category_feature_rotator) && $category_feature_rotator != 0) {
$catidforgallery = $category_feature_rotator;
}
include (ABSPATH . '/wp-content/plugins/featured-content-gallery/gallery.php');
?>

That will look for the custom field and use the category ID you put in for that custom field – and if it's not there – then it will just default to the category specified on the Featured Content Gallery options page.

IMPORTANT NOTE: If/when there is an update to the Feature Content Gallery plugin – upgrading will overwrite these changes. This post was written for version 3.2.0 of the plugin. Hopefully they'll build this feature in a next release of the plugin. :D

UPDATE 11/16/09 Greg had asked in the comments about being able to do a similar technique with multiple featured content galleries, but being able to specify page IDs. He was able to solve the problem before I could and sent me the solution. :)

To use Page IDs in the gallery: On the page you want to have the gallery displayed on, create a custom field with a key of "pageids" – and for the value, give a comma seperated list of page ids.

Where I had been pulling the "category-feature-rotator" custom field – replace that with the following:

$pageids = get_post_meta($post->ID, "pageids", true);

Then look for the following line in gallery.php (should be around 24)

$arr = split(",",get_option('gallery-items-pages'));

and change it to this:

$arr = split(",",($pageids));

*Note: I haven't personally tested the Page ID method – so if you try it – please report back how it goes…

Background: For a site I was working on, I was pulling in content from another page onto the homepage. However I wanted to just bring in an excerpt not the whole page. (And actually, a customized excerpt at that – not a default set character or word limit). I also didn't want any images brought in – I just wanted the text and any associated formatting.

Well, one problem here is that WordPress pages (at least as of this writing – with WordPress in version 2.8.5) do not have excerpts for pages. Only for posts. The way around this is to use the <!-- more --> tag where you want your break. So that works fine – but what about stripping out the images? I'm still working on my reg-ex knowledge, but I found this one from here and it worked for me. So this is what I'm doing when I'm pulling in my page excerpt:

<?php
$posts = query_posts('page_id=1234');
if (have_posts()) : while (have_posts()) : the_post();
//this makes the more work...
global $more; $more = 0;
?>
<h1><?php the_title(); ?></h1>
<?php
$content = get_the_content('');
$content = preg_replace('/<img[^>]+>/is', '', $content);
echo $content;
?>
<p><a href="<?php the_permalink(1234); ?>"><img src="/images/more.gif" /></a></p>
<?php endwhile; endif; ?>

*we're assuming "1234" is the ID of my page in the example above…

You'll also notice I manually added my "more" button image…

To read more about the more tag (and see where I got that global $more; $more = 0; from, you can see the WordPress codex here on the subject. (Scroll to the very bottom of the page – to the section title "How to use Read More in Pages")

I just saw this plugin show up on the WordPress Plugins list. WOW! I haven't had a chance to use it yet, but can think of a dozen places where I can use this feature!!! Very excited to see it!

Secondary HTML Content – WordPress Plugin

07 Oct, 2009

Delink Pages Plugin

Posted by: Jennifer In: WordPress|WordPress Plugins

(Plugin and this post last updated: 10/20/2009 – Latest Plugin Version: 1.1.1 – see changelog at bottom of post)

I have been wanting to do more wordpress plugin development, but it has a somewhat steep learning curve. So I'm testing the waters a bit here. I've done some testing with the plugin, but feedback is appreciated. For now, if you have problems with the plugin, leave a comment here. PLEASE include contact information (fill out the email field with a valid email address!!), a URL where you have the plugin installed, any errors you're getting, etc. The more information you give me, the more likely I will able to fix the problem.

Plugin Description

This plugin will allow you to specify certain pages to not be linked when wp_list_pages() is used in your theme. You might want to do this if you want a header for a series of subpages, but don't specifically want that header to be a real "page" or link.

For example – you have a series of pages like this:

As of version 1.1 of this plugin there are two ways you can go about doing this. You can either remove the link entirely. As in no <a> tag at all like this:

OR you can remove the link to the actual page and sawp it out for a blank link to "#".

Usage

To use the plugin, download the zip, and unzip the file. Install it by putting the scripty-delinkpage.php in your wp-content/plugins/ directory. Activate it through the WordPress admin. Then, on pages you do not want to have a link, add a custom field with a key of "delink" and a value of "true" when you want to remove the link completely, or a value of "href" when you want the href value to be "#".

Download

You can download this plugin from wordpress.org plugin directory here: Delink Pages

Changelog

Version 1.1.1
Minor bug fix to preg_replace

Version 1.1
Added option for delink to have a value of "href" when you want don't want the link to be removed entirely but be linked to "#"

Version 1.0
Initial release

One of my clients had set it up so that one particular page in their WordPress install would load as https:// and even though they changed all links they could find in their template to use root-relative links, they were still getting complaints from IE about the page loading some secure and non-secure items. A look through the source code revealed that two plugins in particular (an event manager plugin and cforms plugin) pulled in their CSS or javascript files without the https. It probably got these settings from the main WordPress install, which wasn't set to use ALL https – the had just set it up so that this one page would be (using a special template for https pages). But there was no way to get that information to the plugin… So I needed to do a little hacking to the plugin(s) and add in a conditional statement that would check if the page being viewed was https – and if so, swap out http:// for https:// in the path to the file.

In the case of the cforms plugin, the file I had to modify was cforms.php – the line I found that pulled in the file path looks like this:

$cforms_root = $cformsSettings['global']['cforms_root'];

So, just below that I added this:

if(isset($_SERVER['HTTPS']) || $_SERVER['HTTPS'] == "on") {
$cforms_root = str_replace("http://","https://",$cforms_root);
}

Pretty simple. Of course, if/when we need to upgrade the plugin, the change will be overwritten – but it's pretty easy to add back in…

(Apparently, I'm not the only one with this issue…)

In the case of the event manager plugin, the file I modified was dbem_events.php:

So just below this:

function dbem_general_css() {
$base_url = get_bloginfo('url');

I added this:

if(isset($_SERVER['HTTPS']) || $_SERVER['HTTPS'] == "on") {
$base_url = str_replace("http://","https://",$base_url);
}

No more complaints from IE.

One problem with the WYSIWYG editor in WordPress is that if you are trying to manually add in a block of HTML, the editor may try to translate that block into paragraph format, inserting <p> tags where you didn't intend, possibly (and most likely) ruining what you were intending to do with your HTML code block.

Previously, my way around this had included the use of various plugins that had you wrap certain areas in your post with specific comments that would tell WordPress to leave that block alone and not insert those paragraph tags. There was still some issues doing it this way – as it required you to view these posts in the HTML view. Viewing them in the visual editor would mess everything up.

So, keeping in line with what seems to be a current trend at the moment of solving all my problems with shortcodes, that's how I've decided to solve this problem as of late.

First – (you'll only need to do this once) – add the PHP code so that you can do the shortcode. If you don't already have a functions.php file in your theme directory, create one and add the following code:

function scriptysAddHTML_func($atts) {
global $post;
$id = $atts['id'];
if (empty($id)) return;
return get_post_meta($post->ID, $id, true);
}
add_shortcode('html', 'scriptysAddHTML_func');

Then, in your post when you want to add some custom HTML, paste your block of HTML into the value of a new custom field. For the name of this custom field, give it a unique name with no spaces. (For example: My_HTML_Block)

In your WordPress post, where you want this block to appear, add the shortcode like this:

[html id=My_HTML_Block]

You would add it exactly like the above, except instead of My_HTML_Block, you would change that to be the name you gave your custom field.

Extra Tip If for some reason, you're using more than one shortcode in your post and it doesn't seem like they're working… if you're using them one right after the other, make sure there is a space between them. ie. If you're using my linebreak shortcode, and you were adding more than one linebreak… it might not work if you do this:

[br][br][br]

You my have to do this:

[br] [br] [br]

Little minor thing, but something you might not have thought of… figured I'd mention it. :)

This is possibly the most bizarre thing I've ever seen. (This is relevant to version 2.8.4). If you have your WordPress install set up to be http://www.yourdomain.com but your blog install set up to be http://yourdomain.com (note the missing "www") and you try to search for posts from with the WordPress admin, you get redirected to your blog's (front end) homepage. If you change your WordPress install to match your blog install (ie. remove the WWW – then it works fine) Sounds like a bug to me. I'll submit it to the WP team and see what they say – but in the meantime should you be up past 1am trying to figure that little gem out, hopefully I've saved you some trouble and you can get to sleep earlier than I did. LOL!

I was recently asked by a client how they could easily add anchor links within a particularly long post they had made in WordPress. (Ie. a list of links at the top of the page that would jump the user down to the appropriate section where they needed to be.) I thought about maybe explaining to them to switch over the HTML tab and writing the HTML for the anchor links, but that step alone can sometimes really freak some clients out. :) So I came up with a solution to the problem using shortcodes and using the "build link" button already in the WordPress edit post box.

So the first step is to create the code so the shortcode will work. If you don't already have a functions.php file in your template directory, make a new file, name it "functions.php" and add the following code (surrounded by <?php and ?>). If you do already have a functions.php file, add the following code within those php tags:

function anchorlink($atts) {
extract(shortcode_atts(array(
"id" => ''
), $atts));
return '<a name="'.$id.'"></a>';
}
add_shortcode('anchor', 'anchorlink');

Then, in your post. In front of the location you want to be able to create a link to add the following:

[anchor id="unique_id_here"]

So for example.. If your post is a "Q/A" type page, down where you have the full question and answer, add that shortcode:

[anchor id="elephantquestion"]Q: What do elephants eat?
A: Elephants eat mainly grass, leaves, bark and twigs. Sometimes they will also eat fruit and seeds.

Then at the top – where you probably have a list of all the questions on the page like this:

What do elephants eat?
What do giraffes eat?
etc.

(In this example) highlight the "What do elephants eat" text, click the LINK button in the edit post area – remove the "http://" that automatically is included in the link field that pops up and instead, add a pound symbol # and then the id you used:
Screen shot 2009-09-10 at Sep 10  11.51.47 AM

I know this isn't a huge leap from simply writing the HTML that does this. But I've found that some clients don't understand (and don't want to understand) HTML. This IS actually simpler for them. Especially when you might run into the scenario of someone forgetting to close the anchor tag with a </a> – and suddenly the whole page is acting weird… I also think it's probably helpful to SEE the ID right there in plain text in the post – so that when you're making the links at the top, you can quickly see what the ID is that you need to link to.

29 Aug, 2009

Simple Shortcode for Line Breaks

Posted by: Jennifer In: WordPress|WordPress Hacks

One kind of funny thing with WordPress is that entering HTML in the post window can sometimes lead to unexpected results. Sometimes WordPress (or probably more specifically the WYSIWYG visual editor) will eat some or all of the HTML. A friend of mine (Hi Chris!) was asking me how to add line breaks to her post. Adding the actual HTML for a line break didn't work because WordPress ate it. The simplest solution for this is to use shortcodes to get the HTML into the post without WordPress munching it.

To add the shortcode – go to your themes functions.php file (if you don't have this file in your theme, simply create a file called "functions.php" and throw it in your theme folder.) Then add the following code to this file (make sure the function name doesn't class with something else already in there just in case!)

function breakall() {
   return '<br clear="all" />';
}
add_shortcode('br', 'breakall');

Now, when writing your posts, if you need to add a line break or two just add the following where you want the linebreak:

[br]

That will be converted to <br clear="all" /> when the page is displayed.

Shortcodes are an amazingly powerful little feature. Read more about shortcodes here:

Shortcode API
Mastering WordPress Shortcodes
10 Incredibly Cool WordPress Shortcodes

Featured Sponsors

About


Advertisements