Making Background Images Play Nicely With iOS

I was testing my site on my iPhone, and my header was…not pretty.

Background Image Problems

I was using media queries and everything, but it was showing up all blown up and blurry.

@media only screen and (max-width: 800px) {
.site-header {
background-image:url(images/laptop-mobile.jpg);
background-position: fixed no-repeat center center;
background-position: fixed no-repeat center center;
-moz-background-position: fixed no-repeat center center;
-webkit-background-position: fixed no-repeat center center;
-o-background-position: fixed no-repeat center center;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
}

Super annoying.

The Internet told me that iOS (at least in previous versions) has had a problem with

position: fixed;

Okay. That’s fine, since it wasn’t parallaxing (that’s totally a word) on mobile anyway.

But getting rid of

position: fixed;

didn’t fix it. Why. Why? INTERNET. YOU ARE NOT COMING THROUGH.

So then I basically started trying every suggestion Google could throw at me, until – bliss! – this post on BrainHappy solved all my problems.

The Beckonweb mobile site - fixed!

Here’s my fix, modified slightly from the original:

.site-header {
background-image:url(images/laptop-mobile.jpg);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
min-height: 125px;
}

Yay! The Internet came through after all.

Also: waffles.

Tutorial: Using the Theme Customizer

Oh, Theme Customizer with Live Preview, where have you been all my life? The WordPress 3.4 update gives us the power to preview, tweak, and test-drive a new theme without applying it to our live site. 

 

Beck4 fig02

Want to learn more? Check out my tutorial on Peachpit.com!

Tutorial: Flexible Header Images

By now you already know that WordPress 3.4 has introduced a ton of great features (because you always perform core updates, right?). One of the coolest new features is support for Flexible Header Images. Remember in the dark ages of WordPress, when you had to crop your header image to fit in the predetermined header space? Now you get to decide how much header image you want, without having to touch any code.

Awesome, right? And it’s easy to get it to work with your theme.

Check out my article on Peachpit.com for a full tutorial!

Read the full tutorial over on Peachpit!

Adding page nav

So you’ve got this lovely new site and you’ve decided exactly how many posts to show at any given time to optimize the viewing experience. But – what’s this? You get to the end of your displayed posts and see…

…nothing.

A list of posts with no navigation at the bottom

Hey, where's my navigation?

You need a set of navigation links, and stat.

Luckily, they’re easy to add.

Open your index.php file. Scroll down until you get to the end of the Loop and add the following:

<div id="nav-below" class="navigation">
<div class="nav-previous">
<?php next_posts_link(
__('<span class="meta-nav">&larr;</span>
Older posts')) ?>
</div>
<div class="nav-next">
<?php previous_posts_link(
__('Newer posts
<span class="meta-nav">&rarr;</span>')) ?>
</div>
</div>

Save and close your index.php file.

Next, open your style.css file and add something like this:

div#nav-above,div#nav-below{
width:100%;
height:20px;
}
div#nav-above a, div#nav-below a{
color:#000;
text-decoration:none;
font-size:14px;
font-weight:bold;
display:block;
margin:20px 0;
}
div#nav-above a:hover, div#nav-below a:hover{
color:#000;
text-decoration:underline;
}
div.nav-previous{
float: left;
}
div.nav-next{
float: right;
}

Save and close your style.css file.

Now refresh your blog page, and behold! Fancy older/newer links to ensure that your readers can browse your content with ease.

A blog page with navigation links at the bottom

What lovely navigation you have!

Custom backgrounds in WordPress 3.0

The Custom Background options screenThis one’s a quickie:

Want to add a custom background that you can switch out whenever you want?

  1. Open your functions.php file.
  2. Add the following line of code: add_custom_background();

That’s it. Seriously.

Custom Headers in WordPress 3.0

Tired of your old header? Want to switch it for something fresh and new? WordPress 3.0 makes it easy. You just need to make a few changes to your functions.php and header.php files, and then you can switch headers as often as you want.

You’ll need FTP access to your site’s theme files (you can do some of this in the Appearance Editor, but it’s easiest if you can upload and download as necessary). You’ll also need to know the height, width, and location of your current or desired header, and you’ll need an image or graphic to use for your new header.

First, we need to set up the function that will define the size of the header image and activate the Headers link in the Appearance menu of your admin screen. Open your functions.php file and paste the following:

define( 'HEADER_IMAGE', '%s/images/header.png' ); // The default header located in themes folder
define( 'HEADER_IMAGE_WIDTH', apply_filters( '', 845 ) ); // Width of header
define( 'HEADER_IMAGE_HEIGHT', apply_filters( '', 365 ) ); // Height of header
define( 'NO_HEADER_TEXT', true );
add_custom_image_header( '', 'admin_header_style' ); // This Enables the Appearance > Header
// Following Code is for Styling the Admin Side
if ( ! function_exists( 'admin_header_style' ) ) :
function admin_header_style() {
?>
<style type="text/css">
#headimg {
height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
width: <?php echo HEADER_IMAGE_WIDTH; ?>px;
}
#headimg h1, #headimg #desc {
display: none;
}
</style>
<?php
}
endif;

Make sure you change the dimensions to match the size of the header on your actual site. Note that you will also need to upload a default header to your theme’s image directory (if you wish to use your existing header as the default, make sure you change the Header Image name in the function).

Next, you need to display the new header on your site. In your header.php file, add the following:


<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="Header Image" />

Change the alt text to reflect your image or site.

Log in to your WordPress admin screen and click “Appearance.” You will now see a link called Header. Click that to access your Custom Header section. You’ll see your default or current header as well as instructions for uploading a new one. You can also revert to your default header or eliminate your header altogether (note that there is no undo for those options, so choose carefully).

To upload a new header, browse for the image or graphic that you want to use (make sure it is at least as wide and high as your specified header dimensions) and click ‘Upload.’ If you need to crop your image, you can do so in the next step. Move the bounding box around until you are happy with the new header image and click Crop & Save.

That’s it! Your new header image will appear on your site, and you can switch it out as frequently as you like.

Questions? Problems? Leave a comment and we’ll do our best to help you out.

Custom Menus in WordPress 3.0

One of the coolest new features in WordPress 3.0 is the ability to add custom menus. In this post we’ll walk you through the process of adding custom menu support to your existing them as well as setting up the custom menus in the admin section.

1. Add the register_nav_menus function to your functions.php file.

In your functions.php file, add the following code:
register_nav_menus( array(
'main-menu' => __( 'Main Menu' ),
) );

This will allow your theme to recognize and register a custom navigation menu.

2. Replace the code for your current navigation menu (in your header.php file) with wp_nav_menu.

Open your header.php file and find the section that calls up your navigation menu. It may look something like this:

<?php wp_list_pages(); ?>
Replace that code with this one:

<?php wp_nav_menu( array( 'theme_location' => 'main-menu' ) ); ?>
Using the above code will replace your existing navigation menu with one you specify in the new Menus section (see below).

3. Log in to the admin area of your WordPress site and go to Appearance > Menus.

4. Create a new menu. Give your menu a name (this will not be displayed on your site) and add links by choosing from your pages, categories, or custom URLs. Once you’ve added all the links you want to include in your navigation menu, click “Save Menu.”

5. In the top left of the Menus section, you will see a box labeled “Theme Locations” which should say the following: Your theme supports 1 menu. Select which menu you would like to use. In the drop-down, choose the menu you just created and hit “Save.”

That’s it! You’ve just set up custom menus for your WordPress theme. You can add, delete or re-order your menu items any time you want.

Additionally, you can add custom menus to your sidebar, too – without touching a single line of code. Just add a new custom menu by clicking the plus sign next to your existing menu. Once you’ve got your new menu named and some menu items in place, go to Appearance > Widgets and choose the Custom Menu widget. Drag it to your sidebar, give it a name, and you’re ready to roll!

Questions? Problems? Leave a comment and we’ll do our best to help you out.