I'm currently tying to get Pushwoosh working for browsers, such as Chrome, Safari and Firefox. The site I'm trying to do this for however is a Drupal 7. My browsers are enabled in the Pushwoosh dashboard. But somehow I can't get it to work.
What I've done so far:
added the manifest.json file to my root and linked
added the service workers to my root
I've add this piece of code to my html.tpl.php (temporary when it works I will add it in a cleaner way)
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title><?php print $head_title; ?></title>
<?php print $head; ?>
<link rel="manifest" href="/manifest.json">
<?php print $styles; ?>
<script src="https://cdn.pushwoosh.com/webpush/v3/pushwoosh-web-notifications.js" async></script>
<script>
var Pushwoosh = Pushwoosh || [];
Pushwoosh.push(["init", {
logLevel: 'error', // possible values: error, info, debug
applicationCode: 'MY CODE',
safariWebsitePushID: 'MY ID',
defaultNotificationTitle: 'MY TITLE',
defaultNotificationImage: 'https://cp.pushwoosh.com/img/logo-medium.png',
autoSubscribe: true,
userId: 'user_id',
tags: {
'Name': 'John Smith'
}
}]);
</script>
<?php print $scripts; ?>
<?php print $gtm_datalayer; ?>
<?php print $gtm_script; ?>
</head>
Everything shows up in the website, also my manifest.json is accesible.
However, I'm doing this on a staging environment which has http but a login is needed to acces and see the website. Is it possible that this restriction is causing the problem, did I go wrong in my setup or did I even forget some config?
Thanks in advance!
Web pushes do not work with http out of the box, therefore https is required for the described solution to work.
However, Pushwoosh do have Chrome and Firefox http pushes, please take a look at this guide - http://docs.pushwoosh.com/docs/chrome-web-push-for-http-websites
Hope it will help!
Related
I am trying to load a custom CSS file for just my 404 page in my child theme's header.php. I am able do that by checking for 404 status with the built-in WP function, and when the condition is true, insert link to the file. For some reason though, the site header (including navigation menu) disappears. Any suggestions to get both the header to display and use the 404 function? Code for linking to the file is below.
<head>
<?php
if ( is_404() )
{
echo '<link rel="stylesheet" type="text/css" href="/wp-content/themes/theretailer-child/404style.css">';
}
?>
<?php wp_head(); ?>
</head>
Thanks in advance.
You should add Your CSS file the Wordpress Way:
add_action('wp_enqueue_scripts', 'my_custom_css');
function my_custom_css()
{
if(is_404())
{
wp_enqueue_style('custom-404-css', get_stylesheet_directory_uri() . '/css/custom-404-css.css');
}
}
This code should be placed in your functions.php on your theme.
Sorry for my bad english. I think same question but with different idea have asked, but my idea is different. What I am asking is I have compile the laravel url in wordpress using curl request. please see my code to better understand what i am trying to say.
<html lang="{{ config('app.locale') }}">
<head>
<!-- ImportInWordpressHeaderStart -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="csrf-token" content="{{ csrf_token() }}" />
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- ImportInWordpressHeaderEnd -->
</head>
<body> .......
//here is my complete html part ignore it.
<!-- ImportInWordpressFooterScriptStart -->
<script type="text/javascript" src="{{ asset('frontend/js/jquery-2.1.0.min.js') }}"></script>
<script type="text/javascript">
$("#login form").on('submit', function (e){
e.preventDefault();
$.ajax({
type: $(this).attr('method'),
url: $(this).attr('action'),
data: $(this).serialize(),
dataType: "json", ........... // the rest ajax code.
<!-- ImportInWordpressFooterScriptEnd -->
The upper part of the code is completly in laravel which is working perfectly. Now see what i have done in wordpress theme header and footer.
<?php
//Laravel Home url
$url = "http://example.com/home";
$ch = curl_init();
// set URL and other appropriate options
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
// grab URL and pass it to the browser
$output = curl_exec($ch);
//Regular expression to excerpt the targeted portion
preg_match('/<!-- ImportInWordpressFooterStart -->(.*?)<!--ImportInWordpressFooterEnd -->/s', $output, $footer);
preg_match('/<!-- ImportInWordpressFooterScriptStart -->(.*?)<!-- ImportInWordpressFooterScriptEnd -->/s', $output, $script);
// close curl resource, and free up system resources
curl_close($ch);
?>
<?php echo $footer[0];
wp_footer();
echo $script[0];
?>
Now in laravel when i clicked on login it is logged in perfectly but when i try to do the same in wordpress it gives me token mismatch error
http://example.com/wordpress
The wordpress and laravel are both in same domain i don't want to create the same laravel header footer again in wordpress. any better idea will be appreciated. Thanks
each cookie session has its own csrf token, and you seemingly make no attempt to transfer the cookie session id recieved by curl to the browser, or vise-versa. thus the browser will attempt to login with it's own cookie session, and with the csrf token of curl's cookie session, that definitely wont work.
solution: make curl fetch the csrf token using the cookies of the browser.
$str='';
foreach($_COOKIE as $n=>$v){
$str.=$name.'='.$v.'; ';
}
curl_setopt($ch,CURLOPT_COOKIE,$str);
note that if the page where you get the csrf token sends any new Set-Cookie headers, curl will not transfer those headers to the browser unless you write some code to explicitly do this. for example, if the url where you fetch the cookie session also regenerate the session id of the browser, and you dont transfer the new id to the browser, it will effectively logout the browser.
In one file (test_ajax.php) I have a which on change loads another page (registration_form_race_type.php) with a short message via jQuery Ajax(). It works fine when "test_ajax.php" is accessed via its absolute URL which is :
http://46.20.119.207/~asuntosf/wordpress_test/wp-content/themes/test_ajax/test_ajax.php
But amazingly enough, the Ajax functionality ceases to work if the exact same page "test_ajax.php" is accessed via its WordPress address which is :
http://46.20.119.207/~asuntosf/wordpress_test/?page_id=13
I insist these both URLs point to the SAME two PHP files.
Here is the code of "test_ajax.php" :
<?php
/*
Template Name: Page Test Ajax 01
*/
?>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script type="text/javascript">
jQuery(function () {
jQuery('#event_id_from_list').change(function() {
var event = jQuery("#event_id_from_list").val();
var data = "event_id=" + event;
jQuery.ajax({
url: 'registration_form_race_type.php',
type: 'GET',
data: data,
success: function(data){
jQuery('#div_race_type').html(data);
}
});
});
});
</script>
</head>
<body>
<select class='required' type="text" name="event_id_from_list" id="event_id_from_list" />
<option value='Paris'>Paris</option>
<option value='London'>London</option>
<option value='Rome'>Rome</option>
</select>
<div id='div_race_type' class='section'>
<?php require_once('registration_form_race_type.php'); ?>
</div>
</body>
<html>
And the code of the page called via Ajax, "registration_form_race_type.php" :
<?php if (isset($_GET['event_id'])) echo 'you selected '.$_GET['event_id']; ?>
There is nothing strange about this behavior. You are simply referring to registration_form_race_type.php in your jQuery and it does just what you are asking it to do, which is to look for registration_form_race_type.php in the current directory. registration_form_race_type.php lives inside http://46.20.119.207/~asuntosf/wordpress_test/wp-content/themes/test_ajax/ and not in http://46.20.119.207/~asuntosf/wordpress_test/.
If you would like to access registration_form_race_type.php from http://46.20.119.207/~asuntosf/wordpress_test/?page_id=13, your code needs to change to:
jQuery.ajax({
url : 'wp-content/themes/test_ajax/registration_form_race_type.php',
type : 'GET',
data : data,
success : function (data) {
jQuery('#div_race_type').html(data);
}
});
I am new to wordpress.. I have installed my theme named 'hare'. Now I want to add some javascripts files as well as css files into the index.php page. But I am not finding the desired output.
following is the code i have written..
<?php get_header(); ?>
// Some content
<?php get_footer(); ?>
<!-- JQuery libs
================================================== -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!-- js jQuery wait for images Plugin ====================== -->
<script src="<?php bloginfo(template_directory ); ?>/javascripts/jquery.waitforimages.js"></script>
<!-- js jQuery flexslider Plugin ====================== -->
<script src="<?php bloginfo(template_url); ?>/javascripts/jquery.flexslider-min.js"></script>
<!-- jQuery Cycle Plugin ====================================== -->
<script src="<?php bloginfo(template_url); ?>/javascripts/jquery.cycle.all.js"></script>
<!-- jQuery Cycle Plugin ====================================== -->
<script src="<?php bloginfo(template_url); ?>/javascripts/jquery.fullscreen-min.js"></script>
<!-- js jQuery jcarousellite Plugin ====================== -->
<script src="<?php bloginfo(template_url); ?>/javascripts/jcarousellite_1.0.1.min.js"></script>
<!-- js Fancybox Plugin ================================= -->
<link rel="stylesheet" href="<?php bloginfo(template_directory); ?>/javascripts/fancyBox-2/jquery.fancybox.css">
<script src="<?php bloginfo(template_url); ?>/javascripts/fancyBox-2/jquery.fancybox.pack.js"></script>
<!--fancybox helpers-->
<link rel="stylesheet" href="<?php bloginfo(template_directory); ?>/javascripts/fancyBox-2/helpers/jquery.fancybox-buttons.css"/>
<script src="<?php bloginfo(template_url); ?>/javascripts/fancyBox-2/helpers/jquery.fancybox-buttons.js"></script>
<!-- js jQuery qtip plugin ====================== -->
<script src="<?php bloginfo(template_url); ?>/javascripts/jquery.qtip-1.0.0-rc3.min.js"></script>
<!-- toTop ====================== -->
<script src="<?php bloginfo(template_url); ?>/javascripts/goToTop.js"></script>
<!-- js jQuery my own functions ====================== -->
<script src="<?php bloginfo(template_url); ?>/javascripts/functions.js"></script>
<!-- <script src="javascripts/jquery.tweet.js"></script> -->
<!-- JS twitter scripts ================================== -->
<script src="http://twitter.com/javascripts/blogger.js"></script>
<script src="http://twitter.com/statuses/user_timeline/EnvatoWebDesign.json?callback=twitterCallback2&count=5"></script>
<!-- End Document
================================================== -->
</body>
</html>
Is my this way is correct??
If not then please correct me..
Thank you in advance
In your comments you may be referring to these guidelines from yahoo. There are, however a few caveats to this rule. Most importantly, Google Analytics prefers it's snippet be placed within the <head> section and won't allow you to use Analytics for Webmaster Tools authentication unless the snippet is in head.
More importantly, you don't want to include your JS and CSS files directly in your theme templates like this. It works, but it is very un-WordPress-y.
The "correct" way to include additional scripts and styles in a WordPress theme is to use the wp_enqueue_script() and wp_enqueue_style() functions within a hook in functions.php, like so:
function my_custom_styles_function() {
wp_enqueue_style( 'my-style', get_stylesheet_directory() . DS . 'javascript' . DS . 'my-plugin' . DS . 'my-plugin-style.css', array(), '1.0' );
...
}
add_action('wp_enqueue_scripts', 'my_custom_styles_function');
WordPress actually has jQuery included by default, although without the $ shortcut established. You can use WordPress's jQuery and start all of your custom scripts with jQuery(...); instead of $(...); but this can cause problems for some plugins. If you want to include your own version of jquery, you should first use wp_dequeue_style() to dequeue the "built-in" jQuery.
Finally, if you do want to include you scripts in the footer, the wp_enqueue_script() function has a flag, $in_footer to defer particular scripts to the footer.
The answer provide by #qccreative is the right one. You should include all the js/css files you need to your page using the functions.php file that you must have within your theme. if you dont have it just create one and make a function for import your files just like the answer above.
you can even manage in what page you want to load your scripts.
also this is the safest way WP provide for including scripts in an organized way.
this hook that wordpress provide WP_ENQUEQUE_SCRIPTS its a function that will add the scripts within your action to the site.
heres another example:
function load_javascript_files(){
wp_register_script( 'jquery-accordion', get_template_directory_uri() . '/js/jquery.accordion.js', array('jquery'),true );
wp_enqueue_script('jquery-accordion');
}
add_action('wp_enqueue_scripts', 'load_javascript_files');
Good luck buddy
From the code you have put you would create a header.php file in your themes folder and include the JS in there. An example would be like follows:
`<!DOCTYPE html>
<html>
<head>
<title><?php bloginfo( 'name' ); ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="<?php bloginfo( 'template_url' ); ?>/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="<?php bloginfo( 'template_url' ); ?>/jQuery-validate.js" type="text/javascript"></script>
<link rel="stylesheet" href="<?php bloginfo( 'template_url' ); ?>/style.css" type="text/css" />
<?php wp_head(); ?>
</head>
<body>
/**
* Proper way to enqueue scripts and styles.
*/
function custom_links() {
wp_enqueue_style( 'style-name', get_stylesheet_uri() );
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'custom_links' );
If you need to linked your CSS file than you can use wp_enqueue_style and if you need to linked JavaScript than you can use wp_enqueue_script.
wp_enqueue_scripts this is work on frontend side of wordpress.
admin_enqueue_scripts this is works on backend side of wordpress.
I hope it's help to all people.
I am using mediaelement.js plugin for WordPress (v2.1.7) and want to display a video with this beautifull "Backlight" style which you can see
here in action:
http://mediaelementjs.com/examples/?name=backlight
On this page there are two setup instructions which I guess is only for the non-Wordpress version:
I. Add Plugin Script
<script src="jquery.js"></script>
<script src="mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="mediaelementplayer.css" />
<!-- here's the plugin -->
<script src="mejs-feature-backlight.js"></script>
Ok to achieve this I added this script:
<script type='text/javascript' src='<?php echo bloginfo('template_url'); ?>/js/mejs-feature-backlight.js></script>
in my header.php file of my theme & copied the file "mejs-feature-backlight.js" in the folder .../wp-content/themes/themename/js .
The second instruction says the following:
II. Include the plugin in the features list
jQuery(document).ready(function($) {
// create player
$('#player1').mediaelementplayer({
// add desired features in order
features: ['playpause','current','progress','duration','volume','fullscreen','backlight'],
// the time in milliseconds between re-drawing the light
backlightTimeout: 200
});
});
I am not really sure where to copy this code-snippet. So while just guessing I copied it in the file: "mediaelement-and-player.js" which seemed to be the best choice for me in this situation.
But now when I try to post a video
which shortcode I have to use? I have tried the following:
[video src="http://mysite.com/mymedia.mp4" width="640" height="360" backlight="true"] or
[video src="http://mysite.com/mymedia.mp4" width="640" height="360" id="player1"]
But sadly it do not work. The Video plays fine but I do not see any backlight...
Any help would be greatly appreciated.
First off,
<script type='text/javascript' src='<?php echo bloginfo('template_url'); ?>/js/mejs-feature-backlight.js></script>
is wrong. It should be:
<script type='text/javascript' src='<?php bloginfo('template_directory'); ?>/js/mejs-feature-backlight.js></script>
or
<script type='text/javascript' src='<?php echo get_bloginfo('template_directory'); ?>/js/mejs-feature-backlight.js></script>
Secondly the id for the video player must match the ID in:
jQuery(document).ready(function($) {
// create player
$('#player1').mediaelementplayer({
// add desired features in order
features: ['playpause','current','progress','duration','volume','fullscreen','backlight'],
// the time in milliseconds between re-drawing the light
backlightTimeout: 200
});
});
that is "#player1". If you can dynamically generate the ID and put in the script then you are fine. Hence the location of the script should be in the same page (or php file if required) as the file that generates the video player not in an external JS file.
Hope that helps.