I am trying to design a wordpress theme that has a problem with admin bar. If I select "don't show user bar" it's working properly. But when I want to see admin bar in the top, the themes looks like picture I attached. I couldn't see my logo its accurate size.
you could customize the admin bar layout by making it almost transparent in order to see what lies beneath it. This can be accomplished by overriding the default admin bar style used by WordPress so to make it 30% opacity and fully visible only on hover:
function my_theme_setup() {
add_theme_support( 'admin-bar', array( 'callback' => 'my_admin_bar_style') );
}
add_action( 'after_setup_theme', 'my_theme_setup' );
function my_admin_bar_style() {
?>
<style>
#wpadminbar {position:fixed;opacity:0.3;}
#wpadminbar:hover {opacity:1;}
</style>
<?php
}
Related
I was given the task of customizing a specific section of a website. This section is primarily made by an Event Manager Plugin on WordPress. This plugin allows users to create their own events that will be published in a calendar page. The thing is, I need to get rid of the page header only on the pages created by this plugin, that will have an URL similar to this: http://mypage.com/eventos/user-event-name
So, I only need to apply the code .site-header { display: none; } ONLY to the pages that have this /eventos/something URL. Can this be done?
When I put the above code on the Custom CSS of my theme it gets rid of the header across the whole website, and I don't want that.
I have absolutely no background in CSS so I most definitely am using the wrong definitions here. Thanks in advance, hope someone can help me!
You can check if there is evestos in URL and add a class to body
like this
add_filter( 'body_class','my_body_classes' );
function my_body_classes( $classes ) {
$url = strpos($_SERVER['REQUEST_URI'];
if($url, "/eventos/")) {
$classes[] = 'eventos-page';
return $classes;
}
}
After that you can add css to that class like for example
.eventos-page .site-header {
display: none;
}
I am working with WordPress + WooCommerce & when I am logged in the icon for the shopping cart work fine, if I am logged out like a regular user they show up as a square like an icon is not recognized.
I have narrowed it down to this:
In my functions.php I have added this
add_action( 'wp_enqueue_scripts', 'child_enqueue_styles');
function child_enqueue_styles() {
wp_enqueue_style( 'reset-style', get_template_directory_uri() . '/ovr.css', array());
}
Which loads in a custom CSS file that I have created. If I remove this then the icons show up as they should, at first I thought it must be some CSS blocking the icons but it doesn't make sense as they show up fine when I am logged in?
Any help would be greatly appreciated.
If it's a fontawesome icon try to add this to the icon's class in the css file:
font-family: "fontawesome";
Or if this didn't work use 'font-family: "fontawesome" !important;', or try any other font-family which your fontawesome support (by version).
See more: https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements
I'm busy developing my first custom theme on WordPress. I have converted and created all the files and everything is working as it should. The original files are based on Bootstrap, but I have converted the stylesheets to not be dependant. I am finally at a place where I want to allow users some customization and among other things, would like to add the ability to change theme colors.
I created a separate customize.php file that handles my customizer code. I have also added the WP Color Picker component and it does show up in the WP dashboard > Appearance > Customize window. The problem is that it doesn't actually work...
As part of my testing, to ensure that Bootstrap wasn't affecting anything, I created a div and gave it a custom class name (one that isn't found anywhere else on the website), I gave the div some height and width, and inside, I added a p-tag just to have some content. What I would like to do, is create a section (in the customizer) that will allow users to change the background color of the div
In the customize.php file:
<?php
function myTheme_customize_register($wp_customize){
$wp_customize->add_section('colors', array(
'title' => __('Colors', 'myTheme'),
'priority' => 30
));
$wp_customize->add_setting('bg_color', array(
'default' => '#f0a709',
'transport' => 'postMessage', // I have also tried 'refresh'
));
$wp_customize->add_control( new WP_Customize_Color_Control ($wp_customize, 'bg_color', array(
'label' => __('Background Color', 'myTheme'),
'section' => 'colors',
'settings' => 'bg_color',
)));
}
add_action('customize_register', 'myTheme_customize_register');
In my functions.php:
<?php
function myTheme_customize_css(){ ?>
<style type="text/css">
.hi{
background-color: <?php echo get_theme_mod('bg_color', '#f0a709'); ?> !important;
}
</style>
<?php
}
add_action('wp-head', 'myTheme_customize_css');
require get_template_directory().'/inc/customize.php';
?>
In the Customizer, the section 'Colors' is available and also the Color Picker, but selecting another color does nothing. The option for additional CSS is also available, and to test, when selecting the div and giving it a custom bg-color, the color does indeed change. I have also created another section of code in the customizer.php which handles some custom footer settings, things like heading text and button customization, and that's working just fine. I have a feeling the solution is really simple but I'm just not seeing it. Any help would be greatly appreciated.
The action will be like this :
add_action('wp_head', 'myTheme_customize_css');
You write the action name wrong. It will work as expected.
I used wp-types toolset to create a custom post type and a post relationship to pages; there is now a Post Relationships section at the bottom of every page edit screen. The problem is, I would only like this section to show up on a couple of pages.
Is there something I can add to functions.php (or another alternative) to hide this section from all page edit screens expect for those particular ones.
The section div id that I want to hide is #wpcf-post-relationship and the data post id of the pages that I would like it to be visible are 143 and 23.
-- (update) --
As admin_init is triggered before any other hook when a user access
the admin area, we finally use instead admin_head because action is
just triggered inside the <head> of the admin page (thanks to John).
The easy way is to use a simple CSS rule with the 'admin_head' hook, to do it, like this:
1) create a css file named hide_some_field.css and put it into your active child theme folder, with this code:
#wpcf-post-relationship {
display:none;
}
2) Add this code in your active child theme functions.php file:
add_action('admin_head', 'ts_hiding_some_fields');
function ts_hiding_some_fields(){
// your 2 pages in this array
$arr = array(23, 143);
if(get_post_type() == 'page' && !in_array(get_the_ID(), $arr))
{
wp_enqueue_style( 'hide_some_field', get_stylesheet_directory_uri().'/hide_some_field.css');
}
}
If you use a theme instead, change:
get_stylesheet_directory_uri() by get_template_directory_uri().
Another similar alternative (without an external CSS file) is:
add_action('admin_head', 'ts_hiding_some_fields');
function ts_hiding_some_fields(){
// your 2 pages in this array
$arr = array(23, 143);
if(get_post_type() == 'page' && !in_array(get_the_ID(), $arr))
{
echo '<style type="text/css">
#wpcf-post-relationship {display: none;}
</style>';
}
}
Guys I'm having an issue with the home page title of my wordpress blog after i updated the wordpress to 4.4. I'm not sure if its because of the update. The issue is, I'm getting "Home" prefix for the home page title. Here's my website - www.autodevot.com
In the wordpress Settings > General, in the Site Title section, I've written Autodevot. And in the Tagline section, I've written Automotive World News | Car News and Reviews | Upcoming Cars in India. So earlier, this tagline section was appearing in the home page title. Now for some reason, Its adding "Home" prefix for the home page title. So now the title comes as Home - Autodevot. I need to get rid of that "Home" and want the tagline section to appear in the title like before. Title for rest of the pages are appearing fine. Problem is only with the home page title. I opened the header.php and the code is like this
<?php
if ( ! function_exists( '_wp_render_title_tag' ) ) {
function theme_slug_render_title() {
?>
<title><?php wp_title( '|', true, 'right' ); ?></title>
<?php
}
add_action( 'wp_head', 'theme_slug_render_title' );
}
?>
Any help?
Many sources on this topic points to eithe using a plugin or changing some PHP code. However, a newer feature (WordPress 4.7) allows adding custom CSS to a theme (which is bound to that theme, but is not overwritten at theme updates). This saves the need to create a child theme. This tool is accessed through the "Additional CSS" tab in theme customization.
Taking inspiration from this blog post about how to select the page title in CSS, I've added:
.home .entry-title {display: none;}
to hide the h1 title "Home" on my home page. I suspect that the home class is generic for all front pages (no matter the actual title of the home page).
As an alternative, to remove the title on all pages (but not blog posts):
.page .entry-title {display: none;}
Finally, as explained in the blog post, it is possible to target a specific page with its id:
.page-id-177 .entry-title {display: none;}
where page-id-177 comes from the class attribute of the <body> tag of the page of interest.
Thanks to the live preview, it's easy to see if the CSS is effective!
replace your code with this code
<?php
if ( ! function_exists( '_wp_render_title_tag' ) && !is_home() || !is_front_page() ) {
function theme_slug_render_title() {
?>
<title><?php wp_title( '|', true, 'right' ); ?></title>
<?php
}
add_action( 'wp_head', 'theme_slug_render_title' );
}
?>
You can try this one, Just add your theme functions.php
add_filter('wp_title', 'filter_pagetitle');
function filter_pagetitle($title) {
global $wp_query;
if (is_front_page()){
return $wp_query->post->post_title;
}
}
just change the file name as one of your keyword. For wordpress, change the page title to your keywords.
I did it and works fine now.