Resize the Twenty Eleven Theme

We have seen a number of solutions to resize the WordPress twenty eleven theme, there are a number of considerations when resizing the theme, like the built in headers and content area, we thought we would add our own solution to the mix.

Changing the header height is not that hard to do using a function and the after_setup_theme hook, but what if we want a wider theme, the headers will still show but will be stretched, the default header will still be the parent themes header, so lets look at the steps we take in changing our child theme.

Continue reading

Twenty Eleven social Icons in Navigation

Over on the WordPress forum a question came up about adding social media icons to the navigation bar in a twenty eleven child theme, answers were given changing code in the header.php file.

The question came from a novice who was not sure about changing code, so thinking about this and how we can use WordPress to do most of what we wanted we came up with a simple solution, it only requires grabbing icons, resizing them a few lines of code in style.css and using the built in custom menu structure.

The Social Icons

We always recommend that you use legal images, never grab images from other websites or Google, so get over to My Site My Way and download some royalty free icons, they have a fair range of different styles that are legal to use in our websites and themes.

We need to resize the icons, there are many different packages we could use, all we have done is to navigate to the download, extract the icon to a folder opened it in an imaging package, this can be Photoshop, Elements, DrawPlus, Paint, Gimp or any package that will allow us to resize the image, we are resizing our image to 42px * 42px.

twitter-nav-1

In our child theme we create a new folder called /images/ if we have not already done this, and we save our icon image using the “Save As” option, we save this into the child themes images folder with the name of the social media, like here twitter.png

twitter-nav-2

Child Theme Download

You may download the file here or visit the All Downloads page for other files.

Twenty Eleven Social Navigation

style.css

Now we need to give each of our icons a style class of it’s own, we are adding the classes in the navigation area which has an id of #access, we want to float these to the right, make the text color transparent, remove the hover effect and use our images as backgrounds.

In our child themes style.css we add a style block for each of our social media icons, here is our twitter block, we copy and rename the elements for any other icons we want to show in our menu.

/* Twitter Icon */
#access .nav-twitter {
width: 50px;
text-align: center;
float: right;
}
.nav-twitter,
#access .nav-twitter:hover >a,
#access .nav-twitter a:focus
{
background: url('images/twitter.png');
background-repeat: no-repeat;
padding: 0;
}
.nav-twitter a
{
color: transparent !important;
padding: 0;
}

That is all the code we need to add, we are now going to use the built in options of the WordPress menu to do the rest.

The Menu

We are now going to create a new item for our menu, we do this in Admin > Appearance > Menus, if you have not created a custom menu yet then you will need to do so, the images below are for a custom theme and will be different to a standard Twenty Eleven theme, but the workflow is the same.

From the Screen Options tab make sure we have selected the ‘Custom Links’ and  ‘CSS Classes’ checkboxs.

twitter-nav-3

Next we create a Custom URL menu item with a link to our social media websites, and add this to our menu, as we are floating these to the ‘right’, then these should remain at the the end of our menu.

twitter-nav-4

Our last step is to add the class we created in the style.css to our menu item, we just add nav-twitter to the CSS Classes box and ‘Save Menu’

We have used another of our screen options to show the ‘Link Target’ as we do not want our visitors leaving our site, we will open the link in a new window.

twitter-nav-5

Here we have three of the icons in our menu, notice how we use mailto: to send an email.

Warning: See comments below E-Mail “Navigation Label” must not have a hyphon, so use “Email” and not as per the image E-Mail, as this breaks in Internet Explorer, as the icons are only 50px wide keep the captions short 5 or 6 characters!

That is it fairly easy solution using as much of the standard system as we could, have fun!

Notices

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.

Membership

Registration and Membership is no longer required for downloading files or interacting with Digital Raindrops, posting a comment or topic in the forum does use Captcha to reduce spammers.

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.

Twenty Eleven Dark Child Theme

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.

Continue reading

Getting Image Colors

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.

Continue reading

Child Categories Page

This is a short post, the code is in the child theme download, just two files a page and a loop, on the Artisteer forum someone was asking about having a list of child categories in the page body, one of the replies pointed to a couple of examples, and like most times they showed how to return the list but not how to display them.

Well we had a look and thought an example might work well alongside our post list page download so here it is, adding a list is not really a problem, but just a list is not suitable for everyone, so we have a page with a post and the categories with descriptions.

Continue reading

Child Theme Creator

It is hard for anyone starting out with self hosted WordPress theme development to experiment with colors and other style changes, so we thought we would share this Twenty Ten child theme.

It is a simple form with a few lines of code behind it, but it may be helpful without the pains of having to keep uploading files, it will produce the styles text you generate for a child theme or to add to a stylesheet,  you can just copy and paste the text, it also allows for custom styles. 

Continue reading

Social Media

The fifth in this series of tutorials is adding a the social media panels to the theme, we created our social media panels with two different sizes for vertical and horizontal bars.

If we follow the steps in this tutorial we will be able to add two social media panels to our WordPress theme, have looked at the clickable icons, added a fixed theme panel that does not move when we scroll, and a top of page call.

We will need to do the following steps, create the template parts, styles and add the supporting files to our theme, and populate the website social media icons from the options page we created in the earlier tutorial.

Continue reading

Options Page

The third in this series of tutorials is adding an options page to the admin section of WordPress, we created our options page from two different tutorials we found online.

If we follow the steps in this tutorial we will be able to add an options section in the admin menu column of WordPress, have looked at the options array, and how to add the page to our theme.

We will need to do the following steps, add the options page and supporting files to out theme, look at the options for part four and adding the social icons folder so we can create different icon bar style for our theme, which will do in part five of the tutorials.

Continue reading