WordPress Mobile Tip: Remove white space on right hand side on iPad and iPhone 5

wordpress-581849_1280

So you finish up your site and you are testing it on multiple devices and it’s looking fantastic. As a final check you fire up your iPad and something seems off, what is that small white gap on the right hand side!? Your responsive cross-device compatible website isn’t as perfect as you thought! These 1-2 device issues are usually the hardest to solve especially since they look fine in iPhone 6 and most Android phones.

right-hand-gap

[Small white space on right side of banner and header section only visible on iPad and iPhone 5]

I ran in to this situation on a client site and thanks to a great answer on Stack Overflow I was able to resolve it. IF this solution doesn’t work for you there were a few other good ones in response to that question that may work. I just happened to try this one first and it fixed the issue immediately

WordPress Tip: Turning off Comments on Published Posts & Pages

wordpress-581849_1280

Turning off comments in Discussion does not affect content that was created prior to our change. The following is a quick way to make sure all our content has comments turned off.

 

1. Go to Posts

posts

2. Find how many Published posts you have

pub-posts

 

 

3. Click on Screen Options in top right corner and add the amount of posts the click on apply

pubnumber

 

 

4. Click on the checkbox next to title (this will select all the posts on the page)

checkedpub

5. Go to dropdown and select edit and then apply

edit

6. Go to comments drop-down and select Do Not Allow

do-not-allow

7 Click on the Update button on right hand side

 

Now all your current posts will have comments turned off.

 

 

WordPress Child Theme Tip: Featured Image as background or default image as background

Recommended skill: child themes. some php understanding and definitely css

In today’s adventures in child theming I was asked to have either a default image or the featured image appear in the banner as a background image on individual blog pages for the Eptima Lite theme. I’m sure there are easier ways to do this but this particular solution worked extremely well after a few hours of reading and digging through multiple “ways” to do it. I always create a child theme when asked to make any changes to an established site. The client had picked their theme already and just wanted a few changes made, no need to create a theme from scratch with Bones  (which I’ve done in the past).

the following information is based on the assumption that you already have a child theme setup. If you haven’t already done so make a copy of the header.php from the main theme (in this case Eptima Lite) and put it in your child theme directory.

In your header.php add the following code:

A little explanation:

This code block here is saying IF the post has a featured image display it

Otherwise display a default image:

And this is where the image is converted to a background image (if you don’t include this line it’s added to the html as an img src which is difficult to stretch for a banner)

You will need to add padding or height for your image to display since it is now a background image 🙂

You can use background-size: cover as well to get the background image to fill your element.

I will add more to this post if I discover a better way to achieve the same thing.