Show Stylesheet only on Plugin page WordPress - php

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/

Related

How to enqueue styles for one specific page template

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');

Calling a custom footer in Genesis based on page template

I am using the Genesis framework and need to load a custom footer when a certain page template loads, but I am having issues passing the page template file name into the function. I cannot use the slug because the template can be used for multiple pages, so I really need to use the template file name instead. I believe I'm on the right path with what I have so far, but I don't quite understand what I'm reading about get_query_var and how it can help pass the value into my function.
So far my code is as follows:
remove_action( 'genesis_footer', 'genesis_do_footer' );
if (is_page_template( 'page-alternate.php' )) {
add_action( 'genesis_footer', 'do_alternate_footer' );
} else {
add_action( 'genesis_footer', 'do_main_footer' );
}
function do_alternate_footer() {
echo 'xxx';
}
function do_main_footer() {
echo 'yyy';
}
Any assistance would be greatly appreciated. Thank you
The "Is Page Template" function actually looks for the template page name not the file so in this example if the page template name was "alternate" you would have:
remove_action( 'genesis_footer', 'genesis_do_footer' );
$CurrPageTemplate = get_page_template_slug( get_queried_object_id() );
if ($CurrPageTemplate == 'page-alternate.php' ) {
add_action( 'genesis_footer', 'do_alternate_footer' );
} else {
add_action( 'genesis_footer', 'do_main_footer' );
}
function do_alternate_footer() {
echo 'xxx';
}
function do_main_footer() {
echo 'yyy';
}
See how you go with that.

Styling Wordpress Plugin Settings Page

I have created a plugin for wordpress and I am now working on the settings page in the admin area, how do I include a style sheet which is located
plugins/pluginname/assets/css/bootstrap.min.css
Found the solution here:
https://codex.wordpress.org/Function_Reference/wp_enqueue_style
Load stylesheet only on a plugin's options page
/*
* This example will work at least on WordPress 2.6.3,
* but maybe on older versions too.
*/
add_action( 'admin_init', 'my_plugin_admin_init' );
add_action( 'admin_menu', 'my_plugin_admin_menu' );
function my_plugin_admin_init() {
/* Register our stylesheet. */
wp_register_style( 'myPluginStylesheet', plugins_url('stylesheet.css', __FILE__) );
}
function my_plugin_admin_menu() {
/* Register our plugin page */
$page = add_submenu_page( 'edit.php',
__( 'My Plugin', 'myPlugin' ),
__( 'My Plugin', 'myPlugin' ),
'administrator',
__FILE__,
'my_plugin_manage_menu' );
/* Using registered $page handle to hook stylesheet loading */
add_action( 'admin_print_styles-' . $page, 'my_plugin_admin_styles' );
}
function my_plugin_admin_styles() {
/*
* It will be called only on your plugin admin page, enqueue our stylesheet here
*/
wp_enqueue_style( 'myPluginStylesheet' );
}
function my_plugin_manage_menu() {
/* Output our admin page */
}

How to create a setting page for my custom plugin?

I have created this custom plugin and after the activation it shows "settings" on the installed plugin.
I do not want to show my setting page LINK anywhere in the the admin panel menu but when user clicks the setting of the plugin (see the above screen shot) that should go to the plugin setting page. I understand that I have to do something on my second function "our_plugin_action_links" 's variable $settings_link
I just tried to link a single php file that placed on the admin folder. Then it goes to that php file when clicks. But I want to show the plugin setting page inside the admin panel same like other pages such as add post or **general setting page when click setting of the plugin but not showing the links or menus at the admin menu for the plugin setting.
How can I do that?
my plugin code
<?php
/*
Plugin Name: admin menu remover
Description: Remove the admin menus just by a single plugin installation
Version: 1.0
Author: Author
Author URI: http://URI_Of_The_Plugin_Author
License: A "Slug" license name e.g. GPL2
*/
/* This function and action removes following menu item from the admin panel */
add_action( 'admin_menu', 'remove_links_menu' );
function remove_links_menu() {
remove_menu_page('index.php'); // Dashboard
//remove_menu_page('edit-comments.php'); // Comments
remove_menu_page('themes.php'); // Appearance
//remove_menu_page('plugins.php'); // Plugins
//remove_menu_page('tools.php'); // Tools
//remove_menu_page('options-general.php'); // Settings
//remove_menu_page('users.php'); // Users
}
/* This function and filter append "setting" immediately after the "admin menu remover" plugin activation */
add_filter('plugin_action_links', 'our_plugin_action_links', 10, 2);
function our_plugin_action_links($links, $file) {
static $this_plugin;
if (!$this_plugin) {
$this_plugin = plugin_basename(__FILE__);
}
// check to make sure we are on the correct plugin
if ($file == $this_plugin) {
// the anchor tag and href to the URL we want. For a "Settings" link, this needs to be the url of your settings page
$settings_link = 'Settings';
// add the link to the list
array_unshift($links, $settings_link);
}
return $links;
}
?>
First off, from a user's perspective I wouldn't recommend doing this. If your plugin warrants a settings page then put it where settings below. If you don't trust your users then don't allow the settings OR use capabilities to restrict your menu to only certain users.
However, if you've got a specific need for this then the easiest way is to just register a normal options page using add_options_page and then manually rip your menu out of the global array. This method ensures that permissions are accounted for correctly and is pretty safe.
Also, instead of plugin_action_links you can use the filter that is specific to your plugin via 'plugin_action_links_' . plugin_basename( __FILE__ ) which is what the code below does. You'll need to change the constant to something more specific to your code (or switch to a global variable or just use strings). See the code comments for more details.
//We'll key on the slug for the settings page so set it here so it can be used in various places
define( 'MY_PLUGIN_SLUG', 'my-plugin-slug' );
//Register a callback for our specific plugin's actions
add_filter( 'plugin_action_links_' . plugin_basename( __FILE__ ), 'my_plugin_action_links' );
function my_plugin_action_links( $links )
{
$links[] = 'Settings';
return $links;
}
//Create a normal admin menu
add_action( 'admin_menu', 'register_settings' );
function register_settings()
{
add_options_page( 'My Plugin Settings', 'My Plugin Settings', 'manage_options', MY_PLUGIN_SLUG, 'my_plugin_settings_page' );
//We just want to URL to be valid so now we're going to remove the item from the menu
//The code below walks the global menu and removes our specific item by its slug
global $submenu;
if( array_key_exists( 'options-general.php' , $submenu ) )
{
foreach( $submenu['options-general.php'] as $k => $v )
{
if( MY_PLUGIN_SLUG === $v[2] )
{
unset( $submenu['options-general.php'][$k] );
}
}
}
}
//This is our plugins settings page
function my_plugin_settings_page()
{
echo 'Hello from my plugin!';
}
You can try the generator on this site.
http://wpsettingsapi.jeroensormani.com/
What it does is you make a callback function where you set your options. So not a seperate file but just your functions.php or plugin file.
Or checkout the codex http://codex.wordpress.org/Creating_Options_Pages

Wordpress Plugin Dynamic Error Page

What action or filter can I use in a Wordpress plugin to dynamically replace the contents (i.e. not the header or footer) of a 404 error page?
Basically I'm looking for a 404 error page equivalent for the_content filter, which will filter the contents of an existing page.
Thank you for your time.
Note: I know I can manually modify the 404 error page for the current theme, but that is not the effect I am trying to achieve.
From this WordPress Answer: How to control output of custom post type without modifying theme?
Plugin file:
<?php
/*
Plugin Name: Plugin 404 Page
Plugin URI: http://stackoverflow.com/questions/14539884
Description: Use the plugin's template file to render a custom 404.php
Author: brasofilo
Author URI: https://wordpress.stackexchange.com/users/12615/brasofilo
Version: 2013.26.01
License: GPLv2
*/
class Universal_Template
{
public function __construct()
{
$this->url = plugins_url( '', __FILE__ );
$this->path = plugin_dir_path( __FILE__ );
add_action( 'init', array( $this, 'init' ) );
}
public function init()
{
add_filter( 'template_include', array( $this, 'template_404' ) );
}
public function template_404( $template )
{
if ( is_404() )
$template = $this->path . '/404.php';
return $template;
}
}
$so_14539884 = new Universal_Template();
And in the plugin folder, a file named 404.php:
<?php
/**
* The template for displaying 404 pages (Not Found).
*
* #package WordPress
* #subpackage Twenty_Twelve
* #since Twenty Twelve 1.0
*/
get_header(); ?>
<div id="primary" class="site-content">
MY 404!
</div><!-- #primary -->
<?php get_footer(); ?>
The solution depends on the content of 404.php file. If this file contains static text, like
_e( 'It seems we can’t find what you’re looking for...', 'twentyeleven' );
you can add your own filter
apply_filters( 'my_404_content', 'Default 404 message' );
and in functions.php (or in plugin)
add_filter( 'my_404_content', 'replace_404_message' );
function replace_404_message($message) {
return 'Error 404 - '.$message;
}
If 404.php uses built-in WP functions to display page content, you should check what filters they are supported.
You might be able to add a the_content filter with a conditional is_404 section:
function content_404($content) {
if (is_404()) {
// do some stuff with $content
}
// no matter what,
return $content;
}
add_filter( 'the_content', 'content_404' );
Note that this does assume that the 404.php page template has a the_content template tag in place.

Categories