WordPress Plugin: Post/Page Headers
Post/Page Headers is a simple WordPress plugin that lets you add Stylesheet and JavaScript files (CSS & JS) to your posts and pages.
After being frustrated about having to add styles to my theme’s CSS file everytime I wanted to add a new div or span style to a post, I decided to write this plugin so that no longer had to be done.
What does this Plugin do?
Instead of having to edit your theme styles everytime you want to add a new style to a post, you can load a separate file for just that post. Same goes for JavaScript.
This plugin queue’s your files with wp_enqueue_style() and wp_enqueue_script() when the associated post is being displayed. If you choose to load your script in the footer, then when wp_foot() i called, the scripts are added there.
How to use Post Headers Plugin
When adding/edited an entry, a new meta box will appear titled Post Headers or Page Headers depending on whether you’re editing a post or a page..
To add a file, simply paste the url into the input box, select the type of file, and where its to be placed. When you save the post/page, the data will be saved. To add more than one script, click the Add Another Script button, and a new row will be added.
To upload a file, simply click the Upload Files button. Once you have uploaded the file, copy the url, and paste it into the appropriate box.
To delete a file, click the X button, and save the post/page.
Allowed files are CSS, JS, and PHP files. PHP files are allowed because some prefer use PHP files to dynamically load scripts.
Download
Download Stats
| Today: | 0 |
| Yesterday: | 3 |
| This Week: | 24 |
| Total: | 1,172 |
August 3rd, 2009 | Plugins |
hi,
Great plugin! It is just what i have looking for, but as i am a “copy+paste” specialist, i haven’t found the way to put it working at 100%. I mean, sometimes it recognizes the custom css for pages, but then it lose the configuration. I go to wp write painel, and the post/page field is empty…
Can you give some lights in “how to config this plugin for hiper dummies”? :)
or “declarations for the css files for dummies” to ensure that page/post header goes on top?
Thanks,
PS – Theres is other ways to make this work?
Great Plugin!!!
I’m using it greatly on many site pages.
I could not add google ajax script in the following form:
http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABQIAAAA4XpgbOuUNLl6pJ-kwRuLMxTgyS13dZDoxZlNAPODVnY3GSl8dSQAbFCgF_AjLDalExtgWug7Ih6GbQ
Looking at the plugin source code I found that the reason is :post_head_validate_file($file) function that validates only for css || js || php file extensions
I suggest to correct this in future versions.
Sweet Jesus this thing is AMAZING!! This is my first ever plugin comment (actually second since I left this same comment on one of the links above by mistake haha) and I’ve downloaded a ton. I’m new to all this so it’s been countless hours of trial and error and I’m generally in no position to offer any meaningful feedback on a plug-in.
But this time I am certain I know what I’m talking about since I’ve been looking for hours for a way to modify CSS on a per page basis.
The solutions out there were far too complex for my needs since I’m building a CMS and collaboration site for my condo association and I only need subtle modifications to the existing styling for certain pages. For example, I want the to-do list page to not have any side-bars (since the side-bars on every page is a to-do list because my fellow Board members don’t do anything and they need to be constantly reminded on every page!!).
So I created a custom page template that didn’t call the side-bar and then uploaded the following code in a style sheet to make the body of the page stretch the across the entire container! Dude and it worked the first time haha! That’s extremely unusual when I’m at the controls.
#page #wrapper #container #left-col {
width: 1260px;
float: left;
!important;
}
Anyway, thanks a million and GO BLACKHAWKS!!!
PS: I think the reason your plug-in isn’t gaining momentum yet is that unique page styling seems to be a fairly current issue among WP users…I saw a ton of posts from 2010 when most of the posts I read for other topics are 2008 or prior. By the end of this year your plug-in will be in super demand without question. It’s just way easier than the other ideas people have!
For some reason I get ‘?ver=1.0′ added to my javscript and my CSS file? Is this normal?
Hi I was wondering if this plugin could be used for loading google website optimizer code to the header of a test page?
Nice plugin. But I couldn’t make it run on WP 2.8.6. Perhaps it needs an update. Perhaps I do something wrong. Could you confirm if it has been tested with WP 2.8.6, please? Thank you very much.
I can confirm that this plugin does work for 2.8.6.
One thing is for the script to be added, you need to either save or publish the post when you add/change/remove scripts. Simply clicking preview doesn’t save the the changes for the preview.
Let me know if that’s not the issue.
Thanks for your reply.
The problem was when trying to save the post. I received the next warning:
“Warning: Missing argument 1 for post_head_get_files(), called in …blog/wp-content/plugins/postpage-headers/post-headers.php on line 92 and defined in …blog/wp-content/plugins/postpage-headers/post-headers.php on line 104″
So I’ve modified the file in line 92 giving the missing parameter: $post_ID
$data = post_head_get_files($post_ID);
This looks to be the solution. But I have a question: If no other people have notice this simple problem I had, How is it possible the script had been running for them with this missing parameter?
Thank you very much again for your work.
Probably a stupid question, but here goes:
Ok, so I upload a new stylesheet for the given post or page. Most of the changes I am going to want to make are simple things like switching the page background image, or changing the font colors.
Obviously I would not be changing the css names themselves, just the attributes.
So will this plugin override my themes normal css file?
example: current style says-
}
#header-nav-combo {
background:transparent url(images/imagexyz.png) repeat-x scroll 0 0;
but on my ‘custom page’ I want to replace that with
}
#header-nav-combo {
background:transparent url(images/imageABC.png) repeat-x scroll 0 0;
So does the #header-nav-combo from the stylesheet I upload and assign to the custom page take priority over my default stylesheet?
If you want to ensure that your costume CSS overrides your template CSS, I suggest adding the
!importantdeclaration.For example:
#header-nav-combo {background:transparent url(images/imageABC.png) repeat-x scroll 0 0 !important;
}
By default the post stylesheets are added using the
wp_enqueue_style()function, and because every theme is different, there’s no telling how the theme stylesheet is added and whether it would be placed before of after the new one.Therefore,
!importantis the safest way to go.