Grow your CSS skills. Land your dream job.

Styling Password Protected WordPress Posts

  • # March 19, 2009 at 9:27 pm

    Ok, here goes.

    I’ve been searching around the Codex and Google and can’t seem to find ANYthing on this.

    All I would like to do, is somehow, be able to style the password entry box that WordPress displays when a post is password protected. WordPress doesn’t seem to add any hooks around the form tag that it’s giving me and the only tag with an id or class is the password box itself, which is all good, except it appends the post id onto the end, killing any hopes of styling it. Is there any way I can modify how this gets outputted in my theme files? If I’m making this theme available for public use, I’d like to make sure that there isn’t any user modification of WordPress itself required.

    I think there’s a quirk in how the form gets displayed anyways. It seems like the input text box is wrapped in a <label> tag. Obviously I’m not going to be able to change this, but it seems like this is a feature in WordPress that has just been left by the wayside.

    Ok. One last question. If the post is password protected, the word "Protected:" gets prepended to the title of the post. Any way to change the text itself? If not, is there any way to possibly wrap this text in an HTML tag, just so I could style it a little differently?

    Any help would be GREATLY appreciated, I’ve been searching for the last hour. There is nothing I could find in the codex that actually goes into detail about this specific feature…

    Thanks again!

    # March 20, 2009 at 12:06 am

    Very interesting problem… I just make a password protected page to test and indeed there are no hooks that really make any sense at all. Pretty stupid really…. I think the best way would be to give that <form> tag a class of some kind. I don’t have any particular ideas, but I’m sure there is some way to alter it in the core to do that. You know who you might wanna contact is Joost: http://yoast.com/ He seems like the kind of guy who could rock out a plugin to fix this in two seconds.

    Please share anything if you find something.

    # March 21, 2009 at 9:26 am

    I’ve checked the WordPress source code and unfortunately this feature is hard coded in the get_the_title function. You can either hack the core files (==BAD) or remove the text with a custom filter.

    Add the following to your theme’s functions.php file:

    Code:
    function remove_protected($title)
    {
    // Remove Protected: from the begining of the title
    return preg_replace(‘(^Protected: )’, ”, $title);
    }

    add_filter(‘the_title’, ‘remove_protected’);

    Hope that helps
    Dave

    # March 21, 2009 at 11:19 am

    Thanks Dave. Ill try implementing that later. I should be able to look at what WordPress gives me for the forum and use a similar technique. I was thinking I might have to do something like this.

    I think Ill go ahead and submit this as an Idea on the WordPress site.

    Vote it up http://wordpress.org/extend/ideas/topic.php?id=2545#post-8673

    # September 14, 2009 at 12:10 pm

    f you use the plugin "better-protected-pages" available from wordpress.org then this adds in all the CSS hooks you would need for the protected pages. It also allows you to enable or disable the built in CSS so that you can easily style your protected pages to match your theme.

    Hope this helps,

    Madeglobal.com

    # October 28, 2009 at 4:30 pm

    I tried using the plugin, but it does not work well with WordPress MU. I need this plugin to activate for every site. If I place this in the plugins directory and select activate site wide, not every site is affected. Why is this and is there a plugin that will go into the mu-plugins folder?

    Thanks in advance!

    mz

    # December 6, 2012 at 5:11 pm

    @Madeglobal – worked like a charm. Thanks.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".