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;
}
Related
Not sure if this is only problem for Elementor full width template, but it seems to override theme header.php. I tried achieving my goal by using elementor custom code feature, but it adds my code somewhere in middle of the tag.
What is the propper way of adding my own custom code as the first thing that is after the element?
You are right Elementor overrides the theme's header.php file so importing your code to this file is not effective. You need to add custom function to earn your goal. With the wp-head action you could add the code right into your header and Elementor will not override it.
Add this code to the functions.php file od your active theme.
add_action('wp_head', 'custom_head_function');
function custom_head_function(){
?>
YOUR HEADER CODE HERE
<?php
};
UPDATE - If you want to set your code at the top
As sephsekla mentioned in comment, there is a way to set the priority into your action to get it to the top. Try to set value to -999. So, choose a very low number and if there is no other lower number in your plugin or theme you will go straight to the top.
add_action('wp_head', 'custom_head_function', -999);
function custom_head_function(){
?>
YOUR HEADER CODE HERE
<?php
};
Elementor now supports custom code (javascript, html, etc) and supports the specific use of elements in the head of the page.
What you are looking for you can find at the Wordpress Dashboard> Elementor > Custom Code . Then you will be able to add a custom code to the head: https://elementor.com/help/custom-code-pro/
Not sure if styling (CSS) is possible w/ this php code, but if anyone knows how i can style this ( with colors, etc) please let me know! this is the basic WooCommerce drop-down code that's placed in my template files
<?php the_widget( 'WC_Widget_Product_Categories', 'dropdown=1' ); ?>
Using Plugin :
https://wordpress.org/plugins/widget-css-classes/
Please note that this plugin doesn't enable you to enter custom CSS. You'll need to edit your theme's style.css or add another plugin that allows you to input custom CSS.
Refer this for full article
http://www.wpbeginner.com/wp-themes/how-to-add-custom-styles-to-wordpress-widgets/
I needs to upload images in my plugin and use wp.media for this task.
According to https://codex.wordpress.org/Javascript_Reference/wp.media
Its work, but I needs to have "Select and Crop" option in media library after upload my image with custom size.
I was see this in default theme in appearence custom header image, but can't understand how I can use this in my plugin with wp.media js?
This my not be better solution but work in wordpress :)
i use Thumbnail Crop Position and Simple Image Sizes for that :)
Good luck! :)
<?php if ( has_post_thumbnail() ) {
the_post_thumbnail('yourImageSize');
}?>
See my answer posted here that does Select and Crop using the Media Library on a theme options page. You can use it as a starting point for getting it to work in a plugin:
https://wordpress.stackexchange.com/questions/281760/using-media-uploader-to-select-image-of-specific-size-enforce-cropper/302962#302962
I'm working on a plugin where I need some of the colors to be settable in the admin.
Right now, I have these color settings saved with the WP update_option() function. Then, when I need to display a page, I use the get_option() function then embed the color codes like this:
<style>
.some_class{ background-color: <?php echo $settings->color_code;?>; }
</style>
Of course, this works. But it seems a bit clumsy because the plugin can load one of several PHP based pages. So, for each one, I have to do the above.
Is there some way to get this tag into all my plugins pages without doing it page by page?
for frontend:
add_action( 'wp_enqueue_scripts', 'custom_css', 100 );
function custom_css(){
echo '<style>css here!</style>';
}
it should print after your current css stylesheets so it will override prev. css
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";
}