CODEWITHSUNDEEP
csswordpressmobile
Dom TheStick
Dom TheStick

Reputation: 1

Different header.php for mobile devices on wordpress?

First of all: sorry for my bad English, I'm from Germany.

I've got a big problem in my wordpress homepage with the header on mobile devices. The site is: www.hd-sign.de

If you open the page on a computer, everything looks fine, but if I open the page on a mobile device, the text box on the left is over the "HD - Sign" text and it looks very bad.

You can see what i mean on "am i responsive".

I installed the Mobile Device Detect Plugin to Wordpress and added this to my custom.css file:

include Mobile_Detect.php;
$detect = new Mobile_Detect;
if( ! $detect->isMobile() {
include "mobile_header.php";
}

else {
include "header.php";
}

But it wont work. For sure I installed the header.php & mobile_header.php (without the boxed text) to my main theme folder.

I tried many different methods in the past 5 hours but I still was not able to fix this problem.

Thank you very much in advance for every answer!

EDIT:

Thanks for every answer, actually i got the following code:

include Mobile_Detect.php;
$detect = new Mobile_Detect;
if( ! $detect->isMobile() ) : {
function get_header( 'mobile' );
}
else : {
function get_header();
endif;
}

Im not sure if this code is correct and absolutely not sure if i have to put the code in the "general-template.php" or in my custom css. Sorry for this stupid question, but i just started working with html and css. It would be great if someone can tell me where i have to put the (correct?) code!

Thanks!

Upvotes: 0

Views: 4706

Answers (2)

Kannan
Kannan

Reputation: 347

Try this.

if(!preg_match('/(iPhone|iPod|iPad|Android|BlackBerry)/i', $_SERVER['HTTP_USER_AGENT']))
{
include "mobile_header.php";
}
else
{
include "header.php";
}

Upvotes: 0

Nick Salloum
Nick Salloum

Reputation: 2278

Name your files like this:

header.php
header-mobile.php

and use WordPress conventions to call your headers like this:

// default
get_header();

// mobile
get_header( 'mobile' );

Other than that, I'd highly recommend looking into responsive web design and media queries. Your header will load once when the page loads for the first time. It won't change when you resize the browser window by using this technique.

Resources:

WordPress function reference for get_header() - http://codex.wordpress.org/Function_Reference/get_header

Upvotes: 2

Related Questions