In this post we are glad to release DesignPile WordPress Theme, a theme designed by Site 5 and released for Smashing Magazine and its readers. The theme comes with 3 color styles and a couple of jQuery-based goodies. It can be used for portfolios and blogs as well as corporate webAs usual, the theme is free to use in private and commerical projects.Download the theme for free!The theme is released under GPL. You can use it for all your projects for free and without any restrictions. Please link to this article if you want to spread the word. You may modify the theme as you wish.live demolarge preview (1.2 Mb)installation guide and documentationdownload the .zip-package (.zip, 0.9 Mb, includes instructions files and required plugins)download mirror for the .zip-packagerelease on designers’ siteFeaturesHere are some of the features of the theme: Widget ready (footer and sidebar), Easy to setup, the Theme Options Page has 3 color styles, Custom homepage, Simple Post Thumbnails Plugin,125×125 ads section with enable/disable option, using “WP125″ plugin,JQuery Lightbox,JQuery Forms,AJAX-based based contact form,Live form email validation,Theme Requirements: Wordpress 2.9.1+SidebarContent, overview“About the author”-sectionCommentsCategories archive sectionThank you, Gabi Schiopu and the Site 5 design team! We appreciate your work and your good intentions!© Smashing Editorial for Smashing Magazine, 2010. | Permalink | 7 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: wordpress
-
I posted to smashingmagazine.com
Free Dark and Clean WordPress Theme: Designpile
http://feedproxy.google.com/~r/SmashingMagazine/~3/8UFlnHxBKtc/
February 20 2010, 1:02pm | Comments »
-
I posted to smashingmagazine.com
SimpleFolio: A Free Clean Portfolio WordPress Theme
http://feedproxy.google.com/~r/SmashingMagazine/~3/LSko0rG6YXQ/
Today we are glad to release a beautiful, simple and clean portfolio WordPress theme — SimpleFolio, designed by Omar E. Corrales and released for Smashing Magazine and its readers. SimpleFolio is a portfolio theme that includes a blog and a very extensive option page that allows you to exclude all your portfolio items from the blog page. It also includes a front page slider.It has 2 different widget areas and threaded comments, and also supports paged comments and has 2 different page templates for advanced usage. The control of images is done from the post page.Download the theme for free!The theme is released under GPL. You can use it for all your projects for free and without any restrictions. You may modify the theme as you wish. Please link to this article if you want to spread the word.live demolarge preview (main page)large preview (portfolio page)large preview (single post page)large preview (back-end options page)download the .zip-package (.zip, 0.93 Mb, including installation guidelines)release post on designer’s siteFeaturesHere are some of the features of the theme:CSS-based layout,2 columns of fixed width,widget-ready,XHTML 1.0 Transitional valid,multi-browser compatibility: tested on Firefox, Safari , IE7, IE8, Chrome,easy to setup, theme options page,JQuery Lightbox,AJAX-based based contact form,Live form e-mail validation.Front pagePortfolioPortfolioOptions page in back-endSingle post, main areaSingle post, threaded commentsSingle post, sidebarBehind the designAs always, here are some insights from the designer:I created this theme after getting tired of all the fancy design themes that are very popular now a days, this is a design for people that just need the job done without complicating them selfs. The best use can be either for just someone thats starting to blog or some artist that needs to expose there art.Thank you, Omar. We appreciate your work and your good intentions!© Elja Friedman for Smashing Magazine, 2010. | Permalink | 17 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: wordpress
February 7 2010, 8:35am | Comments »
-
I posted to smashingmagazine.com
“Magazeen”: Free Magazine-Look WordPress Theme
http://www.smashingmagazine.com/2009/02/23/magazeen-free-magazine-look-wordpress-theme/
We love our readers. We respect the hard work of designers and developers across the globe. And we do our best to make the web design community stronger and the Web a little bit prettier. Therefore we ask talented artists and creative professionals to showcase their skills and release something unique and beautiful as a gift to the community. And when designers agree, truly impressive works see the light of day.
Today we are glad to release Magazeen — a free advanced Wordpress-theme in a magazine-llok created by the talented WeFunction Design Agency. This bold magazine 2-col-theme was designed with the main focus being on typography, grids and magazine-look. It was created especially for Smashing Magazine and its readers. Download the theme for free! The theme is released under GPL. You can use it for all your projects for free and without any restrictions. Please link to this article if you would like to spread the word. You may modify the theme as you wish.
live demo large preview (.jpg, 1.7 Mb) download the theme (.zip, 0.3 Mb) download the PSD-sources (.zip, 4.5 Mb)
Inspiration behind the design As usual, here are some insights from the designers themselves: “We’ve created the Magazeen theme to try and pump as much style and functionality into a WordPress theme to give people something they might not expect from their standard Wordpress theme. There really is very few limits to what WordPress handle, so we’ve built in a lot of custom features and options to give people a little taste of what is possible, and how some small functionality tweaks can make a huge difference to the overall experience of browsing a blog. On top of that we’ve wrapped all that functionality up in a really cool and modern theme, with nice big title fonts, and a stylish colour scheme. The Magazeen theme is packed full of cool features to really encourage your readers to explore new posts and similar items. The first thing you might notice is the jQuery image showcase at the top, which is fully automated and will display the image from the latest post, and the title above it without you having to do anything other than define the image URL in the custom field we have created which will appear on in your admin post area.
Drop-Down Menu The other cool and fully automated feature is the related posts drop down effect. It’s a simple idea, if you click the category of the full posts a drop down will appear with some related posts from that category. And if you don’t see a post you like you can always view the full category by clicking view more.
Sidebar The sidebar area’s have been created to give you a lot of control over the featured posts, and recent posts. Once you’ve installed the theme, you need to go to your Widgets area, and simply activate the “Magazeen Latest Posts”, and “Magazeen Featured Posts” widgets. You can easily control how many posts each feature displays, and using this widget will ensure the area is styled correctly with the post image showing correctly.”
Footer Thank you, guys. We appreciate your great work, your attention to details and the brilliance of the execution. Related posts You may be interested in the following free Wordpress-themes as well:
Agregado: A Free Wordpress Theme Infinity: A Free Wordpress Theme Wordpress.Fun: A Free Wordpress Theme Fervens: A Free Wordpress Theme Dilectio: A Free Wordpress Theme Smashing: A Free Wordpress Theme
© Vitaly Friedman & Sven Lennartz for Smashing Magazine, 2009. | Permalink | 82 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Submit to Reddit | Submit to Facebook | Who is linking? | Forum Smashing Magazine
Post tags: Freebies, theme, wordpress
February 23 2009, 5:59am | Comments »
-
I posted to smashingmagazine.com
Compositio: Clean, Beautiful and Free WordPress Theme
http://www.smashingmagazine.com/2009/02/18/compositio-clean-beautiful-and-free-wordpress-theme/
In comments to our recent freebie releases you asked for a simple, clean and beautiful WordPress-theme; the theme should be easily customize for different purposes and in a variety of settings. We’ve been listening to you and we heard you: and today we are release (hopefully) exactly what you’ve been asking for. In this post we release Compositio – a simple, clean and user-friendly WordPress-theme, created by talented Elena Gafita for Smashing Magazine and its readers. Compositio is a two column theme, made to for those who want to put their content at the front with a unique light blue design. Random square shapes are the defining graphics of this theme. They are used throughout the background, bringing a special rhythm to the theme. Compositio: A Free WordPress Theme A special feature of this theme is the logo changer. You can use the default WordPress setting (“blog name”) or you can use your own logo. Upload your logo in the root folder of Compositio theme and name it logo.png. You can also use the PSD Logo Template in the source folder of the Compositio Theme. (Image limitations: max is 590px/85px). If you want to activate this option go to Administration Panel > Appearance > Logo Options, and select logo type.
The theme is widget-ready, so you can use it as you like. Also Elena customized the CSS for the default widgets to match the site style better. The theme is using a couple of plugins, with some already integrated into functions.php, so there is no need to install them. The only plugin you need to install manually is FlickrRSS (FlickrRSS plugin is in the theme folder) (see the demo). This work is licensed Creative Commons Attribution-Share Alike 3.0 License. This means that you may use it, and make any changes you like. Just leave the credits on footer if you respect the designer’s work.
full image preview live demo (the server experiences some problems) download the theme (mirror) (.zip, 0.2 Mb) release post on DesignDisease’s blog
Thanks for the truly great work, Elena, we really appreciate it. Previews
Comments to a post
The comment form
The sidebar Related posts
Color Paper: Free WordPress Theme Infinity: Free WordPress Theme Agregado: Free WordPress Theme WordPress Fun: Free WordPress Theme Fervens: Free WordPress Theme NotePad Chaos: Free WordPress Theme Black Magic: Free WordPress Theme
Suggestions for particular themes? What themes would you like to be released on Smashing Magazine next? What are you looking for? Or, more importantly, what kind of themes shouldn’t we release any more? We appreciate your input in the comments to this post! What kind of theme should Smashing Magazine release next? ( polls)
© Vitaly Friedman & Sven Lennartz for Smashing Magazine, 2009. | Permalink | 34 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Submit to Reddit | Submit to Facebook | Who is linking? | Forum Smashing Magazine
Post tags: downloads, Freebies, theme, wordpress
February 18 2009, 7:37am | Comments »
-
I posted to smashingmagazine.com
Mastering WordPress Shortcodes
http://www.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/
Introduced in WordPress 2.5, shortcodes are powerful but still yet quite unknown WordPress functions. Imagine you could just type “adsense” to display an AdSense ad or “post_count” to instantly find out the number of posts on your blog. WordPress shortcodes can do this and more and will definitely make your blogging life easier. In this article, we’ll show you how to create and use shortcodes, as well as provide killer ready-to-use WordPress shortcodes that will enhance your blogging experience. What Are Shortcodes?
Using shortcodes is very easy. To use one, create a new post (or edit an existing one), switch the editor to HTML mode and type a shortcode in brackets, such as: [showcase] It is also possible to use attributes with shortcodes. A shortcode with attributes would look something like this: [showcase id="5"] Shortcodes can also embed content, as shown here: [url href="http://www.smashingmagazine.com"]Smashing Magazine[/url] Shortcodes are handled by a set of functions introduced in WordPress 2.5 called the Shortcode API. When a post is saved, its content is parsed, and the shortcode API automatically transforms the shortcodes to perform the function they’re intended to perform. Creating a Simple Shortcode The thing to remember with shortcodes is that they’re very easy to create. If you know how to write a basic PHP function, then you already know how to create a WordPress shortcode. For our first one, let’s create the well-known “Hello, World” message.
Open the functions.php file in your theme. If the file doesn’t exists, create it. First, we have to create a function to return the “Hello World” string. Paste this in your functions.php file: function hello() { return 'Hello, World!'; }
Now that we have a function, we have to turn it into a shortcode. Thanks to the add_shortcode() function, this is very easy to do. Paste this line after our hello() function, then save and close the functions.php file: add_shortcode('hw', 'hello'); The first parameter is the shortcode name, and the second is the function to be called. Now that the shortcode is created, we can use it in blog posts and on pages. To use it, simply switch the editor to HTML mode and type the following: [hw] You’re done! Of course, this is a very basic shortcode, but it is a good example of how easy it is to create one.
Creating Advanced Shortcodes As mentioned, shortcodes can be used with attributes, which are very useful, for example, for passing arguments to functions. In this example, we’ll show you how to create a shortcode to display a URL, just as you would with the BBCodes that one uses on forums such as VBulletin and PHPBB.
Open your functions.php file. Paste the following function in it: function myUrl($atts, $content = null) { extract(shortcode_atts(array( "href" => 'http://' ), $atts)); return '<a href="'.$href.'">'.$content.'</a>'; }
Let’s turn the function into a shortcode: add_shortcode("url", "myUrl");
The shortcode is now created. You can use it on your posts and pages: [url href="http://www.wprecipes.com"]WordPress recipes[/url] When you save a post, the shortcode will display a link titled “WordPress recipes” and pointing to http://www.wprecipes.com.
Code explanation. To work properly, our shortcode function must handle two parameters: $atts and $content. $atts is the shortcode attribute(s). In this example, the attribute is called href and contains a link to a URL. $content is the content of the shortcode, embedded between the domain and sub-directory (i.e. between “www.example.com” and “/subdirectory”). As you can see from the code, we’ve given default values to $content and $atts. Now that we know how to create and use shortcodes, let’s look at some killer ready-to-use shortcodes! 1. Create a “Send to Twitter” Shortcode
The problem. Seems that a lot of you enjoyed the “Send to Twitter” hack from my latest article on Smashing Magazine. I also really enjoyed that hack, but it has a drawback: if you paste the code to your single.php file, the “Send to Twitter” link will be visible on every post, which you may not want. It would be better to control this hack and be able to specify when to add it to a post. The solution is simple: a shortcode! The solution. This shortcode is simple to create. Basically, we just get the code from the “Send to Twitter” hack and turn it into a PHP function. Paste the following code in the functions.php file in your theme: function twitt() { return '<div id="twitit"><a href="http://twitter.com/home?status=Currently reading '.get_permalink($post->ID).'" title="Click to send this page to Twitter!" target="_blank">Share on Twitter</a></div>'; }
add_shortcode('twitter', 'twitt'); To use this shortcode, simply switch the editor to HTML mode and then type: [twitter] and a “Send to Twitter” link will appear where you placed the shortcode. Source and related plug-ins:
How to: Create a “send this to twitter” button Twitter tools
2. Create a “Subscribe to RSS” Shortcode
The problem. You already know that a very good way to gain RSS subscribers is to display a nice-looking box that says something like “Subscribe to the RSS feed.” But once again, we don’t really want to hard-code something into our theme and lose control of the way it appears. In this hack, we’ll create a “Subscribe to RSS” shortcode. Display it in some places and not others, in posts or on pages, above or below the main content, it’s all up to you. The solution. As usual, we create a function and then turn it into a shortcode. This code goes into your functions.php file. Don’t forget to replace the example feed URL with your own! function subscribeRss() { return '<div class="rss-box"><a href="http://feeds.feedburner.com/wprecipes">Enjoyed this post? Subscribe to my RSS feeds!</a></div>'; }
add_shortcode('subscribe', 'subscribeRss'); Styling the box. You probably noticed the rss-box class that was added to the div element containing the link. This allows you to style the box the way you like. Here’s an example of some CSS styles you can apply to your “Subscribe to RSS” box. Simply paste it into the style.css file in your theme: .rss-box{ background:#F2F8F2; border:2px #D5E9D5 solid; font-weight:bold; padding:10px; } 3. Insert Google AdSense Anywhere
The problem. Most bloggers use Google AdSense. It is very easy to include AdSense code in a theme file such as sidebar.php. But successful online marketers know that people click more on ads that are embedded in the content itself. The solution. To embed AdSense anywhere in your posts or pages, create a shortcode:
Open the functions.php file in your theme and paste the following code. Don’t forget to modify the JavaScript code with your own AdSense code! function showads() { return '<div id="adsense"><script type="text/javascript\"><!-- google_ad_client = "pub-XXXXXXXXXXXXXX"; google_ad_slot = "4668915978"; google_ad_width = 468; google_ad_height = 60; //--> </script>
<script type="text/javascript\" src="http://88.198.60.17/images/mastering-wordpress-shortcodes/http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script></div>'; }
add_shortcode('adsense', 'showads');
Once you have saved functions.php, you can use the following shortcode to display AdSense anywhere on your posts and pages: [adsense] Note that our AdSense code is wrapped with an adsense div element, we can style it the way we want in our style.css file.
Code explanation. The above code is used simply to display AdSense ads. When the shortcode is inserted in a post, it returns an AdSense ad. It is pretty easy but also, you’ll agree, a real time-saver! Sources:
How to: Embed AdSense anywhere on your posts
4. Embed an RSS Reader
The problem. Many readers also seemed to enjoy the “8 RSS Hacks for WordPress” post published on Smashing Magazine recently. Now, let’s use our knowledge of both RSS and shortcodes to embed an RSS reader right in our posts and pages. The solution. As usual, to apply this hack, simply paste the following code in your theme’s function.php file. //This file is needed to be able to use the wp_rss() function. include_once(ABSPATH.WPINC.'/rss.php');
function readRss($atts) { extract(shortcode_atts(array( "feed" => 'http://', "num" => '1', ), $atts));
return wp_rss($feed, $num);}
add_shortcode('rss', 'readRss'); To use the shortcode, type in: [rss feed="http://feeds.feedburner.com/wprecipes" num="5"] The feed attribute is the feed URL to embed, and num is the number of items to display. 5. Get posts from WordPress Database with a Shortcode The problem. Ever wished you could call a list of related posts directly in the WordPress editor? Sure, the “Related posts” plug-in can retrieve related posts for you, but with a shortcode you can easily get a list of any number of posts from a particular category. The solution. As usual, paste this code in your functions.php file. function sc_liste($atts, $content = null) { extract(shortcode_atts(array( "num" => '5', "cat" => '' ), $atts)); global $post; $myposts = get_posts('numberposts='.$num.'&order=DESC&orderby=post_date&category='.$cat); $retour='<ul>'; foreach($myposts as $post) : setup_postdata($post); $retour.='<li><a href="'.get_permalink().'">'.the_title("","",false).'</a></li>'; endforeach; $retour.='</ul> '; return $retour; } add_shortcode("list", "sc_liste"); To use it, simply paste the following in the WordPress editor, after switching to HTML mode: [liste num="3" cat="1"] This will display a list of three posts from the category with an ID of 1. If you don’t know how to get the ID of a specific category, an easy way is explained here. Code explanation. After it has extracted the arguments and created the global variable $posts, the sc_liste() function uses the get_posts() function with the numberposts, order, orderby and category parameters to get the X most recent posts from category Y. Once done, posts are embedded in an unordered HTML list and returned to you. Source:
WordPress: Création de shortcode avancé
6. Get the Last Image Attached to a Post The problem. In WordPress, images are quite easy to manipulate. But why not make it even easier? Let’s look at a more complex shortcode, one that automatically gets the latest image attached to a post. The solution. Open the functions.php file and paste the following code: function sc_postimage($atts, $content = null) { extract(shortcode_atts(array( "size" => 'thumbnail', "float" => 'none' ), $atts)); $images =& get_children( 'post_type=attachment&post_mime_type=image&post_parent=' . get_the_id() ); foreach( $images as $imageID => $imagePost ) $fullimage = wp_get_attachment_image($imageID, $size, false); $imagedata = wp_get_attachment_image_src($imageID, $size, false); $width = ($imagedata[1]+2); $height = ($imagedata[2]+2); return '<div class="postimage" style="width: '.$width.'px; height: '.$height.'px; float: '.$float.';">'.$fullimage.'</div>'; } add_shortcode("postimage", "sc_postimage"); To use the shortcode, simply type the following in the editor, when in HTML mode: [postimage size="" float="left"] Code explanation. The sc_postimage() function first extracts the shortcode attributes. Then, it retrieves the image by using the get_children(), wp_get_attachment_image() and wp_get_attachment_image_src() WordPress functions. Once done, the image is returned and inserted in the post content. Sources:
WordPress Shortcode: easily display the last image attached to post
7. Adding Shortcodes to Sidebar Widgets
The problem. Even if you enjoyed this article, you may have felt a bit frustrated because, by default, WordPress doesn’t allow shortcode to be inserted into sidebar widgets. Thankfully, here’s a little trick to enhance WordPress functionality and allow shortcodes to be used in sidebar widgets. The solution. One more piece of code to paste in your functions.php file: add_filter('widget_text', 'do_shortcode'); That’s all you need to allow shortcodes in sidebar widgets! Code explanation. What we did here is quite simple: we added a filter on the widget_text() function to execute the do_shortcode() function, which uses the API to execute the shortcode. Thus, shortcodes are now enabled in sidebar widgets. Sources:
How to: Add Shortcodes to Sidebar Widgets Adding a Shortcode to a Sidebar Widget
WordPress Shortcodes Resources
Shortcode API The WordPress Codex page related to the shortcode API. WordPress 2.5 shortcodes Excellent shortcodes tutorial. WordPress shortcode generator The page is in French but provides a very useful and easy-to-use app to create shortcodes online. Using Wordpress shortcode to create beautiful download boxes Another great use of shortcodes: creating fancy “Download” boxes for your blog. Easy way to advertise in WordPress using shortcodes Great resource to manage and insert advertising on your blog, brought to you by WpEngineer. Create a signature using WordPress shortcodes Really simple but really cool: a shortcode to display a graphic signature on your blog. How to: Use WordPress shortcodes with attributes Concise tutorial on using shortcode attributes.
About the author This guest post was written by Jean-Baptiste Jung, a 27-year-old blogger from Belgium, who blogs about WordPress at WpRecipes and about everything related to blogging and programming at Cats Who Code. You can stay in touch with Jean by following him on Twitter. (al)
February 2 2009, 8:00pm | Comments »
-
I posted to smashingmagazine.com
10 Steps To Protect The Admin Area In WordPress
http://www.smashingmagazine.com/2009/01/26/10-steps-to-protect-the-admin-area-in-wordpress/
By Sergej Müller and Alex Frison The administration area of a Web application is a favorite target of hackers and thus particularly well protected. The same goes for WordPress: when creating a blog, the system creates an administrative user with a perfectly secure password and blocks public access to the settings area with a log-in page. This is the cornerstone of its protection. Let’s dig deeper! This article focuses on defending the administration area of WordPress, meaning all those pages in the wp-admin folder (or http://www.yourblog.com/wp-admin/) that are displayed after a user a verified. We bolded the phrase “after a user is verified” deliberately: it should be explicitly understood that only a simple query stands in the way of an evil hacker and the powerful admin area of your whole blog. The latter is only as strong as the passwords that are generated.
Protect the administration area of your WordPress blog. To make an attack more difficult, you should perform the following actions manually. These solutions do not guarantee 100% security, but you can create effective stumbling blocks on a hacker’s way to the administration area. 1. Rename and Upload the wordpress Folder Since version 2.6, it has been possible to change the path of the wp-content directory. Unfortunately, this is still not possible for the wp-admin directory. Security-minded bloggers will just have to accept this fact and hope that this protection of their blog will be made possible in future versions. Until then, the following recipe is a comparable alternative. Upon extracting the zipped WordPress files, you’ll see a folder named wordpress. This folder should be renamed (ideally to something cryptic), and, after also adjusting the wp-config.php file, uploaded to the root directory of the domain. What does this change accomplish?
First, the files will no longer be loose in the main directory, thus increasing the clarity of the root level. Other files and folders will be found quicker. Secondly, many WordPress instances can now be created and can be put parallel to each other without interfering with other system files and settings, making it perfect for testing and development. The third advantage actually speaks to security: the admin area (and the blog itself) is no longer in the root domain and must first be found by robots. It won’t be easy to find the path of this relocated log-in page, at least for a human. Until then, this change will protect your blog.
Several WP installations in the root directory are possible
The blog address should be beautiful and unobtrusive Note: If the system files of a WordPress blog are no longer in the main directory, and the name of the installation’s main folder has been changed (as recommended above), the blog can still be accessed from http://example.com. How? In the WordPress address (URL) field under the general settings, include the path of the renamed folder. For example, if the unzipped wordpress folder is renamed to wordpress_live_Ts6K, enter the path as http://example.com/wordpress_live_Ts6K. Your blog address will remain beautiful and not distracting. 2. Extend the file wp-config.php The WordPress configuration file wp-config.php contains settings and access data for the database. But security-related values can also be found in the file. The following definitions must be in the wp-config.php file (but may not be) and should be added or modified:
Security keys: Since WordPress 2.7, WordPress has had four kinds of security keys, which must be set up properly. WordPress saves you from having to come up the strings yourself by generating the lines of security keys automatically. You just have to implement these security keys in your configuration file. These keys are essential to the safety of your installed blog. The table prefix of a newly created WordPress installation should not be the standard wp_. The more cryptic the word, the less likely an intrusion into the MySQL database tables will occur. Bad: $table_prefix = ‘wp_’;. Much better: $table_prefix = ‘wp4FZ52Y_’;. This value is assigned only once and you don’t have to remember it because it has an internal function. If the server has SSL encryption available, it is recommended to encrypt the administration area. This can be done by adding the following command to the wp-config.php file: define(’FORCE_SSL_ADMIN’, true); In addition, you can adjust other system settings in the configuration file. A clear and comprehensive list of settings for greater safety and performance can be found in the WordPress Codex.
Not to be neglected: unique authentication keys. 3. Move the wp-config.php file Also since version 2.6, WordPress allows you to move the wp-config.php file to a higher level. Because this system file contains by far more sensitive information than any other, and because it is difficult to access the parent file server level, it certainly makes sense to store it outside of the actual installation. WordPress automatically looks at the highest underlying index for the configuration settings file. Any attempt by users to adjust the path is thus useless. 4. Protect the wp-config.php file Not all ISPs, though, allow you to transfer data to a higher level than the main directory. Administrators cannot always execute the previous step if they do not have this privilege. In this case, external access to the wp-config.php file can be excluded via the .htaccess file. Here is the relevant code:
protect wpconfig.php
<files wp-config.php> Order deny,allow deny from all </files> It is important to make sure that the .htaccess file, with this built-in protection, shares the same directory as the wp-config.php file. Incidentally, this technique would also be useful if you use multiple WordPress installations but are not allowed to relocate the relevant configuration files. 5. Delete the admin User Account When WordPress is installed, an administrator acount with the username admin is automatically created, without any options set. This is a well-intended gesture by WordPress, but a default user with administrative rights and an assigned ID of #1 is an easy target for hackers. In an attack, only the password of this user would have to be broken. Hence our advice:
Create another administrator in the admin area. Log out of the back end. Log in as the new user. Delete the old admin from the user list.
A second user gives greater security: that name will be displayed in all future published articles and commentaries, and the name of the actual administrator will never be displayed on blog pages and therefore never communicated to the outside world.
Before deleting a user, you can attribute all posts and links to another author. 6. Choose strong passwords The probability and frequency of attack increases in proportion to the popularity of the blog. And when the back end of a WordPress blog is skillfully attacked, you have to be sure there are no weak links in the chain of security. More often than not, passwords are the weakest link in this chain. The reason? The way that passwords are usually handled or chosen is too reckless. Numerous studies show that miserably vast numbers of passwords contain too few characters and are too easily guessed. WordPress responded to this problem with an intuitive indicator, based on a traffic-light visual, that displays the strength of a user’s desired password. Inexplicably, though, this tool is only available for existing profiles (found under Settings > Users > Your profile). If the administrator creates new users, then password strength is not communicated visually. Our recommendation for a secure WordPress password is that it be at least seven characters long and include uppercase and lowercase characters, numbers and symbols such as ! ” ? $ % ^ & ).
The strength of a password is communicated in colors in WordPress. 7. Protect the wp-admin Directory Adhering to the motto “Two are better than one,” the administration area is equipped with additional password protection. The query (in WordPress otherwise responsible for Permalinks) is handled by .htaccess, which is stored in the wp-admin folder along with .htpasswd. After making this change, the browser will ask for the data stored in .htaccess. This can be different for each blog author or the same for everyone. Note: the Htaccess and Htpasswd generator helps to create the necessary files with desired values.
Use a server-side password as an additional safeguard. 8. Suppress Error Feedback on the Log-In Page The log-in page of a WordPress installation is the door to the administration area. The administration area is only accessible upon error-free verification. Until successfully logging in, visitors — whether good or bad — have countless attempts to enter the correct data in the log-in fields. In case of a failed attempt, WordPress communicates to the user what the problem might be. When troubleshooting, WordPress is really fussy and provides a unique, meaningful message for each error. So if a user name is typed incorrectly, that will be communicated. If the password is wrong, that will be also communicated. This is a comfort for the user and a blessing for the thief. Unintentionally, WordPress provides valuable feedback to the bad boys who are trying to access your data. It’s just a matter of time until they gain access to the back end. A simple one-liner solves this problem cleverly: The output of the error on the log-in page is simply blocked to looters. This code goes in the functions.php file of your theme: add_filter('login_errors',create_function('$a', "return null;"));
An output of the error on the left. After the change, on the right. 9. Restrict Erroneous Log-In Attempts WordPress keeps no record of failed attempts to log in, much to the detriment of the blog administrator, who doesn’t see the insidious attack coming and so can’t gather the tools to combat the threat. Is there a way out of this dilemma? Two solutions exist: Login LockDown and Limit Login Attempts. Upon being installed, they record all log-in attempts. Furthermore, both extensions can lock out visitors for a specified time after a certain number of failed attempts. Thus, robots and hackers are limited in the scale of their attack. The extensions are free and compatible with WordPress 2.7.
Values can be easily adjusted in the settings. 10. Keep Software Up to Date Finally, the following should be stated: WordPress developers are very fast and react immediately to vulnerabilities in WordPress. Keep your installations up to date. Since version 2.7, available updates are just a click away. The same goes for plug-ins! And remember: less is more. As an administrator, you should ensure that only the extensions that are necessary are active in your installation. Every plug-in is a potential risk and should be inactive or, better yet, removed if it is not needed.
WordPress automatically notifies you if a newer version of an extension is available. And You? How do you protect your admin area? What techniques do you use? About the Authors Sergej Müller and Alex Frison develop the wpSEO plugin for WordPress. Sergej also develops the Antispam Bee plugin. Alex is co-founder of http://wpengineer.com, a blog with WordPress related articles, tutorials and hacks. (al)
January 26 2009, 10:37am | Comments »
-
I posted to smashingmagazine.com
Introducing Tweetbacks Plugin for Wordpress
http://www.smashingmagazine.com/2009/01/09/tweetbacks-plugin-for-wordpress/
Just yesterday we introduced Twitter Avatars In Comments plugin for Wordpress that enables bloggers to have both Twitter and Gravatar avatars in blog comments. We are certainly not going to turn Smashing Magazine into a repository of Twitter plugins for Wordpress, but we are confident that it does make sense to introduce another plugin that enables another kind of Twitter integration in blogs.
This is why this post releases the Twittbacks WordPress Plugin that was developed and released especially for Smashing Magazine — this plugin imports tweets about your posts as comments. You can display them in between the other comments on your blog, or display them separately. Advantages of our implementation This implementation is inspired by Dan Zarrella’s great work on TweetBacks. Although his implementation does what it promises, we felt that it could be done in another way and offer users an alternative to display tweets in a more convenient way. Dan’s solution uses JavaScript, which will work on more platforms, but we felt that it would be useful to actually store the tweets in the database instead of using JavaScript to display them. Because our implementation stores Tweets in the database, you can create new plugins that use this data on the top of our plugin. Besides, our implemenation does not does not require JavaScript and requires significantly less time to load (server-side, not client-side). (Because we know you want to test this, and be able to ditch the plugin if you don’t like it, we’ve added an uninstall function, which will delete all the stored tweets from your WordPress database.) Installation The installation couldn’t be simpler:
download the plugin from Joost de Valk’s release post, copy the “tweetbacks” folder to your plugin folder (wp_root/wp-content/plugins); login inside your WordPress administrator panel and activate this plugin (Click “Plugins” and then “Activate” near to the plugin title); if you are using Wordpress 2.7, just add the code presented in the next section of this post (Styling and Adding Tweetbacks in Wordpress 2.7) and you are done. otherwise if you are using older versions of Wordpress, you can add Twitterbacks similarly to the way it is presented in this tutorial:
Access your comments.php file and locate the following code:
<?php foreach ($comments as $comment) : ?>
Immediately after the above code, place this code:
<?php $comment_type = get_comment_type(); if($comment_type == 'comment') { ?>
Next, scroll down a little bit and locate the following code:
<?php endforeach; /* end for each comment */ ?>
Put the following code right before the above code:
<?php } /* End of is_comment statement */ ?>
This will filter out all of the tweetbacks, trackbacks and pingbacks from your main comments loop. Now we need to create a second comments loop to display tweetbacks, and a third loop to display the trackbacks and pingbacks.
Right under the code from step 2 you should find this code:
<?php else : // this is displayed if there are no comments so far ?>
Put the following code right before the above code:
<h3>Tweetbacks</h3> <ol>
<?php foreach ($comments as $comment) : ?> <?php $comment_type = get_comment_type(); ?> <?php if($comment_type = 'tweetback') { ?> <li><?php comment_author_link() ?>: <?php comment_text() ?></li> <?php } ?> <?php endforeach; ?>
Followed by this:
<h3>Trackbacks</h3> <ol> <?php foreach ($comments as $comment) : ?> <?php $comment_type = get_comment_type(); ?> <?php if($comment_type != 'comment') { ?> <li><?php comment_author_link() ?></li> <?php } ?> <?php endforeach; ?> </ol>
And you are done.
Styling and Adding Tweetbacks in Wordpress 2.7 As the plugin will import these tweets into your comments, they will by default be shown as normal comments on your blog. They will get the class tweetback. If you’re using WordPress 2.7 and the default theme, or any other theme that has taken the styling from the comments from the default theme (which is a sensible thing to do), you could style these tweetbacks by adding something like this to your stylesheet:
.commentlist li.tweetback { background-color: #94E4E8; } If you want to display them separately, you’ll have to separate your comments, pingbacks and tweetbacks from each other. A great tutorial on how to do that is Separating Pings from Comments in WordPress 2.7. After you’ve done that, you can add the following code to display the tweetbacks:
if ( ! empty($comments_by_type['tweetback']) ) :?> <h2 id="tweetbacks"><?php echo count($comments_by_type['tweetback']);?> Tweetbacks to “<?php the_title(); ?>”</h2> <ul class="commentslist tweets"> <?php wp_list_comments('type=tweetback'); ?> </ul> <?php endif;
If you want to give that list of tweetbacks a different look and feel, you can add a callback to the wp_list_comments call above. The callback could make them look like this, for instance:
The code for the callback used above looks like this:
function yoast_list_tweetbacks($comment, $args, $depth) { $GLOBALS['comment'] = $comment; $avatarurl = str_replace("twitter:","http://s3.amazonaws.com/twitter_production/profile_images/",$comment->comment_author_email); ?> <li class="tweetback" id="comment-<?php comment_ID(); ?>"> <div id="div-comment-<?php comment_ID(); ?>"> <div class="comment-author vcard"> <img alt='' src='<?php echo $avatarurl ?>' class='avatar avatar-40 photo avatar-default' height='40' width='40' /> <cite class="fn"><a href="<?php echo $comment->comment_author_url; ?>" rel='external nofollow' class='url'><?php comment_author(); ?></a></cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="#comment-<?php comment_ID(); ?>"><?php comment_date('F jS, Y'); ?> at <?php comment_date('H:i:s'); ?></a></div> <p><?php comment_text(); ?></p> </div> </li> <?php }
Because these tweetbacks are stored as comments in your database, you can all sorts of cool things with them. Improving the Web has written a Widget pack that will work with this plugin, called Tweet Stats. It allows you to add widgets with “Recently tweeted posts” and “Most tweeted posts” (see examples below).
If you have any installation problems, questions or suggestions for this plugin, please either comment on this post or add your suggestions in the support forum on Wordpress.org. About the author The plugin was developed by Joost de Valk, a Dutch geek and WordPress developer. You can follow him on Twitter.
January 9 2009, 3:42am | Comments »
-
I posted to smashingmagazine.com
Twitter Avatars In Comments Wordpress Plugin
http://www.smashingmagazine.com/2009/01/08/twitter-avatars-in-comments-wordpress-plugin/
Over the last months, Twitter has become extremely popular across the Web, with more blogs, magazines and companies using it to communicate with their audiences and customers. Even we started Twittering a couple of months ago and have over 3,650 followers now. Please feel free to join us and follow Smashing Magazine on Twitter as well. Although we aren’t sure if Twitter will actually revolutionize blogs (as other blogs claim), Twitter is definitely changing the way website owners communicate with their visitors, and we, designers, need to be aware of that and use appropriate tools to meet the expectations of our clients. Unfortunately, there are not that many plug-ins and extensions for Twitter out there, so we decided to release one: the Twitter Comments WordPress Plug-In. Twittar Wordpress Plugin The objective was quite simple: create a plug-in that uses Twitter to show avatars in comments in WordPress blogs. But after discovering the potential of the Twitter API, the plug-in evolved into a complete “avatar for comments” solution for WordPress. The plug-in was developed by Ricardo Sousa, a young designer with a strong passion for WordPress and Joomla!.
Features
Loads user’s avatar by matching the email address to the user’s Twitter email address. If user doesn’t have a Twitter account, it first tries to load user’s gravatar. If user doesn’t have a gravatar, it loads a default image. This is an optional setting. You can set a 2-pixel border to the images (you choose the color). You can choose the size: we suggest 24, 48 or 72 pixels. You can set an image other than the default one to load if a user doesn’t have a Twitter account or a gravatar. It builds a valid image for you (with alt and title attributes, etc.) based on user details. Allows you to add a class to the image, so you can style it later.
Download the plugin for free The plug-in is released under the GPL. You can use it for all your projects for free and without any restrictions. Please link to this article if you would like to spread the word. You may modify the plug-in as you wish.
download the plugin (.zip, 9 Kb)
Installation instructions
Copy the “twitter” folder to your plug-in folder (wp_root/wp-content/plugins). Log in to your WordPress administrator panel, and activate this plug-in (click “Plug-ins” and then “Activate” near the plug-in title). Now you will need to edit your template’s comments.php file to show the avatar near the user comment.
Click on “Appearance” and then “Editor” in your WordPress back end. Choose comments.php or comment.php or the PHP file that manages your user comments. Find the lines where the template manages the comments, and add the following line where you want to show the user’s avatar: <?php twittar(size, placeholderimg, border, class, usegravatar, rating); ?> Note: You may need to change your template. If your template already supports gravatars in comments, you will need to delete the gravatar tag and add twittar. You may need to make some adjustments in order to show the avatar properly. You must change the values inside twittar();. Here’s how: size The size of the avatar (in pixels). Just insert the number (e.g. 45), without “px.” It is the size for both width and height. placeholderimg The URL for the image you want to use when the user has neither a Twitter account nor a gravatar. Must be inside quotes (”"). Optional. border The color for the 2px border. Insert the hexadecimal code of the color (e.g. “#FFFFFF” with the “” marks) but only if you want to use one. class A CSS class that you want to use to style the avatar. For example: “myimg.” In the CSS, you would include .myimg { }. Put inside “”. usegravatar Just insert 1 if you want to use gravatars, and 0 if you don’t. If you choose to use gravatars, it will try to load a gravatar image if a Twitter account and picture is not found, otherwise it will load the placeholderimg (default) image directly. rating Parameter for gravatars only. Read more at http://www.gravatar.com. Note: if you want to skip a parameter and add another in front of it, just replace it with “”. Example: An example configuration could be: <?php twittar("45", "", "", "myimg", 1, "R"); ?> Recommended sizes for images: 24, 48 or 72 px. Save the file and enjoy Twitter avatars (see the image below).
Please feel free to post questions about installation in the comments. About the author The plug-in was developed by Ricardo Sousa, a young designer with a strong passion for Wordpress and Joomla!. You can follow him on Twitter.
January 8 2009, 5:05am | Comments »
-
I posted to smashingmagazine.com
10 Killer WordPress Hacks
http://www.smashingmagazine.com/2009/01/07/10-killer-wordpress-hacks/
by Jean-Baptiste Jung 2008 was a very good year for the WordPress community. The software was updated numerous times, leading to the recent release of version 2.7, and many new blogs dedicated to WordPress were created. Of course, tons of new hacks were discovered, which helped lots of bloggers enhance their blogs. In this article, we’ll show you 10 new useful killer WordPress hacks to unleash the power of your favorite blogging engine. Each hack has an accompanying explanation, so you’ll not only unleash the power of WordPress but also understand how it works. 1. Display AdSense Ads to Search Engines Visitors Only
The problem. It’s a known fact that regular visitors don’t click on ads. Those who do click on ads are, 90% of the time, visitors coming from search engines. Another problem is Google’s “smart pricing.” Being smart priced means that your click-through rate (CTR) is low and the money you earn per click is divided by between 2 and 10. For example, if a click would normally earn you $1.00, with smart pricing it could earn you as little as $0.10. Painful, isn’t it? Happily, this solution displays your AdSense ads to search engine visitors only, which means more clicks and a higher CTR. The solution.
Open the functions.php file in your theme. Paste the following code in it: function scratch99_fromasearchengine(){ $ref = $_SERVER['HTTP_REFERER']; $SE = array('/search?', 'images.google.', 'web.info.com', 'search.', 'del.icio.us/search', 'soso.com', '/search/', '.yahoo.'); foreach ($SE as $source) { if (strpos($ref,$source)!==false) return true; } return false; }
Once done, paste the following code anywhere in your template where you want your AdSense ads to appear. They’ll be displayed only to visitors coming from search engine results: if (function_exists('scratch99_fromasearchengine')) { if (scratch99_fromasearchengine()) { INSERT YOUR CODE HERE } }
Code explanation. This hack starts with the creation of a function called scratch99_fromasearchengine(). This function contains a $SE array variable in which you can specify search engines. You can easily add new search engines by adding new elements to the array. The scratch99_fromasearchengine() then returns true if the visitor comes from one of the search engines containing the $SE array variable. Sources:
How to Display Ads Only to Search Visitors How to: Display AdSense to search engine visitors only
- Avoid Duplicate Posts in Multiple Loops
The problem. Due to the recent popularity of “magazine” themes, there’s a high demand from WordPress users who use more than one loop on their blog home page for a solution to avoiding duplicate posts on the second loop. The solution. Here’s a simple solution to that problem, using the power of PHP arrays.
Let’s start by creating a simple PHP array, and put all post IDs from the first loop in it. <h2>Loop n°1</h2>
<?php $ids = array(); while (have_posts()) : the_post(); the_title(); ?> <br />
<?php $ids[]= $post->ID; endwhile; ?>
Now, the second loop: we use the PHP function in_array() to check if a post ID is contained in the $ids array. If the ID isn’t contained in the array, we can display the post because it wasn’t displayed in the first loop. <h2>Loop n°2</h2> <?php query_posts("showposts=50"); while (have_posts()) : the_post(); if (!in_array($post->ID, $ids)) { the_title();?> <br /> <?php } endwhile; ?>
Code explanation. When the first loop is being executed, all IDs of posts contained within it are put into an array variable. When the second loop executes, we check that the current post ID hasn’t already been displayed in the first loop by referring to the array. Source:
How to: Use two (or more) loops without duplicate posts
- Replacing “Next” and “Previous” Page Links with Pagination
The problem. By default, WordPress has functions to display links to previous and next pages. This is better than nothing, but I don’t understand why the folks at WordPress don’t build a paginator by default. Sure, there are plug-ins to create pagination, but what about inserting it directly in your theme? The solution. To achieve this hack, we’ll use the WP-PageNavi plug-in and insert it directly in our theme.
The first thing to do, obviously, is download the plug-in. Unzip the plug-in archive on your hard drive, and upload the wp-pagenavi.php and wp-pagenavi.css files to your theme directory. Open the file that you want the pagination to be displayed in (e.g. index.php, categories.php, search.php, etc.), and find the following code:
<div class="navigation"> <div class="alignleft"><?php next_posts_link('Previous entries') ?></div> <div class="alignright"><?php previous_posts_link('Next entries') ?></div> </div> Replace this part with the code below: <?php include('wp-pagenavi.php'); if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>
Now we have to hack the plug-in file. To do so, open the wp-pagenavi.php file and find the following line (line #61): function wp_pagenavi($before = '', $after = '') { global $wpdb, $wp_query; We have to call the pagenavi_init() function, so let’s do it this way: function wp_pagenavi($before = '', $after = '') { global $wpdb, $wp_query; pagenavi_init(); //Calling the pagenavi_init() function
We’re almost done. The last thing to do is to add the wp-pagenavi style sheet to your blog. To do so, open up header.php and add the following line: <link rel="stylesheet" href="<?php echo TEMPLATEPATH.'/pagenavi.css';?>" type="text/css" media="screen" />
Code explanation. This hack mostly consists of simply including the plug-in file directly in the theme file. We also had to add a call to the pagenavi_init() function to make sure the pagination would be properly displayed. Source:
How to: Integrate pagination in your WordPress theme
- Automatically Get Images on Post Content
The problem. Using custom fields to display images associated with your post is definitely a great idea, but many WordPress users would like a solution for retrieving images embedded in the post’s content itself. The solution. As far as we know, there’s no plug-in to do that. Happily, the following loop will do the job: it searches for images in post content and displays them on the screen.
Paste the following code anywhere in your theme. <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?>
<?php $szPostContent = $post->post_content; $szSearchPattern = '~<img [^\>]*\ />~';
// Run preg_match_all to grab all the images and save the results in $aPics preg_match_all( $szSearchPattern, $szPostContent, $aPics );
// Check to see if we have at least 1 image $iNumberOfPics = count($aPics[0]);
if ( $iNumberOfPics > 0 ) { // Now here you would do whatever you need to do with the images // For this example the images are just displayed for ( $i=0; $i < $iNumberOfPics ; $i++ ) { echo $aPics[0][$i]; }; };
endwhile; endif; ?>
Code explanation. The above code basically consists of a simple WordPress loop. The only difference is that we use PHP and regular expressions to search for images within the post’s content instead of simply displaying posts. If images are found, they’re displayed. Sources:
Manipulate images from WordPress post content with regular expressions How to: Retrieve images in post content
- Create a “Send to Twitter” Button
The problem. Are you on Twitter? If so, we’re sure you know how good this service is for sharing what you find interesting online with your friends. So, why not give your readers a chance to directly send your posts’ URLs to Twitter and bring you some more visitors? The solution. This hack is very simple to achieve. The only thing you have to do is to create a link to Twitter with a status parameter. Because we’re using a WordPress blog, we’ll use the function the_permalink() to get the page URL: <a href="http://twitter.com/home?status=Currently reading <?php the_permalink(); ?>" title="Click to send this page to Twitter!" target="_blank">Share on Twitter</a> Pretty easy, isn’t it? But pretty useful too, in our opinion. Source:
How to: Create a “Send this to Twitter” button
Related plug-in:
Twitter tools
- Using Normal Quotes Instead of Curly Quotes
The problem. If you’re a developer who often publishes code snippets on your website, you have probably encountered the following problem: a user tells you that the code you posted doesn’t work. Why? Simply because, by default, WordPress turns normal quotes into so-called “smart quotes,” which breaks code snippets. The solution. To get rid of theses curly quotes, proceed as follows:
Open the functions.php file in your theme. If that file doesn’t exist, create it. Paste the following code: <?php remove_filter('the_content', 'wptexturize'); ?>
Save the file, and say goodbye to broken code snippets!
Code explanation. The wptexturize() function automatically turns normal quotes into smart quotes. By using the remove_filter() function, we tell WordPress that we don’t want this function to be applied to a post’s content. Source:
How to get rid of curly quotes in your WordPress blog
- Deny Comment Posting to No Referrer Requests The problem. Spam is a problem for every blogger. Sure, Akismet is there to help, but what about preventing spam just a bit more? The following code will look for the referrer (the URL from where the page was called) when the wp-comments-post.php file is accessed. If a referrer exists, and if it is your blog’s URL, the comment is allowed. Otherwise, the page will stop loading and the comment will not be posted. The solution. To apply this hack, simply paste the following code into your theme’s function.php file. If your theme doesn’t have this file, just create it. function check_referrer() { if (!isset($_SERVER['HTTP_REFERER']) || $_SERVER['HTTP_REFERER'] == “”) { wp_die( __('Please enable referrers in your browser, or, if you\'re a spammer, bugger off!') ); } }
add_action('check_comment_flood', 'check_referrer'); Source:
How to: Deny comment posting to no referrer requests
- Using CSS Sliding Doors in WordPress Navigaton
The problem. The built-in wp_list_pages() and wp_list_categories() functions allow lots of things, but they do not allow you to embed a <span> element so that you can use the well-known CSS sliding-doors technique. Happily, with some help from PHP and regular expressions, we can use this awesome technique on a WordPress blog. Due to the number of tutorials on CSS sliding doors, we’re not going to explain how it works here; consider reading this excellent article if you need to know more about the technique. To view a live demo of this example, click here and refer to the main menu.
Create the images you need, and then edit the style.css file in your WordPress theme. Here is an example:
nav a, #nav a:visited {
display:block; }
nav a:hover, #nav a:active {
background:url(images/tab-right.jpg) no-repeat 100% 1px; float:left; }
nav a span {
float:left; display:block; }
nav a:hover span {
float:left; display:block; background: url(images/tab-left.jpg) no-repeat 0 1px; }
Now it is time to edit the header.php file. Simply copy and paste one of the following codes, according to your needs:To list your pages: <ul id="nav"> <li><a href="<?php echo get_option('home'); ?>/"><span>Home</span></a></li> <?php echo preg_replace('@\<li([^>])>\<a([^>])>(.?)\<\/a>@i', '<li$1><a$2><span>$3</span></a>', wp_list_pages('echo=0&orderby=name&exlude=181&title_li=&depth=1')); ?> </ul> To list your categories: <ul id="nav"> <li><a href="<?php echo get_option('home'); ?>/"><span>Home</span></a></li> <?php echo preg_replace('@\<li([^>])>\<a([^>])>(.?)\<\/a>@i', '<li$1><a$2><span>$3</span></a>', wp_list_categories('echo=0&orderby=name&exlude=181&title_li=&depth=1')); ?> </ul>
Code explanation. In this example, we make use of the echo=0 parameter in the wp_list_pages() and wp_list_categories() functions, which allows you to get the result of the function without directly printing it on the screen. Then, the result of the function is used by the PHP preg_replace() function and finally displayed with <span> tags added between the <li> and <a> tags. Source:
CSS Techniques: Using Sliding Doors with WordPress Navigation
- Display a Random Header Image on Your WordPress Blog
The problem. This is not really a problem, but many WordPress users would love to be able to display a random header image to their readers. The solution.
Once you have selected some images to be your header images, name them 1.jpg, 2.jpg, 3.jpg and so on. You can use as many images as you want. Upload the images to your wp-content/themes/yourtheme/images directory. Open header.php and paste the following code in it: $num = rand(1,10); //Get a random number between 1 and 10, assuming 10 is the total number of header images you have <div id="header" style="background:transparent url(images/.jpg) no-repeat top left;">
You’re done! Each page or post of your blog will now display a random header image.
Code explanation. Nothing hard here. We simply initialized a $num variable using the PHP rand() function to get a random number between 1 and 10. Then, we concatenate the result of the $num variable to the path of the theme we are using. Source:
How to: Display a random header image
- List Your Scheduled Posts
The problem. Like many bloggers, you probably want your readers to visit your blog more often or subscribe to your RSS feed. A good way to make them curious about your future posts is by listing the titles of your scheduled posts. The solution. Open any of your theme files and paste the following code: <?php $my_query = new WP_Query('post_status=future&order=DESC&showposts=5'); if ($my_query->have_posts()) { while ($my_query->have_posts()) : $my_query->the_post(); ?> <li><?php the_title(); ?></li> <?php endwhile; } ?> Code explanation. In this code, we have created a custom WordPress query using the WP_Query class to send a database query and fetch the five most recent scheduled posts. Once done, we use a simple WordPress loop to display the posts’ titles. Sources:
How to: List scheduled posts Den Leser in die Zukunft blicken lassen
About the author This guest post has been written by Jean-Baptiste Jung, a 26-year-old blogger from Belgium who blogs about WordPress at WpRecipes and about everything related to blogging and programming at Cats Who Code. You can stay in touch with Jean by following him on Twitter. (al)
January 7 2009, 11:51am | Comments »
1 2