In this post we are glad to release Smashing Multimedia , a unique, flexible and advanced WordPress theme for artists, photographers, podcasters, designers and users. The theme was designed by Sarah Neuber especially for Smashing Magazine and its readers. Download the theme for free! Smashing Multimedia was designed especially for podcasters, photographers and users who can now easily embed videos and images, rate them and showcase them in their own WordPress-based blog. It has a parent theme and an easily customizable child theme. This Wordpress Theme comes with layered PSD source files , a visual help guide and is fully localized ready for you to translate it into your target language. The theme is released under GPL. You can use it for all your projects for free and without any restrictions. Please link to this post if you want to spread the word. You may modify the theme as you wish. demo large preview (.jpg) installation guide and documentation (.zip) download the theme (.zip, 2 Mb) download the PSD-source (.zip) Features Easy media embed method , with shortcodes in the post content area or use a media plugin of your choice (supported are YouTube, Vimeo, Google Video, Blip.tv, Veoh, Viddler and Revver), Feature any post, any category – the easy way – just make them sticky! Why restrict yourself to one featured category when you can have the freedom to pick and choose any post from any category to feature! Choose and put together your Site’s Main Navigation without touching the code in the template files. All available options are right there for you included in the Theme Options. Choose and put together your Site’s Category Navigation (appears in sidebar) without touching the code in the template files. Again, all available options are right there for you included in the Theme Options. Choose the type of splash image for your media posts: sliding or static splash image. Do the same indepently for Category pages. Choose the type of post teaser (the usual excerpt or text from the content) to appear on multible post pages and customize it’s word limit through theme options. The word limit can be adjusted independently for sticky (featured) posts or multimedia posts on the front page and on category pages. Subpages appear dynamically in sidebar when created Related posts : if there are any, appear in the single page sidebar. How many should appear is set by you from the theme options 8 Independent widget areas : front page seperator (1) just below the featured area, front page (1 – index), category(1), archive (1 – daily, monthly, yearly, author and tag archives share the same widgets), single (1), page (1), search (1), 404 (1). Security : 2 common sense security precautions already hooked in just for you; hidden login page error feedback and hidden WordPress version number, Preventing Spam : a useful little function to deny Comment Posting to No Referrer Requests Extra goodies : cformsII styles, wp-Pagenavi, wp-PostRatings, WP125: Easy 125×125 Ad Management For WordPress styles included, show your last tweet (shows on the front page and can be removed and replaced by any plugin of your choice so in other words you are not stuck with it if you don’t like it), Social share media, Feedburner Rss and Email, Follow on Twitter, “Give it a Tweet” call to action to your readers, styles for threaded comments (if enabled), seperated comments and trackbacks (appear in animated dropdown), styled admin comments, custom avatar image for when your users don’t have their own! …and even more features! (pdf) Further screenshots The slide show navigation at the top of the theme in the Multimedia WordPress Theme. Category view in the Multimedia WordPress Theme. The sidebar in the Multimedia WordPress Theme. Thank you very much, Sarah! We really appreciate your efforts. © Smashing Editorial for Smashing Magazine , 2009. | Permalink | 33 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: photography , podcasting , portfolio , theme , video , wordpress
Archive for category wordpress
In this post we are glad to release Smashing Multimedia , a unique, flexible and advanced WordPress theme for artists, photographers, podcasters, designers and users. The theme was designed by Sarah Neuber especially for Smashing Magazine and its readers. Download the theme for free! Smashing Multimedia was designed especially for podcasters, photographers and users who can now easily embed videos and images, rate them and showcase them in their own WordPress-based blog. It has a parent theme and an easily customizable child theme. This Wordpress Theme comes with layered PSD source files , a visual help guide and is fully localized ready for you to translate it into your target language. The theme is released under GPL. You can use it for all your projects for free and without any restrictions. Please link to this post if you want to spread the word. You may modify the theme as you wish. demo large preview (.jpg) installation guide and documentation (.zip) download the theme (.zip, 2 Mb) download the PSD-source (.zip) Features Easy media embed method , with shortcodes in the post content area or use a media plugin of your choice (supported are YouTube, Vimeo, Google Video, Blip.tv, Veoh, Viddler and Revver), Feature any post, any category – the easy way – just make them sticky! Why restrict yourself to one featured category when you can have the freedom to pick and choose any post from any category to feature! Choose and put together your Site’s Main Navigation without touching the code in the template files. All available options are right there for you included in the Theme Options. Choose and put together your Site’s Category Navigation (appears in sidebar) without touching the code in the template files. Again, all available options are right there for you included in the Theme Options. Choose the type of splash image for your media posts: sliding or static splash image. Do the same indepently for Category pages. Choose the type of post teaser (the usual excerpt or text from the content) to appear on multible post pages and customize it’s word limit through theme options. The word limit can be adjusted independently for sticky (featured) posts or multimedia posts on the front page and on category pages. Subpages appear dynamically in sidebar when created Related posts : if there are any, appear in the single page sidebar. How many should appear is set by you from the theme options 8 Independent widget areas : front page seperator (1) just below the featured area, front page (1 – index), category(1), archive (1 – daily, monthly, yearly, author and tag archives share the same widgets), single (1), page (1), search (1), 404 (1). Security : 2 common sense security precautions already hooked in just for you; hidden login page error feedback and hidden WordPress version number, Preventing Spam : a useful little function to deny Comment Posting to No Referrer Requests Extra goodies : cformsII styles, wp-Pagenavi, wp-PostRatings, WP125: Easy 125×125 Ad Management For WordPress styles included, show your last tweet (shows on the front page and can be removed and replaced by any plugin of your choice so in other words you are not stuck with it if you don’t like it), Social share media, Feedburner Rss and Email, Follow on Twitter, “Give it a Tweet” call to action to your readers, styles for threaded comments (if enabled), seperated comments and trackbacks (appear in animated dropdown), styled admin comments, custom avatar image for when your users don’t have their own! …and even more features! (pdf) Further screenshots The slide show navigation at the top of the theme in the Multimedia WordPress Theme. Category view in the Multimedia WordPress Theme. The sidebar in the Multimedia WordPress Theme. Thank you very much, Sarah! We really appreciate your efforts. © Smashing Editorial for Smashing Magazine , 2009. | Permalink | 34 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: photography , podcasting , portfolio , theme , video , wordpress
In this post we are glad to release Smashing Multimedia , a unique, flexible and advanced WordPress theme for artists, photographers, podcasters, designers and users. The theme was designed by Sarah Neuber especially for Smashing Magazine and its readers. Download the theme for free! Smashing Multimedia was designed especially for podcasters, photographers and users who can now easily embed videos and images, rate them and showcase them in their own WordPress-based blog. It has a parent theme and an easily customizable child theme. This Wordpress Theme comes with layered PSD source files , a visual help guide and is fully localized ready for you to translate it into your target language. The theme is released under GPL. You can use it for all your projects for free and without any restrictions. Please link to this post if you want to spread the word. You may modify the theme as you wish. demo large preview (.jpg) installation guide and documentation (.zip) download the theme (.zip, 2 Mb) download the PSD-source (.zip) Features Easy media embed method , with shortcodes in the post content area or use a media plugin of your choice (supported are YouTube, Vimeo, Google Video, Blip.tv, Veoh, Viddler and Revver), Feature any post, any category – the easy way – just make them sticky! Why restrict yourself to one featured category when you can have the freedom to pick and choose any post from any category to feature! Choose and put together your Site’s Main Navigation without touching the code in the template files. All available options are right there for you included in the Theme Options. Choose and put together your Site’s Category Navigation (appears in sidebar) without touching the code in the template files. Again, all available options are right there for you included in the Theme Options. Choose the type of splash image for your media posts: sliding or static splash image. Do the same indepently for Category pages. Choose the type of post teaser (the usual excerpt or text from the content) to appear on multible post pages and customize it’s word limit through theme options. The word limit can be adjusted independently for sticky (featured) posts or multimedia posts on the front page and on category pages. Subpages appear dynamically in sidebar when created Related posts : if there are any, appear in the single page sidebar. How many should appear is set by you from the theme options 8 Independent widget areas : front page seperator (1) just below the featured area, front page (1 – index), category(1), archive (1 – daily, monthly, yearly, author and tag archives share the same widgets), single (1), page (1), search (1), 404 (1). Security : 2 common sense security precautions already hooked in just for you; hidden login page error feedback and hidden WordPress version number, Preventing Spam : a useful little function to deny Comment Posting to No Referrer Requests Extra goodies : cformsII styles, wp-Pagenavi, wp-PostRatings, WP125: Easy 125×125 Ad Management For WordPress styles included, show your last tweet (shows on the front page and can be removed and replaced by any plugin of your choice so in other words you are not stuck with it if you don’t like it), Social share media, Feedburner Rss and Email, Follow on Twitter, “Give it a Tweet” call to action to your readers, styles for threaded comments (if enabled), seperated comments and trackbacks (appear in animated dropdown), styled admin comments, custom avatar image for when your users don’t have their own! …and even more features! (pdf) Further screenshots The slide show navigation at the top of the theme in the Multimedia WordPress Theme. Category view in the Multimedia WordPress Theme. The sidebar in the Multimedia WordPress Theme. Thank you very much, Sarah! We really appreciate your efforts. © Smashing Editorial for Smashing Magazine , 2009. | Permalink | 37 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: photography , podcasting , portfolio , theme , video , wordpress
Hooks are very useful in WordPress. They allow you to “hook” a custom function to an existing function, which allows you to modify WordPress’ functionality without editing core files. In this article, we have compiled 10 extremely useful ready-to-use WordPress hooks, along with examples and coding explanations. Want to learn more about CSS coding and web design? Take a look at our upcoming Smashing Book ( $23.90 $29.90 , available worldwide). Pre-order now with 20% discount! What Is A Hook? To achieve a particular effect on a WordPress blog, you have to modify how WordPress works. Some of these modifications are made to what WordPress developers call “core files,” files required by WordPress to work properly. But modifying core files is always a bad idea. It may create a security loophole. Also, you will have lost the modification when you upgrade your WordPress installation. Still, developers need to overwrite some of WordPress’ functionality, which is why WordPress provides the Plugin API . Hooks are one of the main building blocks of WordPress plug-ins. Almost every plug-in uses a hook to overwrite WordPress’ core functionality. How to Use Hooks on Your WordPress Blog Unless you’re writing a plug-in, you would write hooks in the functions.php file. This file is located in the wp-content/themes/yourtheme directory. A hook, as you would expect, “hooks” one function to another. For example, you could write a custom function and attach it to one of WordPress’ core functions: add_action ( ‘publish_post’, ‘myCustomFunction’ ); In this example, we hook our own custom function to WordPress’ publish-post function, which means that every time WordPress executes the publish-post function, it will also execute this hooked function. Of course, we can also remove hooks using the remove_action() function: remove_action ( ‘publish_post’, ‘myCustomFunction’ ); Hooks resources: WordPress plugin API Codex page Adam Brown’s hook database Hooks from WpRecipes 1. Disable WordPress’ Automatic Formatting The problem . You have probably noticed that, by default, WordPress converts normal quotes to “curly” quotes, and makes other little formatting changes when a post is displayed. This is very cool for people who publish normal content, but anyone who uses their blog to discuss code will be annoyed because, when pasted in a text editor, code with curly quotes returns syntax errors. The solution . Simply paste the following code in your functions.php file: function my_formatter($content) { $new_content = ”; $pattern_full = ‘{([raw].*?[/raw])}is’; $pattern_contents = ‘{[raw](.*?)[/raw]}is’; $pieces = preg_split($pattern_full, $content, -1, PREG_SPLIT_DELIM_CAPTURE); foreach ($pieces as $piece) { if (preg_match($pattern_contents, $piece, $matches)) { $new_content .= $matches[1]; } else { $new_content .= wptexturize(wpautop($piece)); } } return $new_content; } remove_filter(’the_content’, ‘wpautop’); remove_filter(’the_content’, ‘wptexturize’); add_filter(’the_content’, ‘my_formatter’, 99); Once that’s done, you can use the [raw] shortcode in your posts: [raw]This text will not be automatically formatted.[/raw] Code explanation . Our first step here was to create a function that uses a regular expression to find the [raw] shortcode in your posts’ content. Then we hook our my_formatter() function to WordPress’ the_content() function, which means that my_formatter() will now be automatically called every time the_content() is called. To remove the automatic formatting, we use the remove_filter() function, which lets you delete a hook on a specific function. Source: Disable WordPress automatic formatting on posts using a shortcode 2. Detect The Visitor’s Browser Using A Hook The problem . Cross-browser compatibility is probably the most common problem in Web development. You will save yourself a lot of headaches if you are able to detect the browsers that people use to visit your website and then create a custom class wrapped in the body tag. Few people are aware of it, but WordPress can already detect browsers, and a few global variables are available for us to use. The solution . Nothing hard here: just paste the code below in your functions.php file, then save the file and you’re done! <?php add_filter(’body_class’,'browser_body_class’); function browser_body_class($classes) { global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone; if($is_lynx) $classes[] = ‘lynx’; elseif($is_gecko) $classes[] = ‘gecko’; elseif($is_opera) $classes[] = ‘opera’; elseif($is_NS4) $classes[] = ‘ns4′; elseif($is_safari) $classes[] = ’safari’; elseif($is_chrome) $classes[] = ‘chrome’; elseif($is_IE) $classes[] = ‘ie’; else $classes[] = ‘unknown’; if($is_iphone) $classes[] = ‘iphone’; return $classes; } ?> Once you have saved the file, the function will automatically add a CSS class to the body tag, as shown in the example below: <body class=”home blog logged-in safari”> Code explanation . WordPress has global variables that return true if a visitor is using a particular browser. If the visitor’s browser is Google Chrome, the $is_chrome variable will return true . This is why we create the browser_body_class() function, which returns the name of the visitor’s browser. Once that’s done, we just hook the function to WordPress’ body_class() function. Sources: Browser Detection and the body_class() Function How to detect the visitor’s browser within WordPress 3. Define Default Text In TinyMCE The problem . Many bloggers almost always use the same layout for their blog posts. Posts on my own blog WpRecipes.com are always displayed the same way: some text, some code and then some more text. What about saving time by forcing tinyMCE (WordPress’ visual editor) to display default text? The solution . Once again, hooks are the solution. Just open your functions.php file, paste the code and let the hooks work their magic! <?php add_filter(’default_content’, ‘my_editor_content’); function my_editor_content( $content ) { $content = “If you enjoyed this post, make sure to subscribe to my rss feed.”; return $content; } ?> Code explanation .
Hooks are very useful in WordPress. They allow you to “hook” a custom function to an existing function, which allows you to modify WordPress’ functionality without editing core files. In this article, we have compiled 10 extremely useful ready-to-use WordPress hooks, along with examples and coding explanations. Want to learn more about CSS coding and web design? Take a look at our upcoming Smashing Book ( $23.90 $29.90 , available worldwide). Pre-order now with 20% discount! What Is A Hook? To achieve a particular effect on a WordPress blog, you have to modify how WordPress works. Some of these modifications are made to what WordPress developers call “core files,” files required by WordPress to work properly. But modifying core files is always a bad idea. It may create a security loophole. Also, you will have lost the modification when you upgrade your WordPress installation. Still, developers need to overwrite some of WordPress’ functionality, which is why WordPress provides the Plugin API . Hooks are one of the main building blocks of WordPress plug-ins. Almost every plug-in uses a hook to overwrite WordPress’ core functionality. How to Use Hooks on Your WordPress Blog Unless you’re writing a plug-in, you would write hooks in the functions.php file. This file is located in the wp-content/themes/yourtheme directory. A hook, as you would expect, “hooks” one function to another. For example, you could write a custom function and attach it to one of WordPress’ core functions: add_action ( ‘publish_post’, ‘myCustomFunction’ ); In this example, we hook our own custom function to WordPress’ publish-post function, which means that every time WordPress executes the publish-post function, it will also execute this hooked function. Of course, we can also remove hooks using the remove_action() function: remove_action ( ‘publish_post’, ‘myCustomFunction’ ); Hooks resources: WordPress plugin API Codex page Adam Brown’s hook database Hooks from WpRecipes 1. Disable WordPress’ Automatic Formatting The problem . You have probably noticed that, by default, WordPress converts normal quotes to “curly” quotes, and makes other little formatting changes when a post is displayed. This is very cool for people who publish normal content, but anyone who uses their blog to discuss code will be annoyed because, when pasted in a text editor, code with curly quotes returns syntax errors. The solution . Simply paste the following code in your functions.php file: function my_formatter($content) { $new_content = ”; $pattern_full = ‘{([raw].*?[/raw])}is’; $pattern_contents = ‘{[raw](.*?)[/raw]}is’; $pieces = preg_split($pattern_full, $content, -1, PREG_SPLIT_DELIM_CAPTURE); foreach ($pieces as $piece) { if (preg_match($pattern_contents, $piece, $matches)) { $new_content .= $matches[1]; } else { $new_content .= wptexturize(wpautop($piece)); } } return $new_content; } remove_filter(’the_content’, ‘wpautop’); remove_filter(’the_content’, ‘wptexturize’); add_filter(’the_content’, ‘my_formatter’, 99); Once that’s done, you can use the [raw] shortcode in your posts: [raw]This text will not be automatically formatted.[/raw] Code explanation . Our first step here was to create a function that uses a regular expression to find the [raw] shortcode in your posts’ content. Then we hook our my_formatter() function to WordPress’ the_content() function, which means that my_formatter() will now be automatically called every time the_content() is called. To remove the automatic formatting, we use the remove_filter() function, which lets you delete a hook on a specific function. Source: Disable WordPress automatic formatting on posts using a shortcode 2. Detect The Visitor’s Browser Using A Hook The problem . Cross-browser compatibility is probably the most common problem in Web development. You will save yourself a lot of headaches if you are able to detect the browsers that people use to visit your website and then create a custom class wrapped in the body tag. Few people are aware of it, but WordPress can already detect browsers, and a few global variables are available for us to use. The solution . Nothing hard here: just paste the code below in your functions.php file, then save the file and you’re done! <?php add_filter(’body_class’,'browser_body_class’); function browser_body_class($classes) { global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone; if($is_lynx) $classes[] = ‘lynx’; elseif($is_gecko) $classes[] = ‘gecko’; elseif($is_opera) $classes[] = ‘opera’; elseif($is_NS4) $classes[] = ‘ns4′; elseif($is_safari) $classes[] = ’safari’; elseif($is_chrome) $classes[] = ‘chrome’; elseif($is_IE) $classes[] = ‘ie’; else $classes[] = ‘unknown’; if($is_iphone) $classes[] = ‘iphone’; return $classes; } ?> Once you have saved the file, the function will automatically add a CSS class to the body tag, as shown in the example below: <body class=”home blog logged-in safari”> Code explanation . WordPress has global variables that return true if a visitor is using a particular browser. If the visitor’s browser is Google Chrome, the $is_chrome variable will return true . This is why we create the browser_body_class() function, which returns the name of the visitor’s browser. Once that’s done, we just hook the function to WordPress’ body_class() function. Sources: Browser Detection and the body_class() Function How to detect the visitor’s browser within WordPress 3. Define Default Text In TinyMCE The problem