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!
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
Try this.
if(!preg_match('/(iPhone|iPod|iPad|Android|BlackBerry)/i', $_SERVER['HTTP_USER_AGENT']))
{
include "mobile_header.php";
}
else
{
include "header.php";
}
Related
I am trying to remove the search link from the Woocommerce handheld footer menu which appears when using a mobile device.
I have tried following the official Woocommerce guide here on Customizing links in the handheld footer menu, but the code doesn't change the behaviour. I have already tried clearing cache, cookies & inprivate browsing to test. Any suggestions why this isn't changing?
Code:
add_filter( 'storefront_handheld_footer_bar_links', 'jk_remove_handheld_footer_links' );
function jk_remove_handheld_footer_links( $links ) {
unset( $links['search'] );
return $links;
}
The above code will work. However, if you are modifying the HTML of storefront_handheld_footer_bar_links anywhere else in your Woocommerce site, this will override and take precedence of the PHP function.
Bear this in mind when trying to modify the above function.
Thanks #Orlando P. for help in debugging.
i am developing a theme its almost complete now i am trying to make a demo as i have different homepage layouts like grid, fullwidth, masonry etc etc. I want to create a home page with all different layouts but what is the best way to effectively use layouts
like http://solopine.com/redwood/?home_layout=list on this theme they are logistically handle template parts with url.
How can i do that???
To load dynamically page layouts using url value you will have to use php _GET form method and some programming logic to check the value. Here it goes something like this :
Lets say you have 3 different custom layouts page named ... grid-layout.php fullwidth-layout.php and last one is masonary-layout.php. Remember you will have to create manual menu pages using wp custom links system. Like this
Create three different pages with custom permalinks ..... Lets say put this code into URL box
http://yoursite.com/?layout=grid
http://yoursite.com/?layout=masonary
http://yoursite.com/?layout=fullwidth
Change yoursite.com with your own site address.Anything after "layout=" is the value of get method.
Similar like url box put this names or anything you want into Link Text box :
Grid Layout
Masonary Layout
Full Width Layout
If its done then lets go ahead towards our coding section.
Find where your site's while ( have_posts() ) : the_post(); loop is located searching...... searching..... ow! found it?? Congrates! Put below code there to get the url value to change your site's layout dynamically.
<?php
$layout = $_GET['layout'];
switch ($layout) {
case 'grid': get_template_part( 'layouts/grid', 'layout' );
break;
case 'masonary': get_template_part( 'layouts/masonary', 'layout' );
break;
case 'fullwidth': get_template_part( 'layouts/fullwidth', 'layout' );
break;
default: get_template_part( 'layouts/content', 'single' );
break;
}
?>
Note: layouts/ is the directory folder where your template files are located like grid-layout.php , masonary-layout.php etc..
Above codes are tested and working fine if you have any issue then let me know otherwise if it works then upvote it and accept it as an answer so that others can know that this codes works.... Thank you
I'm trying to figure out how to create a header in WordPress that only shows for mobile devices, and how to modify properties of that header from the dashboard settings area.
I'm assuming I should be using the wp_is_mobile(); function to test for mobile. I'm just a bit green on how to implement this in WordPress. My main questions are as follows:
I believe I need to hook into the wp_head or activate_wp_head action
hook, is this correct?
I want to set colors for background and font colors in the dashboard
settings area. How do I go about doing this?
Is this a plugin? Is it a function? This question is about the
terminology I should be using.
Final question, where should I put this code? I'm sure it depends on
a couple of the previous answers, which is why I asked it last.
Thanks for the help. I don't need specific code I just need to be pointed in the right direction.
You should be able to accomplish what you're looking for in terms of the mobile specific header by replacing:
<?php get_header(); ?>
with this:
<?php
if ( wp_is_mobile() ) :
get_header( 'mobile' );
else :
get_header();
endif;
?>
in the file that you want to have a mobile specific header. You'll need to create your custom header in header-mobile.php in your theme's directory.
Read more about get_header() at the WordPress Codex here: http://codex.wordpress.org/Function_Reference/get_header. Read more about wp_is_mobile() at the WordPress Codex here: http://codex.wordpress.org/Function_Reference/wp_is_mobile.
In terms of using the Theme Customization API, which allows you to set colors for background and font colors in the wp-admin, I recommend reading up at the WordPress Codex here: http://codex.wordpress.org/Theme_Customization_API
For the Theme Customization API, you should add that code in your functions.php file.
The correct terminology is entirely dependant upon what you're doing, but it sounds like you just need to write a few functions, no plugin needed.
Hope this helps!
I think U should use #media, for example:
#media (max-width: 767px) {
.menu {
margin-left: 0;
height: 100px;
}
I have recently start using Wordpress for the very first time and i have to say it is going well. i previously made my own theme with the bootstrap 3 framework and started to implement it into wordpress.
I came across allot of things i didn't really find a good answer for.
first of all i want my website to be multi language (Dutch & French) for that I've installed qTranslate that works very well. But on the other hand that also gave me the problem that i had to include my header and my footer into my html editor in Wordpress because the text there has to be multi language, where normally just the content is placed. Anyone els is experiencing that problem or maybe knows a walk around for this?
My website contains allot of PHP because there is a payment system that is implemented into it, so i constantly need a connection to my database (MYSQL) and also am working with sessions. I'm not so far yet, tomorrow i will but can i just implement my PHP code into the well known tags <?php ?> and place them into the html editor in Wordpress?
So like you already know i had to put my header into the html editor in Wordpress but now i am facing a problem linking to my home page. If, in my navigation menu, i want to link to home i cannot use for example : <?php echo home_url(); ?> and i f i just use <a href"home"></a> it also doesn't work...
Appreciate for the help!
I figured out how I can include different header & footer (header-fr.php, footer-fr.php). I used this code:
<?php
if(function_exists('qtrans_getLanguage')) {
$lang = qtrans_getLanguage();
switch ($lang) {
case 'fr':
get_header('fr');
break;
default:
get_header();
break;
}
} else {
get_header();
} ?>
This is probably a Wordpress issue more than a Friendfeed issue but could be either. I have tried to debug with Firebug, wP_DEBUG, and error_log() but no issues have appeared.
I'm trying to initalize a set of ajax-powered feeds (using Friendfeed API) in the middle sidebar on various Wordpress category pages using a conditional statement. I can get one feed to display on one page no problem but when I add the conditional, it no longer displays.
Relevant lines:
function farmball_feed() {
global $post;
if ( is_category('3')) { $category = "farmball";
} elseif ( is_category('4')) { $category = "new-redsox";
} else { $category = "red-sox-on-farmball"; }
$feed = $friendfeed->fetch_room_feed($category, null, 0+($ind*30), 30);
Here is the full plugin code: http://www.pastie.org/private/vja7eisby93e3odh628xg
I call the function within the plugin using the following line in the sidebar-[category].php template file:
<?php if (function_exists('farmball_feed')) { farmball_feed(); } ?>
Here is the full sidebar code: http://pastie.org/private/lgxsdwxja08v93pkmvz3ug
I've checked in with the WP.org forum, MIRC, WP Tavern forum, and Friendfeed forum but no solution yet. I looked into the Developing a Widget codex but this plugin uses a couple other JS files so I don't think making it a custom widget would work. I'm not great with PHP so the answer could be a simple one. Appreciate the help.
Demo site: http://farmball.com/boston
It turned out to be an issue with where the JS plugin was being initialized. We had to add a line of php code to the friendfeed file which linked to the sidebar php code. Instead of using a conditional, we created unique sidebar template files, each calling js on its own. No conditional needed.