We know that in WordPress themes we often provide theme options where a layman who doesn't know the coding can also make changes in font style, color etc.
so when we generate user generated CSS in a php file how does it get implemented in the live website.
Code in css-functions.php →
function selected_typography() {
$output='';
$h1typography = of_get_option('h1typography');
$h2typography = of_get_option('h2typography');
$h3typography = of_get_option('h3typography');
$h4typography = of_get_option('h4typography');
$h5typography = of_get_option('h5typography');
$h6typography = of_get_option('h6typography');
if ($h1typography) {
$output.='h1{
font-family:'.tmarketo_charito_load_google_font_styles($h1typography['face']).';
font-size:'.$h1typography['size'].';
font-weight:'.$h1typography['style'].';
color:'.$h1typography['color'].';
}
h1 a{
font-family:'.tmarketo_charito_load_google_font_styles($h1typography['face']).';
font-size:'.$h1typography['size'].';
font-weight:'.$h1typography['style'].';
}';
}
if ($h2typography) {
$output.='h2{
font-family:'.tmarketo_charito_load_google_font_styles($h2typography['face']).';
font-size:'.$h2typography['size'].';
font-weight:'.$h2typography['style'].';
color:'.$h2typography['color'].';
}';
}
return $output;
}
But the above CSS is not getting implemented on the live website. that means h2 and h1 don't show any change. Any suggestions or a Fix?
Additional information →
I purchased a premium theme → they are also doing it like this → https://www.screencast.com/t/GBvrEvqG98 and it works like a charm in their theme.
The user generated CSS its just 'echoed' either in the head or in the footer, using an action to do so, like this:
function hook_css() {
$my_css = selected_typography();
echo '<style>';
echo $my_css;
echo '</style>';
}
add_action('wp_head', 'hook_css');
For this to work, you need to make sure:
The values you expect from the function and from get_option are correct.
There are no syntax errors.
The style block is showing when inspecting the <head> block.
You are modifying the correct files.
There is no CSS overriding what you are trying to apply.
This is a bit of a follow on from this question/answer: https://stackoverflow.com/a/4152528/348922
I'm simply not sure how to apply this to my situation (if it's at all possible).
I have a container div that when a button is clicked a file is loaded into the div via jquery:
var root = location.protocol + '//' + location.host;
$(".button-book").click(function(e) {
e.preventDefault();
$('#container').load(root+'/loaded-file.php');
});
Fine. BUT that file has a number of text strings that I need wrapped in php in order to hook into them for translation purposes (using WPML plugin for Wordpress):
<?php _e('Arrival Date', 'mywptheme'); ?>
<?php _e("Day", 'mywptheme'); ?>
<?php _e("Month", 'mywptheme'); ?>
<?php _e("Year", 'mywptheme'); ?>
// etc...
Obviously this doesn't work when the file is loaded dynamically. Is it at all possible or am I completely wasting my time?
Your issue is that _e(...) is a wordpress function, so when this file (loaded-file.php) is executed outside of wordress, it does not work. Its not actually anything to do with jquery - if you visit the file directly in your browser it wont work either.
Simply add the following to the top of loaded-file.php:
require($_SERVER['DOCUMENT_ROOT'].'/blog/wp-blog-header.php');
Adjust for your actual wordress location, in the above case wordpress is in domain.com/blog/
I may be going about this all wrong, but here goes.... Im trying to use JavaScript in a WP theme file to do conditional PHP includes based on CSS media queries and pseudo-elements.
In the CSS I use a media query to check for mobile devices in portrait mode, add a hidden :after element to the body under this query with content="mobile_portrait" attribute.
I then wanted to go on the homepage template and use JavaScript like this:
var size = window.getComputedStyle(document.body,':after').getPropertyValue('content');
if (size == 'mobile_portrait') {
<?php
add_action( 'genesis_after_header', 'do_this' );
function do_this() {
require(CHILD_DIR.'/do_this.php');
}
?>
}
else {
<?php
add_action( 'genesis_after_header', 'do_the_other' );
function do_the_other() {
require(CHILD_DIR.'/do_the_other.php');
}
?>
}
It seems like WP is skipping the JavaScript and parsing the PHP because if I take out the else it just loads do_this.php whether the Java check returns true or false, if I leave the else in, it breaks the site :(
Ideas about what im doing wrong? or a better way to load PHP files based on media queries?
Thanks in advance
PHP and Javascript cannot be used interchangeably like you are trying to do.
PHP is the renderer, it is building the output (building the Javascript)
The PHP will be run, regardless of where they are put inside a Javascript conditional like you have, as the Javascript conditionals have no bearing on them being executed.
==
Now to add a solution:
Maybe use the javascript like you have setup simply redirect to the phpfile you want to run for a given view:
var size = window.getComputedStyle(document.body,':after').getPropertyValue('content');
if (size == 'mobile_portrait') {
window.location = '<?= CHILD_DIR.'/do_this.php'; ?>';
}
else {
window.location = '<?= CHILD_DIR.'/do_the_other.php'; ?>';
}
So have different pages that do the necessary includes based on the media query
I'm trying to remove unwanted scripts from my custom joomla template header, which I've managed to remove everything except for this:
<script type="text/javascript">
jQuery(document).ready(function()
{
jQuery('.hasTooltip').tooltip({});
});
</script>
I've searched for hours and I've tried numerous things to get it removed, but I can't seem to get rid of it. Here's what I've done to remove the other scripts I don't want (for anyone else who has this issue):
# unset frameworks
JHtml::_('bootstrap.framework',false);
JHtml::_('jquery.framework',false);
# unset scripts
unset($doc->_scripts[$this->baseurl.'/media/jui/js/jquery.min.js']);
unset($doc->_scripts[$this->baseurl.'/media/jui/js/jquery-noconflict.js']);
unset($doc->_scripts[$this->baseurl.'/media/jui/js/bootstrap.min.js']);
If someone could help me remove that tooltip javascript, that would be fantastic. Oh and I don't want to touch the core files, so I'm trying to remove it from the template index.php file itself.
Some component/Module/Plugin is calling the function JHTML::_('behavior.tooltip'). and that function add your code.
you can do:
The dirty way: go to libraries\cms\html\bootstrap.php and change the file at the method tooltip(). but remember it's a core file so upgrade can overide your changes.
The clean way, find the component that adds this code and remove or change it.
Good Luck
You'll have to manually parse $doc->_script. The $doc->_scripts array contains scripts that are linked to another source while $doc->_script is for script declarations like the tooltip one.
I managed to get rid of the embedded javascript using this code in my template's index.php file:
unset($this->_script['text/javascript']);
disclaimer: I am not a PHP developer, so use above code at your own risk :)
At the end of your web root index.php (not template, http://domain.com/index.php) replace the $app->execute(); line with the following:
// Start the output buffer.
ob_start();
// Execute the application.
$app->execute();
// Get buffer
$buffer = ob_get_clean();
// Change HTML
$buffer = str_replace('<script type="text/javascript">'.chr(10).'jQuery(document).ready(function(){'.chr(10).' jQuery(\'.hasTooltip\').tooltip({"html": true,"container": "body"});'.chr(10).'});'.chr(10).' </script>','',$buffer);
// Output buffer
echo($buffer);
Note that you would need to use the EXACT HTML that's being created by the module. This is what my module is creating, yours could be slightly different.
In addition to doing HTML rewrites like this, you could also tidy the output, remove links to modules, etc.
I also use this for doing things like changing the copyright year on a website. In a module position, I reference the current year as "{year}" and then I add another str_replace which does the following:
$buffer = str_replace('{year}',date('Y'),$buffer);
Bingo, always shows the current year.
Enjoy...
Based on Joomla documents, 2 things to consider:
a) In the below code, you're actually enabling/including bootstrap and jquery:
# unset frameworks
JHtml::_('bootstrap.framework',false);// including bootstrap!
JHtml::_('jquery.framework',false);// including jquery!
When bootstrap is enabled, joomla automatically enables jquery, and if joomla enabled jquery, joomla automatically enables tooltip.
Just don't call these functions. The unset you used will remove bootstrap and jquery correctly:
unset($doc->_scripts[$this->baseurl.'/media/jui/js/jquery.min.js']);
unset($doc->_scripts[$this->baseurl.'/media/jui/js/jquery-noconflict.js']);
unset($doc->_scripts[$this->baseurl.'/media/jui/js/bootstrap.min.js']);
unset($doc->_scripts[$this->baseurl.'/media/jui/js/jquery-migrate.min.js']);
b) if the tooltip script is still included, it's probably inserted by JHtml::_('behavior.tooltip'); somewhere in the used component.
Lastly, never never never modify Joomla core files. it's a worst-practice.
PS.
For those who mentioned that the tooltip script is inserted but they don't find it in the $doc, that's because the $doc doesn't contain inline scripts.
I have already meet this issue, I am using Joomla 3. If it is your case then you can solve it by doing this :
Joomla 3 comes with jQuery on board, so by adding Joomla yourself, this may generate the issue.
Also make sure you include your jQuery over <jdoc:include type="head" />. If you necessary wants to include it. But I do not recommend this.
Hope this helps
I had the same problem when I was building a Joomla template/site with only HTML5, CSS3 and some small jQuery plugins for effects. It was unworthy of including heavy Bootstrap just to show some tooltips which I also didn't use at all.
Althought I already unset media/jui/js/bootstrap.min.js from JDocument but these lines of code
jQuery(document).ready(function(){
jQuery('.hasTooltip').tooltip({"html": true,"container": "body"});
});
were still appended by libraries/cms/html/bootstrap.php. So I got error "function tooltip not found".
I solved that by adding an empty function to my template's JS file.
jQuery.fn.tooltip = function (option) { };
There's a Joomla Plugin available which unsets Bootstrap and also removes the tooltip function snippet wich is inserted by JHtml::_('behavior.tooltip'); somewhere in any component.
See here: Disable Bootstrap Plugin
Create a system plugin with the follow code.
The First foreach loop unsets the .js file(s) added to the head. And the next foreach loop unsets the js code injected inside <script> tags.
There are two separate properties containing the scripts the _script & _scripts
public function onBeforeCompileHead() {
// Front end
if ($this->app instanceof JApplicationSite) {
$doc = JFactory::getDocument();
$search = array(
// 'jquery',
// 'caption.js',
// 'bootstrap.min.js',
// 'core.js',
// 'keepalive.js',
// 'punycode.js',
// 'validate.js',
// 'calendar.js',
// 'calendar-setup.js',
// 'mootools-more.js',
// 'modal.js',
// 'ajax-chosen.min.js',
// 'tabs-state.js',
// 'frontediting.js',
// 'html5fallback.js',
// 'jui/js/bootstrap.min.js',
// 'jquery.min.js',
'jui/js/',
'system/js/',
// 'text/javascript'
);
foreach ($doc->_scripts as $key => $script) {
foreach ($search as $findme) {
if (stristr($key, $findme) !== false) {
unset($doc->_scripts[$key]);
}
}
}
foreach ($doc->_script as $key => $script) {
if (stristr($key, 'text/javascript') !== false) {
unset($doc->_script[$key]);
}
}
}
}
I have a wordpress theme that uses PHP to output different blocks of Javascript depending on settings. The code uses a function from an external javascript file (backstretch) that is loaded in the footer.
The theme doesn't load the appropriate images properly unless the backstretch javascript is loaded in the head, and I think it's because the PHP is echo'ing the blocks of code that call the script way before the footer is even loaded (probably wrong assumption).
Is there a way to echo the blocks of Javascript calling Backstretch code straight to the footer (or after backstretch is loaded in the footer)?
The php is echoing the JS like this:
if (x == x) { ?>
<script>
jQuery(document).ready(function(){ //code});
</script>
<?php // more code
If I run the javascript in the head (Backstretch javascript) the console sends this error:
"Uncaught TypeError: Object function (e,t){return new b.fn.init(e,t,r)} has no method 'backstretch' "
(jQuery is being loaded in the head by the way)
Thanks guys
Actually, theoretically, the position of the script shouldn't matter much for this. The point of jQuery.ready() is that the inside function will not run until the entire DOM has been loaded. "The entire DOM" includes the page's footer, and the Javascript files you're waiting on. However, it's possible that they also wait on the DOM before initializing, and thus jQuery's ready function is called first.
Some of your time-thinking terminology is a little hard to understand though - remember that PHP writes its entire document out to the user a long, long time (computer-wise) before your browser begins parsing any of the HTML.
You could just move your code block to the right place, or alternatively try this:
Start your PHP code with $footer = "";
Then as you go along you can do $footer .= "<script>jQuery(document).ready(...)</script>";
And finally in the right place just echo $footer;.
Edit your functions.php file
enclose the script in a php function e.g:
<?php
function my_javascript_function_call(){
<script>
....
</script>
}
?>
now add this function
add_action('wp_footer', 'function my_javascript_function_call');
The javascript will fire in your footer..
happy coding :)