Sunday, September 11, 2011

AnythingSlider Themes

I put together ten more themes for AnythingSlider! YAY!


  • All theme files are meant to be used independently from the plugin's "anythingslider.css" file. So you only need to include one of these theme files.
  • There is an additional stylesheet named "wrappers.css" which only targets the wrapper around the slider. It is independent of the theme files and meant to be used by extracting out any specific wrapper style you would like to use.
  • The first default theme is meant to be used as the base to make your own theme, but without using images or css3.
  • The second default theme is also meant to be used as a base for your own theme, but includes images (no css3 though)
  • The rest of the themes are free to use.
If you would like to contribute a theme, either fork the repository, add your theme then send me a pull request or just email me the files - my gmail account, user name is wowmotty.

Thanks and enjoy!

Wednesday, August 17, 2011

AnythingSlider FX Builder

So, to make it easier to figure out how to add FX to AnythingSlider, I put together a bookmarklet (get it from here) that allows you to build/play with the effects live :)



If you need instructions, I have some very basic information in the readme file on github.

Right now, it's still in beta and it only works on the first slider on the page. I'd appreciate any feedback on what could be improved, changed, or if you find any problems.

Tuesday, July 12, 2011

Adding WordPress Quicktag Buttons to a WP Plugin

Disclaimer: I am a total noob when it comes to WordPress and WordPress plugins.

I was wondering how difficult it would be to add a button to the WordPress Post Editor. I've seen a few plugins do it, but I discovered that they had to add their own version of TinyMCE to do it.

So I searched around on the internet, and found a few methods. But they either stopped working or required you to edit your quicktags.js file to work, then again after each Wordpress update. So I looked into it and I found a solution that works with the current version 3.2 and hopefully future versions without requiring you to edit or replace the quicktags file.

Before

After

Note: This code is intended to be added inside your WordPress plugin. Like I said, I'm a total noob with WordPress so I'm not sure if it would work outside of a plugin.

CSS - This CSS should be outside of the php tags
<style>
/* Simulate the input buttons styles */
#ed_toolbar button {
 display: inline-block;
 vertical-align: middle;
 margin: 0;
 padding: 0;
 min-width: 26px;
 height: 24px;
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 border-radius: 3px;
 border: #c3c3c3 1px solid;
 background: url() repeat-x;
}
#ed_toolbar button:hover {
 border: #aaa 1px solid;
 background: #ddd;
}
/* toolbar button images in span */
#ed_toolbar button span {
 display: inline-block;
 background: transparent no-repeat center center;
 padding: 4px 2px;
 width: 16px;
 height: 16px;
}

/* toolbar custom button image */
#_custom span {
 background-image: url(/wp-content/plugins/my-plugin-directory/my-plugin-icon.png);
}
</style>

PHP - Add this to your plugin php
<?php
add_action('admin_footer', 'my_plugin_add_button');

function my_plugin_add_button(){
echo <<<EOT
<script>/* <![CDATA[ */
var j, n,
 last = edButtons.length,
 tbar = '';

// add a new editor button as follows:
// edButtons[edButtons.length] = new edButton('BUTTON ID', 'BUTTON TEXT', 'OPENING TAG', 'CLOSING TAG', 'ACCESSKEY');
// Example: edButtons[edButtons.length] = new edButton('_h1', 'H1', '<h1>', '</h1>', -1);
edButtons[edButtons.length] = new edButton('_h1', 'h1', '<h1>', '</h1>', "h");
edButtons[edButtons.length] = new edButton('_h2', 'h2', '<h2>', '</h2>', -1);
edButtons[edButtons.length] = new edButton('_h3', 'h3', '<h3>', '</h3>', -1);
edButtons[edButtons.length] = new edButton('_h4', 'h4', '<h4>', '</h4>', -1);
edButtons[edButtons.length] = new edButton('_h5', 'h5', '<h5>', '</h5>', -1);
edButtons[edButtons.length] = new edButton('_h6', 'h6', '<h6>', '</h6>', -1);
edButtons[edButtons.length] = new edButton('_custom', '<button>', '[myplugin_short_code]', '', -1);

// Don't change anything below
// ***************************
for ( j = last; j < edButtons.length; j++) {
 n = edButtons[j];
 if (/<button>/g.test(n.display)) {
  // matched opening tag => add a button
  tbar += '<button id="' + n.id + '" type="button" class="ed_button" onclick="edInsertTag(edCanvas, ' + j + ');"><span></span></button>';
 } else {
  // add an input
  tbar += '<input type="button" id="' + n.id + '" accesskey="' + n.access + '" class="ed_button" onclick="edInsertTag(edCanvas,' + j + ');" value="' + n.display.replace(/\"/g,'\"') + '" />';
 }
}
document.getElementById('ed_toolbar').innerHTML += tbar;
/* ]]> */</script>
EOT;
}
?>