Wordpress Leaks

Having a recent posts carousel on your blog is a great way to make it more interactive for your visitors.

Recently I had a client ask me to make a recent posts carousel for their website. I said yeah sure, thinking there must be some kind of plugin I can find to do just that real quick. Boy was I wrong. I spent a long time trying to find one and the ones I found didn’t do what I wanted at all. I figured, with all this time wasting, I’ll just make one myself. Just gotta find a good base code. So that’s when I came upon carouFredSel. Here’s the link: http://caroufredsel.frebsite.nl/. I loved their examples and though it still didn’t do everything I wanted, like show a caption below the image, the functionality was exactly what I needed. So long story short, here are the details.

---

Step 1 Download carouFredSel

Alright, let’s start by going to http://caroufredsel.frebsite.nl/ and downloading the carousel code and copying the jquery.carouFredSel-5.5.0-packed.js file to your WordPress theme folder.

---

Step 2 Edit Your functions.php File

Next up, open up your functions.php file and add this little bit of code:

if ( function_exists( 'add_image_size' ) )  
	add_image_size( 'sliderimg', 200, 150, true );

Be sure to replace the 200 and 150 with your own dimensions. Save it and upload the file. After you upload it, in your post sidebar you’ll see a new option titled “Featured Image“. You can upload any image you want to use here and this will be the image that will display in the carousel. Also note that we’re calling it “sliderimg“. I’ll tell you why soon.

---

Step 3 Initialising carouFredSel and more for Your functions.php File

Make a new JavaScript file called wptuts-caroufredsel.js and put the following code inside, then copy it into your WordPress theme folder:

jQuery(function($) 
	$('#foo2').carouFredSel(
		prev: '#prev2',
		next: '#next2',
		auto: false,
		items: 3,
	);
});

Here is something else to take note of for later. #foo2 – this will be the id of the carousel we’ll be using. We’ll need this so we can style it in CSS. Also note the #prev2 and #next2 id’s for styling the previous and next buttons and lastly, the number 3 is how many items you want to show at a time. In this case it’s 3.

Now, open your functions.php file again and add the following code to load the JavaScript files:

function wptuts_load_caroufredsel() 
	// Enqueue carouFredSel, note that we specify 'jquery' as a dependency, and we set 'true' for loading in the footer:
	wp_register_script( 'caroufredsel', get_template_directory_uri() . '/js/jquery.carouFredSel-5.5.0-packed.js', array( 'jquery' ), '5.5.0', true );

	// For either a plugin or a theme, you can then enqueue the script:
	wp_enqueue_script( 'wptuts-caroufredsel', get_template_directory_uri() . '/js/wptuts-caroufredsel.js', array( 'caroufredsel' ), '', true );

add_action( 'wp_enqueue_scripts', 'wptuts_load_caroufredsel' );

Make sure to change the paths to wherever your JavaScript files are.

---

Step 4 Edit Your Page Template

Now let’s open up the page template you want the carousel to be shown in. Once you open it, wherever you want the carousel to be displayed, paste this code below:

	

		query('showposts=12');
		?>
		have_posts()) : $carouselPosts->the_post(); ?>

		

			
			

		

		
	

	


	prev
	next

Now let me explain before you go nuts. The first part of the block of code is the name of the class (for styling of course) I’m calling it list_carousel. Next you’ll see that #foo2 id I told you about earlier. Next is the query for posts:

I’m telling it to pull the latest 12 posts. That way, since I told it earlier to show 3 at a time, it can show 4 sets of 3 posts. But let’s say you want to be a little more specific and only show posts from a certain category. Then you’d use this code instead of the showposts code above:

What about tags you say? Well here you go:

Change “featured” to whatever tag you want to use. I’m also calling 12 posts and listing them in ascending order.

Confused yet? I Hope not. Ok, next on the main block of code above I’m pulling “sliderimg” the featured image of the post and also making it link to the actual post so of course when people click on the image, they’ll get taken to the post itself.

In my client’s case, they not only wanted to display an image in the carousel, they also wanted to display the title of the post itself. So below the image we’re displaying the post title, making it link to the post as well, and assigning a class to it called “slidertitle” so we can style that also.

*phew* Alright, at the very bottom are the previous and next buttons with the id’s prev2 and next2 that we stated in the JavaScript code earlier.

prev
next

Now that’s all explained, let’s move on!

---

Step 5 Style It With CSS

Well we do have it working now, but it doesn’t look anything like what we want… so open up your style.css file and paste this code and I’ll explain things below:

.list_carousel 
	height: 175px;
	margin: 0 auto;
	overflow: hidden;
	width: 660px;

.list_carousel ul 
	margin: 0;
	padding: 0;
	list-style: none;
	display: block;

.list_carousel li 
	font-size: 14px;
	color: #333;
	width: 200px;
	padding: 0;
	margin: 2px;
	display: block;
	float: left;

.list_carousel.responsive 
	width: auto;
	margin-left: 0;

.list_carousel .clearfix 
	float: none;
	clear: both;

.list_carousel a.prev 
	background: url("next-arrow-left.png") no-repeat scroll 0 0 transparent;
	display: block;
	height: 150px;
	position: relative;
	top: -174px;
	width: 50px;

.list_carousel a.next 
	background: url("next-arrow-right.png") no-repeat scroll 0 0 transparent;
	display: block;
	height: 150px;
	position: relative;
	left: 635px !important;
	top: -324px;
	width: 50px;

.list_carousel a.prev 

.list_carousel a.next 
	right: -29px;

.list_carousel a.prev.disabled, a.next.disabled 
	cursor: default;

.list_carousel a.prev span, a.next span 
	display: none;

#foo2 
	left: 20px;
	margin: 0 2px;
	position: relative;

Yeah it’s a big block of code. Haha! Sorry I had a lot that I wanted to do with it as you can see. Let me try to make this as painless as possible. If you want to tweak the width, change the 660px and 175px to your desired width and height for the carousel. Also with .list_carousel li you can change the post title colors and width of each item. The .list_carousel a.prev and .list_carousel a.next classes are where the previous and next arrow images are being displayed. This was just how I needed it to look of course. Styling is up to you.

---

Here’s a Screenshot of the Finished Product

As well as a link to a live version: http://www.kstudiofx.com/carousel-tutorial

[Update:] This tutorial originally used query_posts(), which is bad practice in this context (as noted by Chip Bennett in the comments). We’ve updated the code to more appropriately use WP_Query().

Original from: http://wp.tutsplus.com/tutorials/theme-development/displaying-posts-in-a-carousel/

If you are creating a WordPress theme to power a website that will be updated by individuals without any knowledge of HTML, you can add custom styles to the visual TinyMCE editor and ensure that elements are properly formatted.

---

As a web designer or developer, you can create custom styles for various elements in the content of a WordPress website. These styles can be easily added by editing the HTML. What if the end-user or author of the website is not familiar with HTML? What if the author forgot which element was required for the desired style?

Adding custom styles to the WYSIWYG editor (TinyMCE) interface will allow the user to style an element with appropriate custom CSS without having to remember any code. Simply select the element or text and apply the relevant format using the style dropdown menu available in the visual editor. It is fairly easy to add a ‘Styles’ dropdown to the ‘Kitchen Sink’ in WordPress. Adding custom styles to the visual editor in WordPress is perfect for adding elements such as warning messages, buttons and testimonials.

Note: Below we’ll be creating variations of some open source code called TinyMCE Kit from the WordPress plugin repository which is released under the GPL v.2 license.

---

Quick Fix

Adding custom styles to the TinyMCE editor in WordPress is a fairly easy process. Below is a simple plug-in that adds custom styles mentioned in an array class to the visual editor in the ‘Styles’ drop-down. The CSS styles are placed in a file in the plug-in folder. This CSS stylesheet is called in the visual editor as well as the front-end of the website.

The code has been commented to make it easy to understand. In the first part, we make use of a TinyMCE function to add the custom stylesheet to the visual editor so that all styles are visible there. The next part adds the ‘Styles’ drop-down, which is populated in the subsequent step. The ‘Styles’ dropdown ('styleselect') is added to the second row of buttons (theme_advanced_buttons2_add) at the beginning of the row (_before). This drop-down is then populated with custom styles, which are added through the $classes array instead of writing directly in the format prescribed in the TinyMCE documentation. In the final part, the custom stylesheet is added to the front-end using the wp_enqueue_scripts function.

 'warning',
        __('Notice','textdomain') => 'notice',
        __('Download','textdomain') => 'download',
        __('Testimonial','textdomain') => 'testimonial box',
    );

    $class_settings = '';
    foreach ( $classes as $name => $value )
        $class_settings .= "$name=$value;";

    $settings['theme_advanced_styles'] .= trim($class_settings, '; ');
    return $settings;
} 

add_filter('tiny_mce_before_init', 'tuts_mcekit_editor_settings');

/*
 * Add custom stylesheet to the website front-end with hook 'wp_enqueue_scripts'
 * Enqueue the custom stylesheet in the front-end
 */
add_action('wp_enqueue_scripts', 'tuts_mcekit_editor_enqueue');
function tuts_mcekit_editor_enqueue() 
  $StyleUrl = plugin_dir_url(__FILE__).'editor-styles.css';
  wp_enqueue_style( 'myCustomStyles', $StyleUrl );

?>

---

Elaborate Styling

The above solution for adding custom styles to the WordPress visual editor is quick, but it has some limitations. The above code will not limit a style to a specific HTML element. It will also not apply a class to an existing block element.

We can remove these limitations and make our custom styles drop-down more powerful by putting the styles in arrays using TinyMCE syntax to define the formats. After this, we encode the styles as JSON and then add them to the TinyMCE settings. The rest of the plug-in codes remain unchanged.

In TinyMCE, each format has a set of parameters that you can specify. (Source: TinyMCE – formats)

• inline – Name of the inline element to produce for example “span”. The current text selection will be wrapped in this inline element.
• block – Name of the block element to produce for example “h1″. Existing block elements within the selection gets replaced with the new block element.
• selector – CSS 3 selector pattern to find elements within the selection by. This can be used to apply classes to specific elements or complex things like odd rows in a table.
• classes – Space separated list of classes to apply the the selected elements or the new inline/block element.
• styles – Name/value object with CSS style items to apply such as color etc.
• attributes – Name/value object with attributes to apply to the selected elements or the new inline/block element.
• exact – Disables the merge similar styles feature when used. This is needed for some CSS inheritance issues such as text-decoration for underline/strikethough.
• wrapper – State that tells that the current format is a container format for block elements. For example a div wrapper or blockquote.

Here is the modified plug-in for adding custom styles to the WordPress visual editor.

 'Download Link',
            'selector' => 'a',
            'classes' => 'download'
            ),
        array(
            'title' => 'Testimonial',
            'selector' => 'p',
            'classes' => 'testimonial',
        ),
        array(
            'title' => 'Warning Box',
            'block' => 'div',
            'classes' => 'warning box',
            'wrapper' => true
        ),
        array(
            'title' => 'Red Uppercase Text',
            'inline' => 'span',
            'styles' => array(
                'color' => '#ff0000',
                'fontWeight' => 'bold',
                'textTransform' => 'uppercase'
            )
        )
    );

    $settings['style_formats'] = json_encode( $style_formats );

    return $settings;



/* Learn TinyMCE style format options at http://www.tinymce.com/wiki.php/Configuration:formats */

/*
 * Add custom stylesheet to the website front-end with hook 'wp_enqueue_scripts'
 */
add_action('wp_enqueue_scripts', 'tuts_mcekit_editor_enqueue');

/*
 * Enqueue stylesheet, if it exists.
 */
function tuts_mcekit_editor_enqueue() 
  $StyleUrl = plugin_dir_url(__FILE__).'editor-styles.css'; // Customstyle.css is relative to the current file
  wp_enqueue_style( 'myCustomStyles', $StyleUrl );

?>

So you have an plug-in to add custom styles in the WordPress visual editor. To add your own styles, you need to replace the existing style formats array with your own. Of course, you will have to add the styles to the stylesheet in the plug-in directory as well. If you need to use any image as background, you can create an image folder and reference the background image from there.

If you wish to use this in your theme, just add the plug-in code to the theme’s functions.php. Make sure to replace plugin_dir_url(__FILE__) with get_stylesheet_directory_uri() and reference the appropriate stylesheet from the theme folder.

---

Conclusion

Creative use of custom styles in the visual editor will make formatting the articles/posts and pages easier and a lot more fun. It will also make it easy for your clients to manage their websites and add life to it by including visually exciting content. By adding theme options, you can extend this plug-in so that the user can create their own custom styles for use in the visual editor.

All the best! Let us know in the comments how you would use this code and how you would extend it in your own usage.

Original from: http://wp.tutsplus.com/tutorials/theme-development/adding-custom-styles-in-wordpress-tinymce-editor/