Using the latest Wordpress version (3.6), I am trying to apply:
<body onLoad="window.scroll(0, 150)">
To a specific landing page on my website so that the page scrolls to a specific point on page load.
Given the way that Wordpress is set up - with the body tags included in header.php - how can I echo the above code within the body tag for my specific page only, without applying it to the rest of my pages?
I am presuming something needs to go in here:
<body <?php body_class(); ?><?php my code in here?>>
You don't need to apply the code to the <body> tag, see: https://stackoverflow.com/a/191318/1287812
This can be done in functions.php with the following code, and using the conditional tags mentioned by SrikanthAD:
add_action( 'wp_footer', 'b5f_on_load_script' );
function b5f_on_load_script()
{
// Not our page, do nothing
if( !is_page( 'about' ) )
return;
?>
<script type="text/javascript">
window.onload = function() { alert( 'Inside specific page' ); };
</script>
<?php
};
Also see: How to use window.scroll to automatically scroll on pageload?
For some reason, I was having difficulties using the above approach, however the logic was correct.
I have now instead registered the scroll script separately and enqueued it based on page template using:
wp_register_script( 'scroll', get_template_directory_uri() . '/js/scroll.js' );
if( is_page_template('my-landing-page.php') ) wp_enqueue_script( 'scroll' );
With: window.onload=function(){window.scroll(0, 140)}; as a separate file.
Thanks for all the help.
You can use many of the conditional tags available in WordPress to get the desired functionality.
http://codex.wordpress.org/Conditional_Tags
Example:
if ( is_page( 'about' ) ) {
// do something
}
I agree with brasofilo, you don't necessarily have it include the conditional tag in your template. It can used anywhere, depending on your project.
Related
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');
Hi
i need some help with the creation of a custom css file for my page template.
There are many topics out there regarding this issue but with each thread i read i get more information and more confused.
I created a child theme for the twentyfourteen theme and added a page template. How can i add custom css to this template. I discovered that
this code added to the child-theme's functions.php selects the appropriate class with my css. But how and where do i put this class? I read that i have to add the class to the body tag in the header.php but i am not sure. Is this the correct way?
if (is_page_template( 'mytemplate.php' )){
$classes[] = 'myclass';
}
Use the is_page_template() conditional to selectively load CSS.
In the function below we're hooking into wp_enqueue_scripts and checking if we're on the custom page template to determine whether to load additional CSS.
If the result is true we'll load a CSS file titled page-template.css from a css/ folder inside your theme. Update the path to load the correct file.
function wpse_enqueue_page_template_styles() {
if ( is_page_template( 'mytemplate.php' ) ) {
wp_enqueue_style( 'page-template', get_stylesheet_directory_uri() . '/css/page-template.css' );
}
}
add_action( 'wp_enqueue_scripts', 'wpse_enqueue_page_template_styles' );
How about this solution ?
<?php
function mypage_head() {
echo '<link rel="stylesheet" type="text/css" href="'.get_bloginfo('stylesheet_directory').'/includes/mypage.css">'."\n";
}
add_action('wp_head', 'mypage_head');
?>
<?php get_header(); ?>
You can use wp_head hook to add you custom stuff (Javascript, CSS..) into your custom template. I think this way is better because all changes will contain in your template file, so you don't have to check in another place.
I get this solution from : http://scratch99.com/wordpress/development/custom-page-template-external-css-file/.
How about this one?
function my_custom_styles() {
wp_register_style( 'custom-styles', get_template_directory_uri().'/lib/styles/custom-styles.css' ) );
if ( is_home ) {
wp_enqueue_style( 'custom-styles' );
}
}
add_action( 'wp_enqueue_scripts', 'my_custom_styles' );
I have tested all three answers from here; and all of them works great. Does anybody know which one is faster & better?
I currently have been customising the standard 2013 theme included with Wordpress, making the standard child theme and adding to the bottom of the style.css stylesheet.
This works fine for all of my pages, however there is a case where I need a custom stylesheet 'news.css' for the News page.
I've tried adding the following code into the header.php file, just before the closing tag, to ensure that it's not overruled by other css files.
<?php
if ( is_page( 'news' ) ) { ?>
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/news.css">
<?php } else {
}
?>
The news.css file is in the child theme's root directory, and the url is www.__.com/news/ however I still can't get Wordpress to load this file when on the News page.
What would I need to do to get this stylesheet to load, only for this page?
Thanks in advance.
EDIT: SOLUTION FOUND - The news page (being my posts page) had the .blog class applied to the body tag. Using .blog in the master css file, I can now specifically adjust this page's CSS! Thank goodness!
I see you've already fixed the issue by using a selector in the CSS that make the rules only apply to the page you want them to (in your case the .blog class worked good.
This is pretty much the standard way of doing things these days.
However I just wanted to put this here for reference in case anyone needs it in the future. The function below 'enqueues' the stylesheet and is the correct way of adding additional stylesheets. This function registers and enqueues 2 new stylesheets.
function load_additional_styles() {
wp_register_style( 'second-style', get_template_directory_uri() . '/style2.css' );
wp_enqueue_style ( 'second-style' );
wp_register_style( 'third-style', get_template_directory_uri() . '/style3.css' );
wp_enqueue_style ( 'third-style' );
}
add_action( 'wp_enqueue_scripts', 'load_additional_styles' );
It's also possible to use conditionals within these functions so (using the question above as the example) you could do something like this
function load_additional_styles() {
if ( is_page( 'news' ) ) {
wp_register_style( 'second-style', get_template_directory_uri() . '/style2.css' );
wp_enqueue_style ( 'second-style' );
wp_register_style( 'third-style', get_template_directory_uri() . '/style3.css' );
wp_enqueue_style ( 'third-style' );
}
}
add_action( 'wp_enqueue_scripts', 'load_additional_styles' );
In the above code the stylesheets will only be added when is_page('news') returns true.
I'm writting a plugin and on this must generate a suggest page, the suggest I generate with template_redirect, like so:
add_action('template_redirect', 'suggest_page');
function suggest_page() {
if (!preg_match('/suggest\.php$/', $_SERVER['REQUEST_URI']))
return;
...
}
I'm wanting to include jQuery on this page, i konw that can use wp_head(); just before </head> and then use wp_enqueue_script('jquery'); but the wp_head(); includes a lot of stuff that i don't need.
so there's a way to add a wordpress script to a page without include all head stuff of wordpress ?
from the template_redirect codex, loading a template from a plugin. have you tried this
If I have the following code before </head> the php form sends but the css crashes and doesn't display the dropdown menu.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
If I don't have the code, the submit button refreshes the page if blank and never sends anything but the dropdown menu works. If any of the fields are filled, the submit button returns with 404.
How can I keep both?
Additional details:
Wordpress CMS
The JQuery script was inserted in a field for customized js in WP.
I know JS is default, but try putting the type="text/javascript" in the <script> tag. Also, firebug for firefox has a NET tab that will most likely tell you what is going on. I would suggest if you can't figure it out by yourself, to post a screen shot of what is loading.
Wordpress can get finicky with manually embedded js and style embeds. The correct way to inject them is to add_actions to init, print_scripts and print_sytles. Add the following, or something like it to your Functions.php:
// register scripts
if (! function_exists(register_scripts){
function register_scripts() {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery','http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js');
}
}
add_action('init', 'register_scripts');
//print the now registered scripts
if (! function_exists(print_scripts){
function print_scripts() {
wp_enqueue_script( 'jquery' );
}
}
add_action('wp_print_scripts', 'print_scripts');
// do the same for css
if (! function_exists(print_styles){
function print_styles() {
wp_register_style( 'stylesheet', 'path to css'.stylesheet.css ); //bloginfo(url); or something like it to obtain your path
wp_enqueue_style( 'stylesheet' );
}
}
add_action('wp_print_styles', 'print_styles');
Its a little more work, but ensures scripts and styles get inserted correctly, and at the same time wordpress chooses to do so...
I'm not positive if this is causing your issue, but its a great place to start.