I'm setting up a staging site to test changes before putting them live, but the stage site's responsive design isn't working.
I deactivated all my plugins, but the responsive design still doesn't work on stage site.
I created a new local copy of the original site and added the plugins one by one and the responsive design worked, so the plugins aren't breaking it.
I believe I've narrowed down the issues to a problem that occurs in the enqueue code in functions.php located in the child-theme directory
function add_theme_scripts() {
$parent_style = 'Karma'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'Karma-child',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
wp_enqueue_script( 'script', get_stylesheet_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );
Here's the live site: www.alliancechemical.com
Here's the stage site: www.alliancechemical.com/staging
I expect that when the screen resolution gets smaller into mobile territory then the breakpoint media query will take effect and make the css adjustments.
On your live site your theme css files are version 4.7.15 and on your staging 5.2.4 and they change the order the of the selectors.
Css on #main on staging:
#main.tt-slider-karma-custom-jquery-2 {
margin-top: -189px;
}
#media only screen and (max-width: 1023px)
#main.tt-slider-karma-custom-jquery-2 {
margin-top: -157px; //Disabled
}
Css on #main on live:
#main.tt-slider-karma-custom-jquery-2 {
margin-top: -157px;
}
#main.tt-slider-karma-custom-jquery-2 {
margin-top: -189px; //Disabled
}
The solution is to deregister the mobile css and then enqueue it again with the theme css as a dependency.
Related
hello i have a problem with css in my child theme its not working this is the code i use in functions.php
the problem is the style in file app.css is not applying in the page but when i move the same css to the costomize ( additionnal css) its working perfectely.
if (!function_exists('succulents_qodef_child_theme_enqueue_scripts')){
function succulents_qodef_child_theme_enqueue_scripts() {
$parent_style = 'succulents-qodef-default-style';
wp_enqueue_style( 'customstyle', get_stylesheet_directory_uri() . '/app.css');
wp_enqueue_style('succulents-qodef-child-style', get_stylesheet_directory_uri() . '/style.css', array($parent_style));
// wp_enqueue_style('succulents-custom', get_stylesheet_directory_uri() . '/app.css', array($parent_style));
}
add_action( 'wp_enqueue_scripts', 'succulents_qodef_child_theme_enqueue_scripts' );
}
when i see the code source of the page i can see the app.css but for some reason its not applying
I need to include some external css files, i use this snippet in functions.php but neither of them works.. Why..?
add_action( 'wp_enqueue_scripts', 'add_css' );
function add_css() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
wp_enqueue_style( 'style', get_template_directory_uri().'/assets/css/bootstrap.css' );
}
I'm using Twenty-Twenty-One child theme
This is my style.css
/*Theme Name: Twenty Twenty-One Child
Theme URI: https://wordpress.org/themes/twentytwentyone/
Template: twentytwentyone
Author: the WordPress team
Author URI: https://wordpress.org/
*/
h2{
color:red!important;
} */
h2 is to see if it works.
If you're using a child theme, you want to use get_stylesheet_directory_uri() instead of get_template_directory_uri - Unless the stylesheets are part of the parent theme.
function add_css() {
wp_enqueue_style( 'parent-style', get_stylesheet_directory_uri().'/style.css' );
wp_enqueue_style( 'style', get_stylesheet_directory_uri().'/assets/css/bootstrap.css' );
}
Depending on how your parent theme loads it's styles your function will vary. You can check the Enqueue stylesheet section in the Theme handbook for more clarification. Below is their example if the parent theme loads its style using a function starting with get_stylesheet
Make sure you are using the correct parent handle, 'parent-style' is used for TwentyFifteen theme for example.
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
$parenthandle = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
$theme = wp_get_theme();
wp_enqueue_style( $parenthandle, get_template_directory_uri() . '/style.css',
array(), // if the parent theme code has a dependency, copy it to here
$theme->parent()->get('Version')
);
wp_enqueue_style( 'child-style', get_stylesheet_uri(),
array( $parenthandle ),
$theme->get('Version') // this only works if you have Version in the style header
);
}
You should also look at the wp_enqueue_style code reference as the handle for your bootstrap style should probably not be style as it needs to be unique e.g. bootstrap-style
this is driving me insane.
child theme .css is loaded, after the parent style, but the CSS is just not applied / doesn't override, I've searched around and I see several other people complaining about this.
Enqueing the style or even adding priority to it does not solve it.
Adding the same CSS via the theme customizer, the CSS is actually applied, so the CSS itself is not the problem here.
What can I do more?!
I finally found an enque setting that solves it,
function my_theme_enqueue_styles() {
wp_register_style(
'child-style',
get_stylesheet_directory_uri() . '/style.css',
array(),
filemtime( get_stylesheet_directory() . '/style.css' )
);
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style') );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
apparently what made a difference for me is the "array('parent-style')" value in the function atributes, must investigate it further but this was the only thing that solved it.
Have you included a dependency in the wp_enqueue_script()?
/**
* Proper way to enqueue scripts and styles
Example...
*/
function wpdocs_theme_name_scripts() {
wp_enqueue_style(
'stylesheet-name', // it will append '-css' in your source
get_template_directory_uri() . '/css/stylesheet-name.css',
array('parent-style'), // dependants (reliable on other stylesheet)
'null', // version, null or version number (1.0.1 etc)
'all' // media
);
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );
Note: if you have a version number in your enqueue then the cache could stop it from loading. Some people use date() to change the value each time it refreshes...
Using a child theme in wordpress, my styles are not overwritting styles shown in the index. But they do overwrite parent theme css.
I cant find the original code and ive added the below into functions.php to set child-theme.css as the default stylesheet.
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', PHP_INT_MAX);
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'parent-style' ) );
}
CSS I'm trying to add but isn't finding -
body.custom-background {
background-size: cover !important;
}
Web inspector not locating child-theme.css -
Solved it by locating the first stylesheet (stack-88 as displayed in image above) and adding the line of code in this file with !important which then overwrote the index styles.
I want to add a image to the left of the site-title: mysimpledevotion.com
How can I do that?
Would it be easier to make an image of both the text and pic, rather than trying to just add a small pic (icon) next to the text? I'm not talking about the favicon but rather the site-title MY SIMPLE DEVOTION on the front page.
I found two options to achieve this.
1. Using CSS before to inject the image
The major problem with this approach is that you cannot use relative paths; i.e, the image url must be absolute, otherwise it will not work consistently on all pages of the website.
To do so either add the following CSS to the "Additional CSS" part of your theme (when customizing it), or add it in the style.css of your custom child-theme (and make sure to add the style.css using the functions.php correctly).
.site-title a:before{
content:"";
background-image:url('http://path/to/my/image.jpg');
display: inline-block;
background-size: 1em 1em;
width: 1em;
height: 1em;
}
This will make the image correspond to the text size as well, and you can add additional CSS properties such as border-radius: 50%.
2. Using theme's filters to inject image
This approach heavily relies on the used theme to define appropriate filters where you could inject the image HTML. Here is an example of injecting an image to the Astra theme using a custom child-theme.
functions.php:
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_uri() );
}
if( ! ( function_exists( 'wp_get_attachment_by_post_name' ) ) ) {
function wp_get_attachment_by_post_name( $post_name ) {
$args = array(
'posts_per_page' => 1,
'post_type' => 'attachment',
'post_mime_type' => 'image',
'name' => trim( $post_name ),
);
$get_attachment = new WP_Query( $args );
if ( ! $get_attachment || ! isset( $get_attachment->posts, $get_attachment->posts[0] ) ) {
return false;
}
return $get_attachment->posts[0]->guid;
}
}
add_filter( 'astra_site_title', 'add_image_to_site_title' );
function add_image_to_site_title( $original_title ) {
$image = wp_get_attachment_by_post_name( 'my-image-post-name' );
$html = '<img src="' . $image . '" alt="" class="title-image">';
return $html . $original_title;
}
?>
style.css:
/*
Theme Name: My Astra
Template: astra
*/
.title-image {
display: inline-block;
width: 1em;
height: 1em;
}
I hope this helps :)
That is called favicon and can be added, if you are using theme which has that option included then can be checked by Theme Options within your wordpress admin (check on the left side). If it's isn't there then check Appearance >> Customize.
Even you cannot find there then check theme documentation. Try avoiding adding any additional code, it might conflict with existing.
Even it's not in theme documentation then do following steps to add it
Go to Appearance >> Editor
Click on header.php
Add the following code between <head></head>
<link rel="shortcut icon" type="image/x-icon" href="your-image-link" />