// [showfiles]
function dump_files($atts) {
        extract(shortcode_atts(array(), $atts));
        global $post;
        $return = '';
        $children = get_children( 'numberposts=-1&orderby=menu_order&order=ASC&post_type=attachment&post_parent='.$post->ID );
        if ($children) :
        $return .= '<ul>';
        foreach ($children as $child) {
        $return .= '<li>
            <a href="'.$child->guid.'">'.$child->post_title.'</a>';
            if ($child->post_content):
                $return .='<br>'.$child->post_content;
            endif;
            $return .='</li>';
            } // endfor
        $return .='</ul>';
        endif;
        return $return;
}
add_shortcode("showfiles", "dump_files");
// end shortcode

This shortcode should go in your functions.php theme file. It is designed to pull in all post attachments, if any exist, and then print them out on the page in an unordered list. You can additionally specify mime types as a parameter in the get_children() function.

Use it in your theme by typing [showfiles] in your content.

Here’s the function

function set_post_background() {
	global $post;
	$bgimage = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), "Full");
	if (!empty($bgimage)) {
		return '<style type="text/css">body {background-image: url('.$bgimage[0].');}</style>';
	}
}

Here’s what it does:

1. The featured image source is pulled from the post data
2. If the featured image URL exists, the function prints a style tag that sets the body’s background-image to that url. If not, it doesn’t do anything.

Call this function anywhere in your theme like so:

<?php echo set_post_background(); ?>

And that’s it.

Futher Reading:

• WordPress Post Thumbnails
• Get Attachment Source

My last order of business in coding the site was that some of the Youtube videos and embeds had been inserted at a width of 640 pixels, which was 90 pixels wider than the content area. With CSS, the options are really only to choose overflow: hidden;, which then only cuts off the content that is wider, instead of resizing it. So, I wrote a quick little script that some folks might find helpful. May I introduce jQuery resizer.

Here’s the actual function for my fellow geeks:

function resizer( selectors, w ) {
 jQuery(selectors).each(function() {
 var owidth = jQuery(this).width(); var oheight = jQuery(this).height();
 if (owidth > w) {
 var newH = (oheight * w / owidth);
 jQuery(this).attr({
 width: w,
 height: newH
 });
 }; // endif
 });
}

Essentially the function loops through every selector you give it, checks it against the width you give it, and if it’s wider, it will recalculate the attributes of width and height based on their original values to scale the image down, it takes two attributes, the selector, and the width. The function can be called like so:

resizer('.content iframe', 500);

Additionally, you can give it a comma separated list of selectors, like so:

resizer('.content iframe, .content embed, .content object, .content img', 500);

So, the very straightforward, bottom line usage is as follows:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="appropriate-path/jq-resizer.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
 resizer('iframe, img', 550);
});
</script>

You can see a quick demo here.

Click to download the js file (in a zip).

I’ve been trying to come up with a solution for this. So I asked my friend Brian Morykon his thoughts. He suggested using spans instead of iframes, then when the dom was ready to replace the spans with iframes throughout, that way it would load after everything else. I tried it, and it worked. The only thing that is a little different here is that I am only using the src attribute from the spans, the other parameters I’m filling in on .replaceWith()

Facebook Like button (using span instead of iframe)

<div class="facebooklike">
 <span class="facelike" src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>&amp;layout=button_count&amp;show_faces=false&amp;width=60px&amp;action=like&amp;colorscheme=light&amp;height=21"></span>
</div>

jQuery function to find and replace spans with class ‘facelike’:

jQuery("span.facelike").each(function() {
 var url = jQuery(this).attr("src");
 jQuery(this).replaceWith('<iframe src=' + url + ' scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:60pxpx; height:21px;" allowTransparency="true" />');
 });

Note:

1. The jQuery is replacing the span with class ‘facelike’ with an iframe, with the attribute the same as the span. the other parameters (frameborder, style, scrolling) get passed from the jquery and not pulled out of each span (it’s much easier this way, plus you can change them all at once if you need to adjust).
2. This doesn’t have anything to do with jQuery, more with WordPress, but I’m using the_permalink() to pass the url to like, so you have to run this inside the loop.

This tool parses your HTML and pulls out your CSS classes and IDs. It then presents you with a css file download containing all classes and ids used in your markup. It’s helpful for creating handles in your CSS file, then manipulating them in Firebug. Thanks to my buddy Adeel for help creating the tool!

Try it out here

Ok folks, this will be short. If you want to add several pages at once, I created a little script for you.

Here it is:

<?php
 include ('wp-blog-header.php');
 $newPages = array(
 'Page 1' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
 'Page 2' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
 'Page 3' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
 'Page 4' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
 );
 foreach($newPages as $pagename => $content) :

 $postarr = array(
 'post_title'         =>     $pagename,
 'post_content'         =>     $content,
 'post_status'        =>    'publish', // can be changed to 'draft', 'publish', 'pending', or 'future'
 'post_author'        =>    1, // post author 1 is admin, can be changed to the ID of the post author
 'post_type'            =>    'page', // can also use 'post' here.
// 'post_parent'            =>    '22', // (completely optional) you can assign a parent ID to create child pages.
 );
 wp_insert_post($postarr); ?>
 <p>Added <?php echo $pagename?>.</p>
 <?php endforeach; ?>

And here’s how it works:

1. the include wp_blog_header() is pulling in the file wp_blog_header.php, which gets all the important data from your WordPress blog, allowing you to access the database (very important).
2. the $newpages variable is storing an array that is created in the next 4 lines.
3. The foreach cycles through the array, assigning $pagename to the left side of the = and $content to the right, so whatever you put to the left side of the = will be your page title, whatever you put to the right side will be your content (simple enough).
4. The function wp_insert_post() is called, passing the parameter of the array that was created in step 2.

That’s it, your new pages have been added. Be very careful not to reload the page, or navigate to this page again, or it will duplicate the pages, which can be quite frustrating to straighten out. But that’s it. It really is that easy. You can also see my comments in blue.

I might make a plugin that you can drop into a site to enable users to frame out a site with the pages needed and whatnot. Maybe I’ll make that my next project, anyway, hopefully you found it useful, if you’d like to download the php file, you can get it below:

insertposts.php

Put this file in your root directory (so like: http://geekoutwith.me/insertposts.php). If you put it somewhere else, you’ll have to change the path of the include for wp-blog-header.php

I have since written a plugin for this purpose, you may read about it here: WordPress Plugin: Quick Posts

And that will pull in a stylesheet for the iPhone, mine looks like this:

#content-right {
display: none;
}
#pagewrapper {
	width: 640px;
}

So, in an iPhone at this moment, my site looks like this:

It really is that easy. I hope to share more about CSS Media Queries in the future.

How to Embed MP3 Audio Files In Web Pages With Google or Yahoo! Flash Player

Using this method, you can paste the embed code into your post or page. In the next post, I’ll go into some detail about a neat way to use this method in your WordPress theme.