I'm running into a bunch of problems with a 'premium' WP theme I purchased. The developers aren't being a very big help besides 'it should work' and 'it works for other people' so I'm just trying to figure it out myself.
Chrome's Dev tools have been my biggest friend so far. The problem I am having with this theme is that my style changes aren't being applied. Now there are three different locations where I could do this. One is style.css another one is custom.less and the 'quick css' box that comes packaged with the theme. Neither of these options work - sometimes some changes will be applied from style.css - but most of the time my changes are not applied. I have started digging in the source (parent) files and started changing those and again - no change.
Now I found out with the help of chrome's devtools that the header file refers to the stylesheets with version numbers. The moment I removed the version number from fw-style-css all my changes were fed through immediately. Now I would like to know where in WP I will have to start digging to get to the header part where I can change the stylesheet details. I already looked up header.php but it refers to and I have no clue what to do after this.
The website in question is just a testing environment until I have everything sorted out, then I will port it over to my main site. The website in question is http://dev.amyranth.com/
If the stylesheet files aren't directly linked in the header.php file, then the stylesheets must be included via the wp_enqueue_style function. Example:
<?php wp_enqueue_style( $handle, $src, $deps, $ver, $media ); ?>
The fourth parameter is "version" which is most likely what you saw in the source code. You should change this every time you make a change to the stylesheet because it will help with browser caching by forcing the browser to download a new version of the file. Otherwise, it will assume that the old cached copy of the stylesheet is still valid.
Update:
The best way would be to do what #ViperCode suggested and create a new stylesheet, then add it to the theme with wp_enqueue_style.
In fact, the very best way would be to create a child theme which extends the premium theme you are trying to customize. That way your changes would be maintained separately and would not be overwritten by theme updates.
The easiest solution would be to search your theme's directory for the function name wp_enqueue_style
Related
I'm in the middle of creating a WordPress theme, which I haven't done in a while, and I ran into a problem regarding mobile CSS.
I embed my CSS file in the functions.php file:
function enqueue_my_custom_styles() {
wp_enqueue_style( 'stylesheet', '/assets/main.css' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_my_custom_styles');
This seems to be working absolutely fine and when I check if the file is linked in a browser, it is showing. However, when I look on my mobile, I can only see basic HTML markup with working Bootstrap 5.0, which is embeded in the header.php file ( I have already tried embedding the CSS into the header.php file, same results)
Is there a specific function that I overlooked or is the problem somewhere else? Thank you.
/* Some time css not working on specific mobile device because third party library impact on your current page or any wordpress plugin install on your website then so you can using media queries and set your target apply on specific device. */
You can used different css for chrome , firefox , safari brower etc.
For more details visit below links
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
1. Css functionality is wp default option – so this is not theme related issue, if you are using any caching plugins or any other caching solutions clear them before checking on mobile.
2. Make sure to clean the mobile cache before checking (every time you make CSS changes)
I am using X theme from themeco, latest version. Created a custom child theme instead of using the ones made available by them. I followed all of the instructions, the functions.php file loads the activation details of the parent theme, but doesn't include the other functions it needs to load. Like header, footer or any other page, even though all of the files are included in the child theme.
Should I remove them from there and just keep the functions.php and style.css files? I will try that, if it solves the problem, otherwise, the functions are just not being there. Tried to view a test code to see which header was it even displaying, I could see the test text written where the header should be but still can't see the header.
Doing an inspection through chrome I could see lots of problems related to revolution slider, js errors, will need time to debug them but would love if anyone got a quick fix for it without me racking brains all over the place.
Edit:
Code
I'm making a web with a Wordpress and modifying some things with a child and css theme. The problem is that the theme uses a folder with the name "Wp-less-Cache" and inside it introduces a "theme-less.css" that it generates automatically. The problem is that now when I try to modify something by css the my mytheme.css (in the child) does not leave me because it tells me that what I want to retouch belongs to the file "theme-less.css" .... and if I tweak the CSS directly in that, it works but when this file is generated again automatically after a while it deletes the modifications that I had made in it.
I would like to know:
Can you disable the wp-less-cache? it is not in my list of plugins or among the plugin folders ...
Can I do something so that my modifications of the child theme are effective if he is active?
Thank you very much
It is used by one plugin called tlg_framework which is a built in plugin with themes that developed by http://www.themelogi.com/
On wordpress 4.9.1, the plugin Menu Social Icons is installed and the theme Twenty Sixteen is being used. The plugin works as expected, except for Stackoverflow and Vimeo icons. The problem is that for these two websites a generic icon will be shown, instead of the one corresponding to these sites.
In the documentation of the plugin it can be found that this issue is well known and they present the solution. However, due to my lack of php knowledge, I have not been able to make it work.
Their solution:
Option: Add Vimeo and Stack Exchange
To use FontAwesome 4.0+, which drops support for IE7, but adds
vimeo.com and stackexchange.com, add this to your theme’s
functions.php file: add_filter( ‘storm_social_icons_use_latest’,
‘__return_true’ );
I have tried including the line add_filter( ‘storm_social_icons_use_latest’, ‘__return_true’ ); in different locations of the functions.php of my theme, without positive results.
Where would be the correct location to add this line of code in the php file?
In terms of their solution not working, I'd suggest that the issue probably isn't in your functions.php file, as all filter functions in your current functions.php file should work.
A couple of notes to consider though:
If you need to modify a WordPress theme, your best option is to create a "Child Theme" to make the changes in, otherwise your updates will be overwritten whenever your theme is updated.
Also, best practice when working on WordPress themes (or just PHP in general) is usually to add your changes at the bottom of the file you're modifying, after a comment to say what they are, and before the ?>.
A good example in this case would be to modify your functions.php file so it finishes like so:
//function to include latest FontAwesome changes - 31/12/2017
add_filter( 'storm_social_icons_use_latest', '__return_true' );
?>
Although, I can't stress to you how useful child themes are in situations like this.
I'm by no means a coder or programmer but i have enough to understand my part and fix small issues or adjust look with basic CSS, and so friend of mine asked me for help and here i am two days later asking you)
There is a Website running Enfold theme which recently were updated and so was lost custom image link at right part of header made by someone-else.
I have restored link code from Cached version of website but have no real understanding how and where to add it back to theme templates. Would appreciate any help, solution, link, advice.
Cheers.
A wild guess, since I don't have Enfold theme (the best would be to ask on the official support), but in your div #header_main in the .inner-container, you had after the #advanced_menu_toggle this piece of code:
<img src="http://vcmt.ca/wp-content/themes/enfold/images/layout/canvas.jpg" alt="canvas" style="max-height:70px;">
Just open the .php file that has the header in it, and paste this code back in. Since the canvas.jpg was located in the /images folder of the theme, that is also gone, so my recommendation is to download the image from the cached version if you can and put it back in the image folder.
Also it would be better to make changes to child theme, so that you can update the functionality of the theme, without loosing any custom added modification, like this site had.
If you're planning on changing the CSS in any WordPress Theme, you want to make sure that you have a child theme installed. The child theme allows you to change/overwrite the CSS and Theme Functions on the theme without losing those changes everytime the theme updates.
You can download the Enfold Child Theme Here:
https://kriesi.at/documentation/enfold/how-to-install-enfold-theme/#why-child-theme
...and if you need to add HTML to the header, you can do so by duplicating the header file from the theme, adding a header file to the child theme, and making your changes in the child theme header file.
Hope this Helps!