In one of my php functions I add some quite simple css. It worked very well until today. Actually the css is still doing his job, but in addition it prints in the middle of my layout whatever is written between the <style></style> tags - in my case it shows .element {display: none !important;} .
My code:
echo'<style>.element {display: none !important;}</style>';
Has there been any update to php or WP that doesn't allow this anymore? Is there any other way to do this?
Thanks a lot for your help!
I am not sure if it might change anything, but can you try print?
Also I think if <style> is not within <head></head> it will not work.
I found a working solution. Previously, I had a function in functions.php, which did some user type specific PHP and also CSS. Now I removed the CSS from functions.php and added it to header.php just before </head>.
The function is in two places now, which I wouldn't prefer, but it works very well.
Still a riddle to me is, how the echo "<style>...</style>"; used to work in functions.php for approx. the last 6 months or so and then suddenly yesterday created mentioned issue.
Btw, I also tried ?><style>...</style><?php and print "<style>...</style>";. All created the same issue. Again, the "<style>" was not shown on the browser, only whatever was inside. Also, the CSS worked. Whatever, statements I entered was interpreted as correct CSS, but in addition also shown as text right between the layout. Here is an example source code at the browser at my example page :
source code at browser
if you wanna to add a custom style to your WordPress theme (that probably you do not design it) its better to add it to custom styles from your admin area.
Related
I was trying to remove a "Search" button on the top left corner of a web site.
After searching here I found a tip here: Best way to find out which php file has generated an html line of code in WordPress
But still after installing the plugin I could not be able to locate the desired html line to simply erase it. Also tried using the css code above to temporary hide it.
.pesquisar {
display: none !important;
}
It did not work. Can somebody help me on how can I erase <button type="submit" value="Pesquisar">Pesquisar</button> from the html code?
I just found a great solution.
To anyone in need to find a specific part of an html code there is a plugin called String Locator: https://br.wordpress.org/plugins/string-locator/
It allows you to find across any file and regex. Ideally the plugin allows editing after identifying the file, but because I was using security plugins I got an error.
Desipte that the path of the located file is shown, so I was able to manually get to the located file and change it.
Another tip is if your file identified with the string plugin is located in a cache folder like it was in my case I recommend cleaning the cache using plugins such as autoptimize or wp fastest cache then do the search again.
When I did there was only one file that remains needing an edit, good luck!
You need to add the class "pesquisar" to the button, then your CSS will work:
<button class="pesquisar" type="submit" value="Pesquisar">Pesquisar</button>
In your CSS you use a class selector:
.pesquisar { // selects the items with class="pesquisar"
display: none !important;
}
You can add a css style= "display:none;" rule
<button type="submit" value="Pesquisar" style="display:none;">Pesquisar</button>
If you cannot find who generates this, maybe it's caused a wp plugin generates that content. Try to locate first who generates the button.
You can use this to hide it:
button[value="pesquisar"]{
display: none !important;
}
Alright, so I struggled with this for days. I'm still in the process of learning PHP. Meanwhile, I'm building a site that I need to make a custom blog template so multiple authors can post blogs on it. The authors know nothing about any code language at all, and therefore, the easiest way out of this (have them manually apply CSS classes) is out of the question. Therefore, I need to apply CSS to all new blog posts but not to any other kind of page dynamically. I've scoured the interwebs trying to find a way out and can't find any solution that works.
Heres what I've tried to implement into my functions page so far:
if (is_singular('post')) {
echo '<link rel="stylesheet" type="text/css">#primary p{margin-bottom: 10px; font-family: Alice; color: #fff; text-align: justify;
text-indent: 50px;}';
}
I know in advance that this code is butchered. I also know that this question is a bit unclear. When the answers start rolling in I'll be glad to clarify in any way I can. I'm still a student so bear with me. Thanks, all.
UPDATE: After a lot of digging around and trying different things I got it figured out. I couldn't understand why so much of my code wasn't working the way the codex said it should. After much frustration, I came to see that I was placing my code in the wrong place. I was trying to work from within functions.php (outside of the loop) but finally got it to work as intended from within it.
For any other students out there just now learning to code within WordPress, the loop is, in fact, the same as the main() within other programs. Many codes only work right from within it. Valuable lessons learned. Thanks to everyone for the help! Trust me, it is appreciated.
OK .. So your code IS butchered ... But not to worry we can work with that.
I am going to break the tags down into separated echo statements so they are better understood. First off you don't need the link tag as you are not calling to a separated CSS file. Use the style tag instead (Of which you need a start tag and an end tag!).
<?php
if (is_singular('post')) {
echo '<style>';
echo ' #primary p{';
echo 'margin-bottom: 10px;';
echo 'font-family: Alice;';
echo 'color: #fff;';
echo 'text-align: justify;';
echo 'text-indent: 50px;';
echo '}';
echo '</style>';
echo '</head>';
}
?>
I think it will be better if you define your CSS class/code in the main CSS file of the theme (usually this is style.css).
Then you can find the render for the posts in your theme (check wp-content/theme/mytheme) and apply the CSS class depending of the conditions.
Using <link rel="stylesheet"> is for linking to an external stylesheet file. You could try something like this:
echo "<link rel='stylesheet' type='text/css' href='author1.css'>";
However, if you wanted to include all of the CSS properties within that same file, you could use a <style> tag. I would recommend against this as it can be difficult to work with since all of the CSS is not formatted/inline.
echo "<style>#primary p { margin-bottom: 10px; font-family: 'Alice'; color: #fff; text-align: justify; }</style>";
Zak! Thank you so much for your help. This is just what I needed. The post is now active on the page. Your time is well appreciated. I have, however, ran into another issue in implementing the solution.
The issue is that even though I was using the is_singular() command to differentiate between post types I kept seeing the same css active on my main page. After some digging, I figured out that this is because I'm using the Beaver Builder plugin. The plugin is a visual editor and uses posts within posts so-to-speak. To fix this issue I have moved to trying to display the css according to author, as all the blogs are published by different authors than the pages.
In my attempt to modify the above if-statement I have looked into the WordPress Codex, finding the get_the_author() and get_the_author_meta() commands. The new issue is so-far that while I've looked up syntax for these commands, I have only been successful in crashing my site, or affecting no change at all. Any help you can offer me in this regard would be a big help. Thank you.
Link
I've looked at other questions/answers on this and none have seemed to work for me.
I have a PHP file that is loaded via AJAX. In that I have...
include('mods/math/include/geometry_styles.php');
The geometry_styles.php file basically looks like this...
<style>
.proof_ol_outdent {
position: relative;
margin-left: -18px;
}
</style>
The .proof_ol_outdent style is not getting recognized by Firebug (or used, for that matter). I also don't seem to get any PHP errors if I mess with the path of the include(), which seems strange. If I change the include to require though, everything breaks.
However, I think that my path is correct because I have a DEFINES file which I also load using include and it's path is include('mods/math/include/geometry_defines.php');. The defines get loaded and used properly using that path.
I have no idea why this isn't working. Any help would be appreciated.
UPDATE: To answer a couple comment questions....
1.) AJAX is loading table rows that fit into <tbody id="problem_area"> </tbody>.
2.) There is a file called ajax_loading.php which loads the content of a user-specified file by id number. Like this: ajax_loading.php?problem_id=34
3.) If I browse directly to ajax_loading.php?problem_id=34 I don't get the <style></style> tags should be present.
I've found an alternate way to get my CSS included. Therefore I'm closing this thread. My feeling is that since the data is being loaded via AJAX, that's causing some kind of problem. I don't know for sure though.
Thanks to all who commented and tried to help.
I'm currently turning a HTML page into a WordPress theme. Throughout the site I have a series of divs that use CSS backgrounds. What is the best practice for linking those images, so the user can change them as they please?
For reference, in the HTML, I have: background-image:url(/site/sprite.png);
You can use custom fields. If you don't know how to make them or you want an easy and robust way to manage them you can find the "Advanced Custom Fields" plugin in the wordpress.org plugin repository. It's free and it's very nice.
The way you would use custom fields here is because you will set those backgrounds with inline style to your theme. Otherwise "the user" will have to know how to change a CSS line of code (not very practical).
If you set them inline they would look something like this:
<div id="divBackground01" style="background: url(<?php echo get_post_meta('$post->ID','div-bg-01',true); ?>);>
</div>
Another option that I've seen people do is make the CSS file in a PHP file... you would use something like:
<style>
#divBackground01 {
background: url(<?php echo get_post_meta('$post->ID','div-bg-01',true); ?>);
}
</style>
Note that it's using PHP because the file would actually be a PHP file... otherwise you can't use PHP in a CSS file. Not sure that it's a very good practice to do this, but it's something doable as another option if you want.
Best to stick with adding the background style inline with the custom field. You can use PHP to make it conditional if needed and you can probably setup 1 post (so you have single ID) with all the custom fields... or whatever way you would prefer to present it to the user is your choice.
I am currently working on a wordpress theme and I have a little problem in my page.
The wpadminbar element is not setting up its style. I have no idea why it is, but it is.
Screen shot:
I had the same problem and added this to the header template:
<?php
/* Always have wp_head() just before the closing </head>
* tag of your theme, or you will break many plugins, which
* generally use this hook to add elements to <head> such
* as styles, scripts, and meta tags.
*/
wp_head();
?></head>
Have you done any debugging with Firebug (a Firefox plugin)? Which styles does your page load?
From a screenshot this one is a bit hard to solve.
First guess: you forgot to add the link to the main WP CSS (called admin-bar.css) in your theme's header.
Have you tried using firebug on it to find where the CSS file is? If it's on the server it's time to narrow it down in the CSS.
Check if you have wp_deregister_style('open-sans'); in your theme it can be the reason of this!