Menu
Successful Web Strategy Successful Web Solution
development | design | execution | marketing | conversion | success
We are here for you: 334.403.LOVE (5683) | questions@successfulwebstrategy.com

Archive for Development

Customizing WordPress .htaccess file redirects

successful-web-blog-redirections-solutionsCustomizing WordPress .htaccess file redirects and make them stick.

August 11th 2015

Problem – Stop WordPress from rewriting our https redirects.

As part of redirecting our clients http site to https we needed to tell WordPress and well really browsers in general that when they come to an http page to instead go to the https version.
We did this and all was well until about 5 days later we notice the redirects were gone and it was back to http. So we fixed it again then randomly some days later back to http.

Well it turns out that if you change a permalink structure WordPress will rewrite the .htaccess file to reflect this (no surprise). It also turns out that WordPress will sometimes just randomly rewrite the .htaccess (surprise) for a reason that well we don’t have the answer too.

So we were getting our .htaccess file rewritten randomly and causing our https redirects to fail.

Solution – How do you prevent WordPress from rewriting .htaccess file redirects?

By default WordPress is going to have something similar to this that it will want to return to:

# BEGIN WordPress


RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ – [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

# END WordPress

While we wanted to have something like this to do our https redirects:

# BEGIN WordPress


RewriteEngine On
RewriteCond %{SERVER_PORT} !^443$
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
RewriteBase /
RewriteRule ^index\.php$ – [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

# END WordPress

The solution then is that WP will rewrite anything in between # BEGIN WordPress and # END WordPress

So we had to take out the offending code and put it into it’s on block like so:

# BEGIN WordPress —- We are maintaining the default WP write based on our permalinks sturcture


RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ – [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

# END WordPress —- We close it here knowing now that WP will only rewrite to default what is between the BEGIN and END – since this is default we are safe.

# Our code taking out of the WordPress .htaccess rewrite danger area – containing the correct https redirect code.


RewriteEngine On
RewriteCond %{SERVER_PORT} !^443$
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

And Viola! everything works and we have not been re-written or broken in a while. Feel free to copy and paste that code and try it out – maybe take out our comments.
Thanks for reading and let us know if you have any questions or comments.

Targeting Specific WordPress Post or Page with CSS

targeting-specific-wordpress-post-or-page-with-cssTargeting Specific WordPress Post or Page with CSS.

July 3rd 2015

Just a quick note – maybe help someone out there in the world.

One of our clients wants each header on each page and post to have a unique background image. So we were confronted with the problem of how to make this happen not just with pages but post as well. The drawback of course is that our css file can get bloated as this moves forward however the client was happy with the speed loss compromise.

The best way we found to do it was to target the body and then the specific page / post and header element. So:

Pages:


/* Home bg ******/
body.page-id-21 .builder-module-1-background-wrapper {
background: url(http://yoursite.com/images/home.jpg) no-repeat top fixed !important;
}

This site was built with iThemes Builder Child Theme (which we highly recommend).
body.page-id-21 = This is the page id of the specific page are targeting. You can find this in the WordPress admin if you are editing the intended page and look at the address bar you’ll see the id there.

For example our homepage in the address bar looks like this:
http://www.yoursite.com/wp-admin/post.php?post=21&action=edit

You see the 21 in there. Now with pages it is best to change the word post to page (only with pages – with blog post stick to post) so you get body.page-id-21

.builder-module-1-background-wrapper = this is the div that contains the header image. You can use Firebug for Firefox or Chrome’s developers tools to find what yours is and then just put it in place via class(.) or id(#) and then in our case we want a different background image so we have:

background: url(http://yoursite.com/images/home.jpg) no-repeat top fixed !important;

All done and we move to the next page.
/* Bio bg ******/
body.page-id-8456 .builder-module-1-background-wrapper {
background: url(http://yoursite.com/images/bio.jpg) no-repeat top fixed !important;

}

Post:

Post operate the same with one important difference.

/* Post Topic ******/
body.postid-3784 .builder-module-1-background-wrapper {
background: url(http://yoursite.com/images/home.jpg) no-repeat top fixed !important;
}

body.postid-3784: .postid- is different for post for pages we were using .page-id-
So you’ll want to make a note of that.

We did a bit of reseach and there are other methods to accomplish this however for us this was the best one at the time.
Alright let us know if you have and questions.