The recent release of WordPress 3.2 and the updated Twenty Eleven theme means that we need a slightly different approach to the child theme styles if we want to use the dark theme.
The new theme options for the dark theme are loaded after the child theme has loaded it’s stylesheet so some color changes will not work, to overcome this we will load a second stylesheet after the parent twenty eleven theme stylesheet and dark stylesheet have loaded.
We were looking around for functions to get the most used colors from an image, we will be using this when we follow up our child theme creators for the twenty eleven theme, which will be released shortly.
We spent quite a while looking around the internet for some php code to find the most common colors from an image, there was code for two different libraries the Imagick and GD2, as we test with XAMPP we soon found that by default Imagick was not installed.
We have been looking at changing the body background on a theme based on hour, day, month, or season, in this example we will find out how to change the background in the evening.
We are using a Twenty Ten child theme to do this, so what do we need, we are using two horizontal repeat .png images 1087 wide * 1120 high, one for day and one for the night, if we whanted a different set of images, for any of the other methods we would change the quantities, names and code values to suit.
As Artisteer users one of the first things many of us do is add code to hide the titles, we often do this for the simple reason that the default fonts are safe and boring, so in this post we will look at adding a better Google font.
Cufón fonts are often the choice, but we are going to look at Google Fonts which has a growing library of fonts, they render in the browser nice and quick, and have an API we can talk to, so no uploading or including the fonts in our theme folders.
We are creating a new look for our website, which will be completed early June while looking at what we wanted we decided to use some shadows and rounded corners, the way we would do this is by creating graphics but we want a website with as few graphics as possible.
We are going to use CSS3 boxes and shadows while still having an alternate for non compatible browsers, we have tested this with a twenty ten child theme.
A question was asked on creating a home image instead of a text link in the menu, using Artisteer Version 3 RC, this should not be hard to do so lets have a look at how we can achieve this.
We will use two new images the height of our menu and 60px wide, this will be different on different themes, we may want an home image a couple of chevrons [>>] or a clickable small logo image, but when we design our menu we must consider this.
In the Artisteer Forum a question came up about the Facebook like and send buttons, the problem was where the code was added to a sidebar and the send dialog is hidden.
This is likely due to the stylesheet setting overflow:hidden, and the dialog box is wider than the sidebars, our sidebars are 220px, so we got thinking about adding a function for Facebook.
We are always visiting the forums to find interesting ways to enhance a theme, over on the WordPress forum the question was asked about a thumbnail ribbon of latest posts on a single post page.
This slotted in very nicely with our recent posts here on Digital Raindrops, like the image menu and Invetsica theme post ribbon, and the requirement will not take long the solution and this posts about 2 hours.
I’m trying to figure out how to add a listing of my most recent posts to the single.php page.
I want the 15 most recent posts to be generated in my footer.
I would also like that each post be represented only by their thumbnail image. (In this case it would be sized down to 50×50.)
There are a number of (YARPP) Yet Another Related Post Plugins that are free to use and might suit the requesters requirements and these can be a better option to adding code.
If we are developing a theme for a client or our portfolio this could be a nice value added built in theme feature, so the administrator does not have to maintain a plugin.
One suggestion was to use WP_Query but we will use Get_Posts for the numberposts argument, and a Template Part.
We also have a Twenty Ten child theme download so we can copy the files to any template.
Download the WordPress Twenty Ten child theme: [download id="65"]
As we are using a template part we will only need to copy the footer-images.php file to any other theme this can be an Artisteer generated theme, adjust the styles in the file and add a call in our footer.php file.
A lot of people ask not to be directed to the WordPress codex pages, however the example we are using is based on one from the Get_Pages Codex page, so it is worth reading these pages and looking at the different examples.
The requester only wanted the image ribbon to show on the single.php page, so the first and last lines are the conditional tags, we could remove these if we wanted the ribbon on all pages.
We create a div to act as a container for the images, we are using an inline style setting the height and margin, we would adjust the margin we want for our theme, here we have set top and bottom to 10px.
The single post is copied to a temporary post so it can be reset after the foreach loop, this is good if we wanted to move the call above the post comments.
$args is an array we pass to WordPress for the number of posts we want returned, this we would adjust based on our theme, our requester wanted 15 * 50px images = 750px wide plus image margins and container margin, 15 * 56 + 10 = 850px
The posts are returned to $myposts and we loop through the posts getting the link and the thumbnail, we are using a standard WordPress thumbnail using the get_the_post_thumbnail function and passing in a custom size we want returned in the array(50,50) we would change this to suit our theme.
Our second div is floated left and we have given it a small margin to separate the images, this we would also adjust for another theme.
<?php if( is_single() ) : ?> <div style="display: block; position: relative; width:100%, height: auto; margin: 10px auto; text-align:center;"> <?php global $post; $tmp_post = $post; $args = array( 'numberposts' => 15 ); $myposts = get_posts( $args ); foreach( $myposts as $post ) : ?> <?php $link = get_permalink( $post->ID ); ?> <div style="float: left; display:inline; margin: 0 3px;" onclick="location.href='<?php echo $link; ?>'"> <?php echo get_the_post_thumbnail($post->ID, array(50,50) , 'thumbnail'); ?> </div> <?php endforeach; ?> <?php $post = $tmp_post; ?> </div> <?php endif; ?>
In the Twenty Ten download example we have used the medium thumbnail six posts at 150 * 150 with 3px left and right image margins.
In the footer.php file we want to call the image ribbon just before the footer div is rendered, in the Twenty Ten theme we added it here, the last four lines of the code excerpt, see the download footer.php.
This can be inserted in most themes not just the WordPress twenty ten theme.
<?php /** * The template for displaying the footer. * * Contains the closing of the id=main div and all content * after. Calls sidebar-footer.php for bottom widgets. * * @package WordPress * @subpackage Twenty_Ten * @since Twenty Ten 1.0 */ ?> </div><!-- #main --> <?php //Add the footer image ribbon get_template_part( 'footer', 'images' ); ?>
Note: We set the array to 150* 150 in the download, however in our themes we use rectangular thumbnails, so WordPress will display the longest side at 150px
We do require your feedback to improve our themes and tutorials, please leave your comments good or bad.
Code disclaimer information
If this document contains programming examples, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code from which you can generate similar functions tailored to your own specific needs.
All sample code is provided by http://DigitalRaindrops.net for learning illustrative purposes only.
These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.
All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.
Registration is now open: New Member Registration
Membership is now open: Existing Member Login
Visit the: Forum and Feedback
This website is a tool to support and promote WordPress and Artisteer theme development, please support, share and give credit for any benefits you gain from the tutorials on this website.
On the Artisteer WordPress Forum the question was asked about an all image menu, there is no option in Artisteer to do this as a setting, we have a similar post on doing this in a WordPress “Twenty Ten” child theme.
How would we then transfer that knowledge to Artisteer, having just completed a series of posts for the Investica Theme, where we added a ribbon banner in part eight we will use this code as a starting point.
It was good to see that Artisteer 3 has moved to a Release Candidate version, we are happy at Digital Raindrops because the structure of the code is a lot closer to that used in the WordPress 3.1 default theme.
While over on the Artisteer Forum the question was asked about switching sidebars in a template page with the new structure, how could this be done and what changes are needed, we thought we would have a look and it is really easy.