featplug plugin and code in worng place

[Rarst]

I am considering this plugin for my header:
http://featplug.huseyinuslu.net/

It outputs reaaaaly non-valid code but I can fix most of that. What I have trouble with is that it places some styling (via link and style tags) where it's called instead of inserting it into head. There are some variables generated on-the-fly in that styling so I can't just cut it from code and paste in my theme.

Any ideas? Is there something like function stuff-this-into-head?

[sarahG]

You can use a hook to put the styles into the header. Create a function to output the styles then load it into the header using

add_action('wp_head', 'function_name');

It should work, but I've never loaded styles on the front end as it's not a plugin developer's place to decide on the styles really, merely suggest them in the readme. To be honest, I'd remove the styles and put them into your own theme stylesheet.

[Rarst]

Disclaimer - I am cluless in PHP and WordPress inner stuff, working on "this looks like it can be copy/pasted there" level.

Problem with moving style is following - it generates styling on the fly with dimensions of block. I assume for ensuring that several block can be used on page - when styling and markup are generateed they are appended with randomly-generated number so each styling controls specific block.


<?php
$instance=rand();
?>

<script src="<?php echo $this->template_path; ?>/scripts/mootools.v1.11.js" type="text/javascript"></script>
<script src="<?php echo $this->template_path; ?>/scripts/jd.gallery.js" type="text/javascript"></script>
<link rel="stylesheet" href="<?php echo $this->template_path; ?>/css/jd.gallery.css" type="text/css" media="screen">

<style type="text/css">
#myGallery<?php echo $instance; ?>
{
width: <?php echo $this->output_width; ?>px !important;
height: <?php echo $this->output_height; ?>px !important;
}
</style>


Hmm, maybe instead of moving styling block I could inline it into block generation.

Edit: ok, it's fixed and validating but I'd still appreciate some links on adding stuff to header and footer :) May be optimized a bit. Search at WordPress docs sucks. :(

[sarahG]

Ah ok, but even then. It should generate class or ids and allow you to control the styling yourself. Still, besides that, to understand how to do this you need to read up on the plugin API and filters/hooks - http://codex.wordpress.org/Plugin_API

In a nutshell, when you create a plugin you have a function to do the output eg.

function get_recent_comments() {
// the code goes here to do the output
}

Then in your theme file eg. in the sidebar you'd have

<?php get_recent_comments() ?>

If you wanted to add in styling for this you could create a section function in the plugin file eg.

function grc_styles() {
echo "<style type='css/text'>\n";
echo "ul.get_rec_comm { margin: 0; padding: 0; list-style: none; }\n";
echo "</style>\n";
}

then in your plugin file you'd add the hook I mentioned earlier, which simply says 'when the wp_head() function loads, execute this function too', which of course will then echo out the styling. So then you'd add into your plugin file

add_action('wp_head', 'grc_style');

Then you'd end up with a file a bit like

<?php
// plugin comment stuff here

add_action('wp_head', 'grc_style');

function grc_styles() {
echo "<style type='css/text'>\n";
echo "ul.get_rec_comm { margin: 0; padding: 0; list-style: none; }\n";
echo "</style>\n";
}

function get_recent_comments() {
// the code goes here to do the output
}


Basically, you can use a hook to do the work for you, which for theme developers they depend on eg. the WP stats requires wp_footer() to be in the footer.php theme file, or you can manually add the functions into your theme, which you obviously have to do with the recent comments function as it's up to you where you put it. In theory you could leave out the add_action line and just add the function to echo out the styles into your header.php file eg.

<?php
// other code here for the stylesheet, scripts etc.
grc_styles();
wp_head();
?>
</head>

Hopefully that makes a bit more sense?!

[Rarst]

Yeah, thanks a lot! :) I needed that function > action > hook sequence explained, when people talk about that it's like they assume everyone knows that.