I am looking to find a solution for the following problem:
Via a plugin i would like to add a black bar to the very top of every page (similar to the wordpress admin bar you can see when you are logged in at wp-admin).
A solution I was looking into was to just add the code via a javascript file and append the html to the header. However this does not sound like the right way to do it. Unfortunately I haven't found any references on google on how to effictively do this the right way.
I was looking into register_my_menus() function but the function description did not promise the desired efforts.
Can anyone point me into the right direction please?
Thanks!
I think javascript would be better to append the html for a admin bar. If these users aren't affiliated with a wp backend you don't need any wp functions to display the desired links.
Another option ( I would say better then appending with JS ) would be to hook into the wp_footer hook and just create the HTML you need and use a CSS position:fixed; or position:absolute; with top: 0;
Example:
// Enqueue styles for top-bar
add_action( 'wp_enqueue_scripts', function(){
wp_enqueue_style( 'style1', plugin_dir_url( __FILE__ ) . 'css/top-bar.css' );
});
// Add HTML for top-bar
add_action( 'wp_footer', function(){
echo '<div class="top-bar">Some content</div>';
});
Best way is to add a function to your theme's functions.php file
function header_notification()
{
echo '<div><strong>Any html goes here</strong></div>';
}
add_action('wp_head', 'header_notification');
Related
I'm using the add-menu-page function to add some kind of welcome page for my WordPress theme. Is there any way that I can style what is inside the page not using inline styling, or am I using add-menu-page for the wrong purpose?
Yeah, it's pretty straightforward. Here's what I'd do:
Create the CSS file
Enqueue the CSS file using admin_enqueue_scripts using code like this answer from the WP Stack Exchange.
Repeating that code here just in case the other answer is removed:
function my_admin_enqueue( $hook_suffix ) {
if( 'appearance_page_theme-options' === $hook_suffix ) {
wp_enqueue_style('my-theme-settings', get_template_directory_uri() . '/styles/theme-settings.css');
}
}
add_action( 'admin_enqueue_scripts', 'my_admin_enqueue', 10 );
I want to add some code to the head of each page that loads using a plugin that I build. What is the proper hook for this and the proper way of doing it? Thanks a lot
For those looking for a sample code, here it is:
add_action( 'wp_head', 'YOUR_SCRIPT_IN_HEAD_FUNCTION' );
function YOUR_SCRIPT_IN_HEAD_FUNCTION() {
echo '<script>
// some code
</script>';
}
To add JS code, use the wp_enqueue_script() function - put your call in a function which gets added to the filter 'wp_enqueue_scripts'.
To add HTML, write a function to render whatever code you need and put it onto the wp_head filter. As in add_action('wp_head', 'your_function');
Does that help?
Ok, so im working on a theme that I want to have different styles and php files depending on which design the user has chosen. How would I do this? The best example I can give is having a get_template_part function that changes directory based on the users selection of design. Heres my idea of how the code would kinda look.
<?php /*custom_function*/(/*Global Path variable which changes*/, '/filename') ?>
The x theme has like stacks I think which might be a similar idea. Thanks.
Maybe something like this in the function.php: (just an example)
<?php
define("DESIGN", "flat");
if(DESIGN == "flat"){
add_action( 'wp_enqueue_scripts', 'asd_scripts' );
}elseif(DESIGN == "notflat"){
// other add_action( 'wp_enqueue_scripts', '...' );
}
function asd_scripts() {
// load bootstrap js
wp_enqueue_script('asd-bootstrapjs', get_template_directory_uri().'/includes/resources/bootstrap/js/bootstrap.js', array('jquery') );
}
?>
You need to use the theme customization api to achieve this. For example you would use the customize_register hook:
function mytheme_customize_register( $wp_customize )
{
//All your sections, settings, and controls will be added here
}
add_action( 'customize_register', 'mytheme_customize_register' );
This hook allows you access to the $wp_customize object.
There are existing examples in the WordPress docs, this should get you started with what you would like to do.
I wrote a small plugin and i want to add some css design my plugin meta boxes in the WordPress system.
All the scripts of adding a css file to WordPress plugin that I found are referring to including a css file in the plugin output page on the website itself. - wp_enqueue_scripts
the solution i created is to use this piece of code in my plugin page:
echo '<style type="text/css">';
include( '/css/style.css' );
echo '</style>';
But if feels to me like an unprofessional solution so I wanted to ask if anyone knows a better solution
You can use wp_enqueue_style() yourself, with plugins_url():
function my_styles(){
$css_path = plugins_url('/css/style.css', __FILE__);
wp_enqueue_style('my_stylesheet', $css_path);
}
add_action( 'admin_init', 'my_styles' );
I have been looking to figure this out for weeks. How to include a jquery in wordpress... so I have used the wp_enqeue_scripts();
but then I still don't understand it.
so for example I have this jquery slide down code..
$jQuery(document).ready(function() {
$jQuery('#slide').slideDown();
});
now this code works perfectly on my static html code which has the slide ID in it by the way..
so how would i include that slide to my wordpress plugin?
here is my plugin code
<?php
/*
Plugin Name: Jquery Test.
Plugin URI: http://wsplugins.com
Description: A plugin that increases your website traffic by floating facebook, twitter and google + share button. The buttons bounce and move over your page ensuring maximum attention by your visitors.
Author: Ronny Kibet.
Author URI: http://#.com
Version: 1.0
*/
thanks.
You have a couple of options.
Option #1
Paste the code into footer.php (or header.php).
<script>
$(function() {
$jQuery('#slide').slideDown();
});
</script>
This would result in every DOM element with an ID of "slide" to slideDown upon page load.
Option #2
Using WordPress' API, you could create a method in your theme to include a JavaScript file with the code inside . This is more complicated and requires an understanding of WordPress hooks.
I am having this same problem, but I got it to "somewhat" work. First you need to use wp_register_scripts, with the script name, and then do wp_enque_script("scriptname");... I don't understand why this is the way it is, but we just have to deal :-/
you may need to use noConflict, an example would be:
<script type="text/javascript">
var slide=jQuery.noConflict();
slide(function() {
slide('#slide').slideDown();
});
</script>
to enqueue a script in wordpress in a plugin use this:
/**
* Proper way to enqueue scripts
*/
function theme_name_scripts() {
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array('dependencyScriptThatNeedsToExecuteBeforeMyScriptName','forExample','jquery), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
I was also searching for the same solution but I found it myself.
create a new file custom-functions.js in the js director and past the code that you want to enqueue in that file. Now enqueue it in the functions.php
wp_enqueue_script( 'custom-functions', get_template_directory_uri() . '/js/custom-functions.js', array(), '1.0', true );
read the full tutorial at Bootstrap WordPress Snippets - wp_enqueue_script
function theme_name_scripts() {
wp_enqueue_script( 'script-name', plugins_url( '/js/responsiveslides.min.js' , __FILE__ ), array(),false, true );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );