WordPress Visual Quickstart Guide

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

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.

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.

It’s no surprise to anyone that I’m a huge fan of swag, and now I can support my swag habit and the WordPress community. And you can, too. Check out the WordPress Swag Store. The proceeds go toward offsetting the cost of providing free swag to WordCamps and WordPress meetups around the world. Yes, that’s right: your swag begets more swag. Everybody wins.

WordPress got its start way back in 2003 as a fork of the blogging platform b2, but it’s come a long way since then. Major milestones include:

• The addition of plug-ins in 2004
• Theme system and static pages in 2005
• Widgets in 2007
• Shortcode API and Dashboard Widgets in 2008
• Image editing in 2009
• Custom menus and multisite management in 2010
• Post formats in 2011
• Theme customizer in 2012

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. 

 

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

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!

The folks at WordPress have an early holiday present for us: WordPress 3.3! Check out our image gallery to see some of what’s new:

The first hint that something new is afoot comes right after you run the update: instead of the usual “You’re running the latest version of WordPress” message, you’ll see a handy welcome screen that gives you an overview of all the new features in 3.3.

If you’ve been feeling ho-hum about the WordPress admin dashboard, get ready to celebrate. This update completely re-thinks the Dashboard UI, adding flyout menus, a persistent admin toolbar at the top of every screen, and help tabs everywhere you need them.

The post editing tools have been updated as well; one of the most significant is the media uploader, which now features a single icon instead of an icon for each content type. This makes perfect sense, and is a welcome change – though it may be jarring if you’re used to picking a content type before you upload! If you use Tumblr, you’ll be pleased to note that there’s now an easy way to import your Tumblog into WordPress. Hint: use a theme with Post Formats to make the transition as seamless as possible.

There have been some behind-the-scenes updates as well: permalink options have been updated, jQuery has been updated to 1.7.1, and there’s a new API for working with admin screens.

Have you updated yet? Get cracking! And let us know your thoughts on the new version in the comments.

You guys rock! We’re delighted to be sending out a batch of freshly-printed Second-Edition WordPress Visual QuickStart Guides to all our contest winners.

Didn’t win this time? Be sure to Like us on Facebook or follow us on Twitter to be the first to hear about future giveaways and contests!

You love WordPress. You love free stuff.

This contest is for you.

Win a copy of our NEW book, the WordPress Visual QuickStart Guide, Second Edition. It’s the newest and best edition yet, chock full of step-by-step instructions and clear, useful screenshots to guide you through the process of doing pretty much everything you could possibly want to do with WordPress.*

Here’s how you enter:

There are THREE WAYS you can enter to win a copy of the new book.

1. Use the Tweet Button at the bottom of this list to tell Twitter that you want to win our book
2. Become our fan on Facebook and leave a comment on our wall telling us you want to win
3. Post a link to this contest on your blog, website or Facebook page and encourage your readers to enter

Tweet

As an added bonus: if you do ALL THREE of the things listed above and post a comment on this post telling us about it, we will enter your name THREE TIMES.

UPDATE: The contest runs from NOW until October 27. We will choose 10 winners. GOOD LUCK!

*This statement is almost certainly mostly somewhat untrue. But we do walk you through a LOT.

We are at WordCamp! Check out our posts on the couldbe studios blog to see what fabulous things we’re learning at this year’s unconference.

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.

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.