Welcome to Dagon Design. In addition to free scripts, WordPress plugins, and articles, we offer a variety of services including custom theme design, plugin creation, and PHP scripting. Contact me for more information.

Version 2.4   Updated Sunday, February 22nd, 2009 at 8:20pm

User Bio Popup plugin for WordPress

This WordPress plugin searches posts and pages for the nicknames of authors. When it finds one, it turns it into a link which brings up a popup window with the author’s bio and image. It uses the contents of the ‘About Yourself’ field in the user’s profile for the actual bio, and the image used depends on which of the two methods you select. The options page for this plugin allows you to configure the popup’s heading, width, height, and more. It also is fully customizable with the built-in CSS in the popup template file.

Download

  If you have found this page useful, please consider donating. Thanks!

Instructions

  • Download dd-user-bio-popup.zip and uncompress
  • Upload dd-user-bio-popup.php to your plugin directory
  • Upload ddub-template.php to your theme directory
  • Enable the plugin
  • Configure the plugin options (under DDUserBioPopup). More information on that is below

Upgrading

Be sure to download both files when you upgrade, and check the options and the information on this page to make sure something has not been changed.

Change Log

  • 09-29-07 Version 2.4 – ‘Load Default Options’ button added. Tested with WP 2.3
  • 05-16-07 Version 2.3 – Updated for WordPress 2.2.
  • 04-06-06 Version 2.2 – Now in the options, you enter the FULL URL to the images directory. It should help make things a bit more standard. Everything validates now as well.
  • 04-05-06 Version 2.1 – Image detection code improved, gravatar code improved, and a few other little things.
  • 04-04-06 Version 2.0 – Popup code completely redone. Now popup window has it’s own template file. Images are now supported (Uploaded and Gravatars), as well as many other fixes and updates.
  • 04-02-06 Version 1.0 – First release.

Using images

The image used depends on your settings. This plugin allows you to create a directory, and upload images to it. You must simply specify the full URL to this directory in the options.

If you like, you could use a directory that your other author’s have access to, so they can upload their images themselves.

For image file names, simply use the author’s nickname – lower case, with spaces removed. The plugin will search for matching files that are either jpg, gif, or png.

Example

Let’s say your wordpress installation is at http://www.somesite.com/wp/ and you create a subdirectory called authors for the images. In your options page you would enter http://www.somesite.com/wp/authors/ for the directory.

Let’s also say that you have a user called Some User. You would want to call the image someuser.jpg (or gif or png). That’s it!

Now if the plugin cannot find a matching image, and Gravatars are enabled, it will try to find one by using the author’s email address (in their profile).

This plugin uses its own code for Gravatars, so you do not have to install anything else. If you are already using a Gravatar plugin, that is fine. They will not conflict.

Configuring

The CSS code for the popup window is contained in the template file (ddub-template.php). Feel free to change this to fit your site.

Options

Here are the settings available in this plugin’s options page in the WordPress admin panel.

Author images directory

This is the full url to your author image directory. This is where you can choose to store images for each author.

Use Gravatars?

If enabled, and an author image cannot be found in the specified directory, the author’s gravatar will be used. If you want to always use gravatars, just leave the ‘author images directory’ option blank.

Heading for the popup

This will be shown at the top of the popup window. If you want to include the user’s name, use %U.

Hover text for link

This will be shown when the visitor’s mouse is hovered over the link. If you want to include the user’s name, use %U.

Popup window width

Self-explanatory.

Popup window height

Self-explanatory.

CSS for popup window

This allows you to completely customize the popup window. The #wrapper div is around the content.

Other Modifications

If you would like the popup window to have a scroll bar, just search for the following code in the main script file:

scrollbars=0

And change it to this:

scrollbars=1

Pages: « 7 6 5 4 3 2 [1] Show All

  1. 15
    Big Dog
    4-5-06 8:54PM

    It appears that this now works and is compatible with Brian Groce’s email notification plug in.

    Thanks

  2. 14
    aNieto2K | Lo que quiero, cuando quiero y como quiero » Cosillas para Wordpress
    4-5-06 3:54PM

    [...] Curioso plugin, que realmente no se que hace, pero parece que te muestra un pequeño pop-up con info del autor. [...]

  3. 13
    Admin
    4-5-06 12:22PM

    Version 2.1 has been released. :) There are several code improvements, including better image detection, Gravatar code, and a few other things.

    I tried to sign up for a Gravatar myself, but it looks like their site might be having problems.

  4. 12
    Bricolou
    4-5-06 11:43AM

    You are “THE MAN”…

  5. 11
      WordPress Plugin: User Bio Popup by Blogging Pro
    4-5-06 11:05AM

    [...] Check it out at Dragon Design. [...]

  6. 10
    Admin
    4-5-06 8:06AM

    Bricolou: Can you email me a link where you have this in use? So I can see the source of the popup and tell perhaps why it is not generating the image link properly?

  7. 9
    Bricolou
    4-5-06 1:34AM

    Hi again Admin,
    I’ve tried the new version in both a localhost install with Wordpress in the root directory and a live site with Worpress in http://www.mysite.com/WP. I’ve followed your instructions to the letter. In both cases, it’s working fine with gravatars but it won’t pick up locally hosted images, just the text description shows up. Any idea what can be wrong?

  8. 8
    Admin
    4-4-06 9:25PM

    Version 2.0 has been released. I rewrote almost all of the code and put the popup stuff in it’s own template file (easier to make modifications and adjust the CSS). It also now supports images (two methods you can use), as well as several other fixes and things :)

  9. 7
    Bricolou
    4-4-06 2:13AM

    Be sure your adkillers and popup blockers are disactivated. I forgot about that at first. Now working fine even in a tabbed browser.

  10. 6
    Admin
    4-3-06 7:39PM

    Big Dog: Can you show me an example page on your site where it generates a link, so I can check it out?

  11. 5
    Big Dog
    4-3-06 5:48PM

    Everything seems to have worked until I clicked on the link. No pop-up window appeared so I am not sure what I need to do.

    Has anyone else run into this?

  12. 4
    Admin
    4-3-06 12:22PM

    I will see what I can do :)

  13. 3
    Bricolou
    4-3-06 10:27AM

    I’d go for the easiest solution which from my point of view, is the second. A simple link typed in to the profile information would allow users with upload rights to use images in the upload directory and users with no rights to use a gravatar url or an image from their own site.
    It would be really good if you could do this. TIA.

  14. 2
    Admin
    4-3-06 8:32AM

    There is a paypal link at the top of the page now. :)

    When I get home today, I figure out a way to include an image.

    One option is to use one of those usermeta plugins such as the ones mentioned in the WP forum. Would you prefer something like this? Or would you be happy using the current method, if images were able to be used?

  15. 1
    Bricolou
    4-3-06 5:06AM

    Hi, great plugin. Many thanks. I said I’d make a donation but can’t find a way to do so from your site. Can you indicate a paypal address?
    Just one question: with the old B2 hack, it was possible to include a photo in the bio using HTML. HTML in the user profile doesn’t seem to work. Even slashing out the “, I just get the img src address. Is there some way to include a photo?

Pages: « 7 6 5 4 3 2 [1] Show All

Leave a Comment

Before you comment: If you are having an issue with a script, please make sure you have read the entire article. Also, please read through the comments because most common issues have already been discussed many times. Thanks.


Be sure to wrap all code in <code></code> tags.