Wordpress Development Help - Sharing tips and code snippets

[Zak_A]

Over the last year I've built my own webdesign and development business and greatly specialized in advanced WP development. Now I think I can reasonably say I quite master the WP API and can do anything with WP.

The idea of this thread, as to share and give back to the community, is to share some of my knowledge and expertize with fellow developers and others WP enthusiasts who are getting into WP coding.

So feel free to ask any WP coding question and I'll do my best to help you with wp functions, tips and tricks and code snippets.

Note: I mean this thread to only discuss pure development matters for fellow coders, for more general questions about WP issues or very specific questions about tweaking the code of one given theme or plugin, I also suggest you check out this thread from my buddy OriginalEXE:

http://www.blackhatworld.com/blackhat-seo/blogging/438996-wordpress-help-ask-your-questions.html

 

[LuckyCharms]

Zak,

this thread must be my Christmas gift. I'm kind of a Drupal expert but brand new to Wordpress, bought a couple book just yesterday. I got them with the purpose of solving one question. I want to recreate some unreleased commenting functionality I have seen on thechive.

Pick any photo gallery on that site and notice that the photos are numbered. Now go to the comments and see that there are thumbnails in the comments. To reference a thumbnail in a comment a user simply notes the number of the image, #3, like so and it get pulled in on submit.

Now I know this site is not using default WP comments, it's using Intensedebate , but this functionality is not a native part of that, it's a plugin to ID developed by VIP .wordpress for thechive but never release.

In addition I use Disqus comments and would, be pained to switch to ID since the released the new Discovery option.

So, now that you have the whole thing, how do I approach this?

My list o questions

How do I add galleries so that by default,
a. They are full width
b. they have a link URL on each photo that is not a lame file path but is Seo-able.
c. They have a unique num ID. Is that done with templating or preprocessing or what?
d. And last how do I do this thumb nailing.

and advice, link to source code or tutorials and straight snippets appreciated.

Let me know if clarification is needed.
and thanks for starting this thread. Coders unite!

 

[Zak_A]

Wow LuckyCharms, that one is huge
Well I can't give you a complete solution for this in a forum post, but I can give you some directions (and yes, this is completely doable and not so tough for a fellow coder ).

How do I add galleries so that by default,
a. They are full width

I think you know that wordpress as a built-in gallery feature with a [gallery] shortcode, this shortcode will output all of the images you have uploaded in the said post (in thumbnail size by default).

What you want to do here is to re-write the shortcode's function to process the output of this shortcode, and in your case, to make it output fullwidth and numbered images instead of the default WP gallery.
Here's a code to put in your theme's function.php:

remove_shortcode('gallery', 'gallery_shortcode'); //deactivate the original WordPress function
add_shortcode('gallery', 'my_gallery_shortcode'); //replace with my own function
function my_gallery_shortcode($attr) {
	// Your own gallery code here
}

I'm not writing the exact gallery code you need, but here is a good reference example to get you started, you'll just need to tweak it to output the gallery the exact way you want:
Note: this code pulls images in "thumbnail" size, this is mainly what you want to change in the default atts, then you will just put a simple incremental counter and use it's value to add the numbers in the output markup.

function my_gallery_shortcode( $output, $attr) {
    global $post, $wp_locale;

    static $instance = 0;
    $instance++;

    // We're trusting author input, so let's at least make sure it looks like a valid orderby statement
    if ( isset( $attr['orderby'] ) ) {
        $attr['orderby'] = sanitize_sql_orderby( $attr['orderby'] );
        if ( !$attr['orderby'] )
            unset( $attr['orderby'] );
    }

    extract(shortcode_atts(array(
        'order'      => 'ASC',
        'orderby'    => 'menu_order ID',
        'id'         => $post->ID,
        'itemtag'    => 'dl',
        'icontag'    => 'dt',
        'captiontag' => 'dd',
        'columns'    => 3,
        'size'       => 'thumbnail',
        'include'    => '',
        'exclude'    => ''
    ), $attr));

    $id = intval($id);
    if ( 'RAND' == $order )
        $orderby = 'none';

    if ( !empty($include) ) {
        $include = preg_replace( '/[^0-9,]+/', '', $include );
        $_attachments = get_posts( array('include' => $include, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );

        $attachments = array();
        foreach ( $_attachments as $key => $val ) {
            $attachments[$val->ID] = $_attachments[$key];
        }
    } elseif ( !empty($exclude) ) {
        $exclude = preg_replace( '/[^0-9,]+/', '', $exclude );
        $attachments = get_children( array('post_parent' => $id, 'exclude' => $exclude, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
    } else {
        $attachments = get_children( array('post_parent' => $id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
    }

    if ( empty($attachments) )
        return '';

    if ( is_feed() ) {
        $output = "\n";
        foreach ( $attachments as $att_id => $attachment )
            $output .= wp_get_attachment_link($att_id, $size, true) . "\n";
        return $output;
    }

    $itemtag = tag_escape($itemtag);
    $captiontag = tag_escape($captiontag);
    $columns = intval($columns);
    $itemwidth = $columns > 0 ? floor(100/$columns) : 100;
    $float = is_rtl() ? 'right' : 'left';

    $selector = "gallery-{$instance}";

    $output = apply_filters('gallery_style', "
        <style type='text/css'>
            #{$selector} {
                margin: auto;
            }
            #{$selector} .gallery-item {
                float: {$float};
                margin-top: 10px;
                text-align: center;
                width: {$itemwidth}%;           }
            #{$selector} img {
                border: 2px solid #cfcfcf;
            }
            #{$selector} .gallery-caption {
                margin-left: 0;
            }
        </style>
        <!-- see gallery_shortcode() in wp-includes/media.php -->
        <div id='$selector' class='gallery galleryid-{$id}'>");

    $i = 0;
    foreach ( $attachments as $id => $attachment ) {
        $link = isset($attr['link']) && 'file' == $attr['link'] ? wp_get_attachment_link($id, $size, false, false) : wp_get_attachment_link($id, $size, true, false);

        $output .= "<{$itemtag} class='gallery-item'>";
        $output .= "
            <{$icontag} class='gallery-icon'>
                $link
            </{$icontag}>";
        if ( $captiontag && trim($attachment->post_excerpt) ) {
            $output .= "
                <{$captiontag} class='gallery-caption'>
                " . wptexturize($attachment->post_excerpt) . "
                </{$captiontag}>";
        }
        $output .= "</{$itemtag}>";
        if ( $columns > 0 && ++$i % $columns == 0 )
            $output .= '<br style="clear: both" />';
    }

    $output .= "
            <br style='clear: both;' />
        </div>\n";

    return $output;
}

b. they have a link URL on each photo that is not a lame file path but is Seo-able.
c. They have a unique num ID. Is that done with templating or preprocessing or what?

You will make this happen with the above code

d. And last how do I do this thumb nailing.

Once again, this will work with the above code you will tweak for your own use.
As you want commenters to be able to use a token with a number to refer to an image, what you want to do is filter the comment's content to replace the tokens with the right image, which you will pull in thumbnail size with:
I am not using disqus myself, so I won't be more specific here, but I hope this will give you at least a good direction.

wp_get_attachment_link($attachment_id, 'thumbnail')

Function reference: http://codex.wordpress.org/Function_Reference/wp_get_attachment_link

Hope this helped, let me know if you find your way through it

 

[Zak_A]

can you design as well or just code? i use thesis and its a great theme but damn its hard to modify it unless oyu know code

I design, and then code my design (and plugins and added functionalities as well).
Though I'm not using thesis, I prefer building my own stuff from scratch, and have developed my very own custom framework over time.

And you're right, truth is that you can really do whatever you want with WP only if you can code.

 

[terrycody]

woo very expericence guy

 

[LuckyCharms]

Zak,
Thanks for your thoughtful reply.

I had hoped to dig into your code this weekend but a couple things came up so I'll be looking into it over Christmas.

Again I really appreciate your time and the little snippets because so much of learning a new system is figuring out where to get your toes in and what hooks are available to you.
I find WP especially frustrating because I feel that really good tech source material is hard to find. Everything I find is either super basic, like for someone who does not code and is trying to avoid it, or assumes you are already familiar with most of WP's APIs and glosses over the coding basics. Even the book I bought frustrates me. I'm on page 75 and they are still going over config options as if the were confusing or challenging.

I'm looking forward to bending WP to my will. Thanks again for starting this generous thread.

LC

 

[desolateline]

does this mean this displays images like 4, 5, or 6 images in a row instead of just having one line of images going straight down?

 

[richim1]

Very helpful thread for WP based blogger like me...

Hey mate,
How to edit (or other way) "Press This" wordpress bookmaklet to upload images on server, not hotlinking? Just like Tumblr bookmarklet & pinterest.
Any ideas?

 

[Zak_A]

Zak,
Thanks for your thoughtful reply.

I had hoped to dig into your code this weekend but a couple things came up so I'll be looking into it over Christmas.

Again I really appreciate your time and the little snippets because so much of learning a new system is figuring out where to get your toes in and what hooks are available to you.
I find WP especially frustrating because I feel that really good tech source material is hard to find. Everything I find is either super basic, like for someone who does not code and is trying to avoid it, or assumes you are already familiar with most of WP's APIs and glosses over the coding basics. Even the book I bought frustrates me. I'm on page 75 and they are still going over config options as if the were confusing or challenging.

I'm looking forward to bending WP to my will. Thanks again for starting this generous thread.

LC

I hope you'll get something from it when you get a chance. I can understand your frustration, especially when you come from another CMS. Actually the WP API isn't that complicated, you just need to go ahead and get your hands dirty and everything becomes clear quite quickly.
But I'd admit that "figuring out where to get your toes in" is the hardest part, there are indeed no path to get in, you can only jump directly in the middle of the pool.

does this mean this displays images like 4, 5, or 6 images in a row instead of just having one line of images going straight down?

I think you didn't get it, I provided the code used to re-write the gallery shortcode. Tweak it as you wish and it will do whatever you want it to.

Hey mate,
How to edit (or other way) "Press This" wordpress bookmaklet to upload images on server, not hotlinking? Just like Tumblr bookmarklet & pinterest.
Any ideas?

I think this can be done, but you won't like it. I mean, there's quite a bit of code to rewrite if you want the press-this feature to do this.
This would require stripping html img tag to retrieve their src, add them to the library with media_handle_sideload(), attach them to the post and then replace the original img tags with the newly uploaded local version.
If you really feel like rewriting the press-this code (which is located in wp-admin/press-this.php), then I just gave you the directions and the most important function from the API you'll need to use

Otherwise maybe you would prefer just taking a few more seconds when you use press-this to upload the images manually, there's a plugin that extends the functionalities of press-this (to make it look like the regular wp "add new post" ), maybe you'll find it useful: http://wordpress.org/extend/plugins/press-this-reloaded/