I am building a Wordpress theme and I want to add Magnific Popup - dimsemenov.com/plugins/magnific-popup/
I managed to get it working with single images with the following code in my functions.php file:
/**
* Add title back to images
*/
function pexeto_add_title_to_attachment( $markup, $id ){
$att = get_post( $id );
return str_replace('<a ', '<a title="'.$att->post_title.'" ', $markup);
}
add_filter('wp_get_attachment_link', 'pexeto_add_title_to_attachment', 10, 5);
add_action('wp_enqueue_scripts', 'enqueue_magnificpopup_styles');
function enqueue_magnificpopup_styles() {
wp_register_style('magnific_popup_style', get_stylesheet_directory_uri().'/js/magnific-popup.css', array('style.css'));
wp_enqueue_style('magnific_popup_style');
}
add_action('wp_enqueue_scripts', 'enqueue_magnificpopup_scripts');
function enqueue_magnificpopup_scripts() {
wp_register_script('magnific_popup_script', get_stylesheet_directory_uri().'/js/jquery.magnific-popup.min.js', array('jquery'));
wp_enqueue_script('magnific_popup_script');
wp_register_script('magnific_init_script', get_stylesheet_directory_uri().'/js/jquery.magnific-popup-init.js', array('jquery'));
wp_enqueue_script('magnific_init_script');
}
However it says 'Image could not be loaded' when I click an image in a Wordpress Gallery as it obviously has different HTML markup. Has anyone found a way to make this work with Wordpress Galleries? Thanks.
Something like this should work if the images are linked to "image file". Put this in a javascript file and enqueue the file after jQuery is ready.
jQuery(document).ready(function($) {
$(".gallery-icon a").magnificPopup();
});
Related
I've got a page template which is acting as a 'Landing Page' and doesn't need specific styles from other areas of the website.
I've managed to remove the unwanted styles and add the new styles by targeting the page ID but I need it to only happen when it's a particular page template. I can't seem to get it to work when doing a check against the page template via the is_page_template() function.
In functions.php:
if ( !function_exists('scripts_and_css') ) {
function scripts_and_css() {
if(is_page(79806))
{
wp_enqueue_style('landingpage', get_stylesheet_directory_uri() . '/css/landing__page.css', '', null);
wp_enqueue_script('landingpage', get_stylesheet_directory_uri() . '/js/landing-page.js', null);
wp_dequeue_style( 'layout', get_template_directory_uri().'/css/layout.css', '', null );
}
}
}
add_action('wp_enqueue_scripts', 'scripts_and_css');
If I then change this to use the template name, it completely fails and doesn't load or remove any of the scripts or stylesheets.
My page template filename called page-landing-page.php:
<?php
/**
* Template Name: Landing Page
* The template for displaying the content for the landing pages.
?>
<?php wp_head(); ?>
// Got all my content loading in here.
<?php wp_footer(); ?>
Here's an example of what I've tried up to now in the functions.php fle:
if(is_page_template('Landing Page'))
{
// Enqueue / Dequeue scripts / styles
}
--
if(is_page_template('page-landing-page.php')) // This is the name of my page template
{
// Enqueue / Dequeue scripts / styles
}
--
if(is_page_template('landing-page.php')) // This is the name of my page template
{
// Enqueue / Dequeue scripts / styles
}
--
if(is_page_template('landing-page')) // This is the name of my page template
{
// Enqueue / Dequeue scripts / styles
}
Just cannot seem to get it to work. Any guidance would be appreciated!
This one works perfectly.
function my_enqueue_stuff() {
// "page-templates/about.php" is the path of the template file. If your template file is in Theme's root folder, then use it as "about.php".
if(is_page_template( 'page-templates/about.php' ))
{
wp_enqueue_script( 'lightgallery-js', get_template_directory_uri() . '/js/lightgallery-all.min.js');
wp_enqueue_script('raventours-picturefill', "https://cdn.jsdelivr.net/picturefill/2.3.1/picturefill.min.js", true, null);
}
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_stuff' );
For some reason, if you do not select the page template from the Template Dropdown on the edit page, is_page_template('template-name.php') doesn't seem to work.
I have found a kind-of-a-hacked solution to your problem. It seems to be working for both of the cases. Either you select the page template from the dropdown or the template gets selected by the page-slug.
if( basename( get_page_template() ) == 'page-price-watch.php' )
{
// Enqueue / Dequeue scripts / styles
}
Thanks.
"is_page_template" works by checking the post meta. If the template is automatically pulled, for example because it's called home.php, the template being used is not filled into the meta. Meta is only filled when actively selecting the template for a page in the editor.
These always work and do not rely on the meta:
function your_enqueue_styles() {
if (is_front_page()) {
//works
}
if (is_page( array('pageslug1', 'pageslug2'))) {
//works
}
global $template;
if (basename($template) === 'template-name.php') {
//works
}
}
add_action( 'wp_enqueue_scripts', 'your_enqueue_styles' );
Try something like this to display the currently used page template at the bottom of the page when viewed as an admin, makes it easier to troubleshoot:
// Page template finder
function show_template() {
if( is_super_admin() ){
global $template;
$output = '<div style="position: absolute; bottom: 0; width: 100%; text-align: center; z-index: 100; background-color: white; color: black;">';
ob_start();
print_r($template);
$output .= ob_get_clean().'</div>';
echo $output;
}
}
add_action('wp_footer', 'show_template');
I have a lot of CSS scripts in my WordPress plugin which may affect the other WordPress tags, such as form as an example:
.form {
padding:30px;
background-color:#fff;
}
I can change the CSS, but I want to have a script which only allows the stylesheet to show on the plugin page.
So to clear it up, currently the stylesheet <link> is always in the source code of the admin panel, but I want a script which only puts the stylesheet <link> in the source code when the user is on the plugin page.
You can use get_current_screen:
$screen = get_current_screen();
if ( $screen->id == 'your_plugin_page' ) ){
$custom_css = ".form {.....}";
wp_add_inline_style( 'your_main_style_handle', $custom_css );
}
Update 1:
To add a submenu to your admin menu:
add_action( 'admin_menu', 'your_plugin_admin_menu' );
//Add this to register you styles
add_action( 'admin_init', 'your_plugin_admin_init' );
then:
/**
* Register your stylesheet.
*/
function wpdocs_plugin_admin_init() {
wp_register_style('your-style', plugins_url('scripts/jquery-ui.css',__FILE__ ));
wp_register_script( 'jquery-ui', plugins_url('scripts/jquery-ui.js',__FILE__ ));
}
/**
* Register your plugin page and hook stylesheet loading.
*/
function your_plugin_admin_menu() {
$page = add_submenu_page(...., 'your_plugin_manage_menu' );
//Call 'your_plugin_admin_styles' only on the plugin’s options page
add_action( "admin_print_styles-{$page}", 'your_plugin_admin_styles');
}
/**
* Enqueue our stylesheet.
*/
function your_plugin_admin_styles() {
wp_enqueue_style('your-style');
wp_enqueue_script('jquery-ui');
$custom_css = ".form {.....}";
wp_add_inline_style( 'your-style', $custom_css );
}
/**
* Output our admin page.
*/
function your_plugin_manage_menu() {
// ...
}
you can create style-sheet, and create hook for that style-sheet reference. Then you can add WordPress using add_action(), within plugin call, where you like to call that script. So it will be referenced at head of page for on specified page as needed.
Read more on
https://developer.wordpress.org/reference/functions/wp_enqueue_script/
https://developer.wordpress.org/reference/functions/add_action/
I've created a theme from scratch and I have issues creating shortcodes. I have the following code:
functions.php
function caption_shortcode( $atts, $content = null ) {
return '<span class="caption">' . $content . '</span>';
}
add_shortcode( 'caption', 'caption_shortcode' );
in the WP Admin page editor:
[caption]My Caption[/caption]
on the page template page:
echo do_shortcode('[caption]');
The shortcode seems to be somehow working as it returns the HTML but not the $content.
My problem is that I can't seem to get my hand on the $content and display it using the shortcode. Any idea why this is happening?
P.S. I don't want to use the_content() function to display all the content, I want to use the shortcodes to divide the content the user adds in several pop-ups and child sections of the page.
Thanks!
Make sure you user shotcode same page
// [baztag]content[/baztag]
function baztag_func( $atts, $content = '' ) {
return $content;
}
add_shortcode( 'baztag', 'baztag_func' );
echo do_shortcode('[baztag]');
I am using this plugin for testimonials testimonials and i want to add my custom div foreach testimonial.I found this example for editing view of plugin,but i still dont understand how it work.So how can i add it?
In your theme function.php add the bellow code and change the image url with your image url http://www.subway.com/core/images/topNavBar/subway-logo.png
Code
add_filter( 'testimonials_widget_testimonial_html', 'my_testimonials_widget_testimonial_html', 10, 5 );
function my_testimonials_widget_testimonial_html( $content, $testimonial, $atts, $is_list = true, $is_first = false, $widget_number = null ) {
echo'<div class="my-image"><img width="98%" class="custom-image" src="http://www.subway.com/core/images/topNavBar/subway-logo.png" alt="" /></div>';
return $content;
}
I'm trying to get a widget to only load javascript on a page where the widget is present.
I've tried adding the add action in the 'showWidget' didn't work.
What am I doing wrong?
PHP
wp_register_sidebar_widget('MyWidget','MyWidget', 'showWidget');
add_action('wp_enqueue_scripts', 'addScript'); //now the script appears on every page
function addScript()
{
wp_register_script('MyWidgetJs', plugins_url( '/script.js' , __FILE__), array('jquery'));
wp_enqueue_script('MyWidgetJs');
}
function showWidget($args)
{
// add_action('wp_enqueue_scripts', 'addScript'); //I tried this but it doesn't work :(
wp_enqueue_script('MyWidgetJs');
extract($args);
/* do widget stuff */
}
Seems that the new version of WordPress supports this: http://codex.wordpress.org/Version_3.3
Register your script, but don't enqueue it. In your widget PHP, add in the wp_enqueue_script('your_script_name'); and it'll load it only when your widget is used and place it in the footer.
You are going to upgrade to 3.3, right? :)
SO, something like this should work just fine:
wp_register_sidebar_widget('MyWidget','MyWidget', 'showWidget');
function showWidget($args) {
wp_enqueue_script('MyWidgetJs');
extract($args);
/* do widget stuff */
}
You want to use is_active_widget() conditional to do something like:
<?php
if ( is_active_widget('MyWidget') ) {
add_action('wp_enqueue_scripts', 'addScript');
}
?>
using your above code the final widget may look like:
<?php
if ( is_active_widget('MyWidget') ) {
add_action('wp_enqueue_scripts', 'addScript');
}
function addScript()
{
wp_register_script('MyWidgetJs', plugins_url( '/script.js' , __FILE__), array('jquery'));
wp_enqueue_script('MyWidgetJs');
}
function showWidget($args)
{
wp_enqueue_script('MyWidgetJs');
extract($args);
/* do widget stuff */
}