This entry is part 4 of 7 in the Writing Your First WordPress Plugins, Basic to Advanced Series
- How to Begin Writing Your First WordPress plugin
- Structuring Your First WordPress Plugin
- Writing Your First WordPress Plugin Part 3
- Writing Your First WordPress Plugin Part 4
- Writing Your First WordPress Plugin Part 5
- Writing Your First WordPress Plugin Part 6
- Writing Your First WordPress Plugin Part 7 – Final
In part four of Writing Your First WordPress Plugin, I demonstrate how to load style sheets with your plugin. I also walk you through some best practices in terms of efficiency in regards to when you should, and should not, load styles/scripts with your plugin.
There are two functions that I have modified from part two: first is the display function that shows the message at the end of our posts, and second is a new function that loads our newly created style sheet.
The new additional content message function:
1 2 3 4 5 6 7 8 9 | function mfwp_add_content($content) { if(is_singular()) { $extra_content = '<p class="twitter-message">Follow me on <a href="http://twitter.com/pippinsplugins">Twitter</a></p>'; $content .= $extra_content; } return $content; } add_filter('the_content', 'mfwp_add_content'); |
The function that loads our css:
1 2 3 4 5 6 | function mfwp_load_scripts() { if(is_singular()) { wp_enqueue_style('mfwp-styles', plugin_dir_url( __FILE__ ) . 'css/plugin_styles.css'); } } add_action('wp_enqueue_scripts', 'mfwp_load_scripts'); |
Note, the newly created CSS file is located inside of includes/css in our plugin folder.
The new CSS file contents:
1 | .twitter-message { color: red; border: 1px solid #ccc; padding: 5px; } |
I am following you. You really gave me the appetite to start a plugin that I was dreaming of!
Excellent! Glad I’ve inspired you!
I am waiting for the rest of the series!
Next part should be coming soon.
Hi Pippin,
This is my first ever stint with plugin development having not so strong php background. But, I am following your series and finding now plugin-development not so difficult. Actually, I am stuck at a point(part 4)where we load the css files in the scripts.php. Either my stylesheet is not loading because the style I applied does not reflect there. I used proper file path names, file name is also correct, checked them several times.Dunno what the problem might be?
@GP – Plugin development is definitely not that difficult. It seems a lot more difficult than it really is. Hopefully this series will help other people as well who believe it’s more difficult than it is.
Can you show me the code you have for the script loading? Use http://snippi.com and paste the URL here.
Hey Pippin, you know what, I figured that out. It was my silly mistake of misspelling of get_options() instead of get_option in the main plugin file.
Thnx Anyways.
And, Thnx for your serial tutorials. I have successfully developed my first ever plugin in wp.A treat for beginners like me.
Yep, that will cause it 🙂
Hi Pippin,My form data which i fill on the plugins admin area(plugins settings page) shows ‘Setting Saved’ on clicking Save button. But, after that, the text field gets empty and nothing gets affected, I mean when I click on Follow me on Twitter , it takes me to same area which I hard coded before. So, i mean to say that plugin is not saving the data in the database.Cud u tell me why and also, where the form info goes to get saved(which table particularly).
@GP – Can you please post the code from your settings page into a pastebin.com and put the link here?
Pippin I am a long time Joomla extension developer coming over to WordPress for a few projects, your methodology is good, and structuring things the way you have, has been useful.
One thing I would say is wouldn’t it be better to put conditional statements around the add_actions that way you wont be jumping into additional functions, hooks and calls wen they wont be used.
I mean I know you use if(is)singular()) inside the function, but wouldn’t it be best to avoid the overhead of loading the hook and function if it isn’t needed.
It may only save you a tiny, tiny bit of performance, but I know that on one of my sites, every bit of performance I can squeeze out of it is of the utmost importance due to the activity on the site.
Just some thoughts and would like to hear your thouights
Daniel, you’re definitely right. I chose to not use add_action() hooks as much in this series because they can be very difficult for beginners to grasp a good understanding of. If this were not for beginners, then I would definitely feel that doing it with add_action() hooks would be better.
no problem thanks for that.
One thing I am having trouble finding and understanding is how to output plugin data to pages of their own.
I am writing a twist on a link directory, I have all the database and admin side all ready to go and working perfectly. However I need to have a page for this to be output to, generally in Joomla you have the MVC which I tend to loathe and find it hinders rapid development rather than helps it.
Do you have a tutorial or can you point me towards one that will help me create the user side of the plugin, with front-end user interaction that is not dependent on the wordpress custom post types?
You will want to use short codes. I did a very basic tutorial here: https://pippinsplugins.com/add-a-short-code-to-your-plugin/
Thanks a bunch mate, great work. The plugin I am creating is a private one but once the site is up I’ll shoot you a link.
Fantastic tutorials … clear and great for beginners. Enjoying watching the vids and learning without a lot of frowning. Thanks Pippin!
Great! I’m glad you’re enjoying them!
Hi, where is the final code? I am unable to download… please help
It’s at the bottom of the post, where it says “Download WIP Plugin”.
Great tuts Pippin, I am having trouble adding a predefined function to the top of the content and top ‘n’ bottom, it appears to work and then a few different plugins/ themes show my links at the top of the page as well. Any thoughts what could cause this? I am using for to add to top
function m8m_top($content){
if(is_single() && is_main_query()){
$output = get_link_code();//predefined function
$content .= $output;
}
return $content;
}
add_filter(‘the_content’, m8m_top’);
What happens with that code? Anything?
Pippin can you help me little bit in writting a plugin.i want to write a sign up plugin
Wonderful tutorial!!!!!!!!!!!!!!!!
I’m just Clapping for you.
Hey Pippins,
thats a fantastic tutrial for beginners like me.
Thanks a lot.
By the way, in both the code segments shown above, you have used
if(is_singular) {
}
function. I downloaded your zip file and tried and got no output as well as no errors.
I, then carefully checked in a line by line execution of the codes, by commenting them, i found it worked fine when the if condition was slightly altered like this:
if(!is_singular) {
/…..
/…..
}
Could you please clarify me what could be the possibilty that lead to this alteration?
Thanks again.. 🙂
if(!is_singular) { should if(!is_singular()) {
lol
Hi, pippin,
I am new for a plugin development for me Your videos are very useful for learners.
When am developing the plugin as u has shown in the video the code is displaying in the top of my website. Can u help me out of this one?
Thankyou
Could you show me what your current plugin code is? You can create a gist and post it there then share a link here to it.
Hi,
what is this mfwp?
mfwp_settings e.t.c