I am new to Wordpress and I need to convert a PSD int a Wordpress theme.
For that I downloaded a naked wordpress theme to start with and I tried to add my own css style in function.php as follows:
function naked_scripts() {
// get the theme directory style.css and link to it in the header
wp_enqueue_style( 'main-style', get_template_directory_uri() . '/style/main.css' );
wp_enqueue_style( 'responsive-style', get_template_directory_uri() . '/style/responsive.css' );
wp_enqueue_style( 'bootstrap-style', get_template_directory_uri() . '/style/bootstrap.min.css' );
// add fitvid
wp_enqueue_script( 'jquery-js', get_template_directory_uri() . '/js/jquery.js', array( 'jquery' ), '1.10.2', true );
// add theme scripts
wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '3.0.3', true );
}
add_action( 'wp_enqueue_scripts', 'naked_scripts' ); // Register this fxn and allow Wordpress to call it automatcally in the header
but in the browser I did not get my style and I have his error:
GET http://rota.alwaysdata.net/wp-content/themes/theme1/style/main.css?ver=4.1
what's ver=4.1 ??
It's a cache-buster added by WordPress. You can set it to any number you want using the $ver argument in wp_enqueue_style
http://codex.wordpress.org/Function_Reference/wp_enqueue_style
The ?ver=X.XX has NO effect on the content of the stylesheet.
CSS Cache-busting references:
http://css-tricks.com/snippets/wordpress/prevent-css-caching/
https://www.mojowill.com/developer/get-your-wordpress-css-changes-noticed-immediately/
I suggest if it's your first time creating a wordpress template using these resources:
Underscores blank wordpress theme:
http://underscores.me/
Lynda.com underscores tutorial:
http://www.lynda.com/underscores-tutorials/WordPress-Building-Themes-from-Scratch-Using-Underscores/163092-2.html
This is what i used to make my first wordpress project and it worked out grate , here is the result: ibreatheart.com
Hope it helps .
Related
I need to include some external css files, i use this snippet in functions.php but neither of them works.. Why..?
add_action( 'wp_enqueue_scripts', 'add_css' );
function add_css() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
wp_enqueue_style( 'style', get_template_directory_uri().'/assets/css/bootstrap.css' );
}
I'm using Twenty-Twenty-One child theme
This is my style.css
/*Theme Name: Twenty Twenty-One Child
Theme URI: https://wordpress.org/themes/twentytwentyone/
Template: twentytwentyone
Author: the WordPress team
Author URI: https://wordpress.org/
*/
h2{
color:red!important;
} */
h2 is to see if it works.
If you're using a child theme, you want to use get_stylesheet_directory_uri() instead of get_template_directory_uri - Unless the stylesheets are part of the parent theme.
function add_css() {
wp_enqueue_style( 'parent-style', get_stylesheet_directory_uri().'/style.css' );
wp_enqueue_style( 'style', get_stylesheet_directory_uri().'/assets/css/bootstrap.css' );
}
Depending on how your parent theme loads it's styles your function will vary. You can check the Enqueue stylesheet section in the Theme handbook for more clarification. Below is their example if the parent theme loads its style using a function starting with get_stylesheet
Make sure you are using the correct parent handle, 'parent-style' is used for TwentyFifteen theme for example.
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
$parenthandle = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
$theme = wp_get_theme();
wp_enqueue_style( $parenthandle, get_template_directory_uri() . '/style.css',
array(), // if the parent theme code has a dependency, copy it to here
$theme->parent()->get('Version')
);
wp_enqueue_style( 'child-style', get_stylesheet_uri(),
array( $parenthandle ),
$theme->get('Version') // this only works if you have Version in the style header
);
}
You should also look at the wp_enqueue_style code reference as the handle for your bootstrap style should probably not be style as it needs to be unique e.g. bootstrap-style
I am trying, essentially, to add the ?ver=1.0 tag to the end of my stylesheet, which I have included in my child theme's function file (enqueued). I have read the documentation in the codex but it does not seem to be applying in the source code, and it is not updating/cache breaking as intended when I apply updates.
The stylesheet itself is being included, however, the version is not applying, so I'm somewhat at a loose end here.
This is my current code:
add_action( 'wp_enqueue_scripts', 'kl_child_scripts',11 );
function kl_child_scripts() {
wp_deregister_style( 'kallyas-styles' );
wp_enqueue_style( 'kallyas-styles', get_template_directory_uri().'/style.css', '' , ZN_FW_VERSION );
wp_enqueue_style( 'kallyas-child', get_stylesheet_uri(), array('kallyas-styles') , filemtime(get_stylesheet_directory() . '/style.css'));
N.B. It is the last line to which I am trying to apply the version. (kallyas-child). The previous line (kallyas-styles) does appear to have some form of version ZN_FW_VERSION, but that does not produce the desired effect.
filemtime(get_stylesheet_directory() . '/style.css') is intended to break cache and update the version number each time the file is saved. Edit: I do, now, believe that this code does in fact work, but the theme (as it is a pre-build) is preventing it from applying properly. I will update if and when I figure this out, hoping to get to talk to the theme developers.
The issue is that your are using filemtime which return an int and you should have a string. As you can read in the documentation :
$ver
(string|bool|null) (Optional) String specifying stylesheet
version number, if it has one, which is added to the URL as a query
string for cache busting purposes. If version is set to false, a
version number is automatically added equal to current installed
WordPress version. If set to null, no version is added. Default value:
false
so you may try this :
add_action( 'wp_enqueue_scripts', 'kl_child_scripts',11 );
function kl_child_scripts() {
wp_deregister_style( 'kallyas-styles' );
wp_enqueue_style( 'kallyas-styles', get_template_directory_uri().'/style.css', '' , ZN_FW_VERSION );
wp_enqueue_style( 'kallyas-child', get_stylesheet_uri(), array('kallyas-styles') , strval(filemtime(get_stylesheet_directory() . '/style.css')));
I added the strval that will convert the int to string
Use below code
define('ZN_FW_VERSION','1.0');
add_action( 'wp_enqueue_scripts', 'kl_child_scripts',11 );
function kl_child_scripts() {
wp_deregister_style( 'kallyas-styles' );
wp_dequeue_style( 'kallyas-styles' );
wp_enqueue_style( 'kallyas-styles', get_template_directory_uri().'/style.css', array() , ZN_FW_VERSION );
wp_enqueue_style( 'kallyas-child', get_stylesheet_uri(), array('kallyas-styles') , ZN_FW_VERSION);
}
in functions.php I added
wp_enqueue_style( 'kallyas-child',
get_stylesheet_directory_uri() . '/style.css',
array( 'kallyas-styles' ),
filemtime(__DIR__.'/style.css')
);
tested it at tmp.demos.rent-a-ninja.org
worked with divi theme
I'm using a child theme and need to enqueue the stylesheet for a slider. The css file is located in a folder in the parent theme directory, i.e. /parent-theme/css/flexislider.css
I created the child theme using a plugin which added a functions.php file to the child theme directory with the following code:
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',get_stylesheet_directory_uri() . '/style.css',array('parent-style')
);
}
I assume I have to add another entry to the above function referencing flexislider.css but I'm not quite sure how to do it.
*UPDATED
Based on what you added to the question, you should be able to just add to that function and register the stylesheet. The full function would look like this:
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',get_stylesheet_directory_uri() . '/style.css',array('parent-style')
);
wp_enqueue_style('flex-slider',get_template_directory_uri() . '/css/flexislider.css');
}
I don't have much experience with child-themes, but following the model in that function, I think get_template_directory points to the parent theme and not the child theme, which you said the flexislider code is located
I want to use the jQuery-ui .accordion function in a WordPress child theme. So far I've:
created a js file in my child theme directory and put it in no-conflict mode:
jQuery(document).ready(function($) {
$( "#accordion" ).accordion();
});
Enqueued the script into my functions.php file: function myChild_scripts() {
wp_enqueue_style( 'onepage-child-style', get_stylesheet_uri() );
wp_enqueue_script( 'onepage-child-accordion', get_stylesheet_uri() . '/js/accordion.js', array('jquery-ui-accordion', 'jquery'), 20150507, true );
Added the add_action function: add_action( 'wp_enqueue_scripts', 'myChild_scripts' );
However, the .accordion function is also dependent on jquery-ui.css. Don't I also need to include that in the enqueueing process? I can find no documentation that discusses inclusion of this file - or whether it's already part of WP core.
You can enqueue a stylesheet in the functions.php file. It may be something like this (assuming your file is in your theme directory, inside a css folder).
function my_styles()
{
wp_register_style( 'jquery-ui-style', get_template_directory_uri() . '/css/jquery-ui.css', 'all' );
wp_enqueue_style( 'jquery-ui-style' );
}
add_action( 'wp_enqueue_scripts', 'my_styles' );
Here's some reference.
how do I actually add jQuery to html5blank wordpress theme by toddmotto?
I'm quite new to wordpress so I'm not really sure how does this work.
For normal html, I'll just link a script tag of jquery and another script tag with $(document).ready.. . . . . and start the jquery codes.
Would really love if someone who had experience using html5blank theme could shed some light.
Thanks much!
The WordPress recommends add jquery from WordPress itself.So you can add jquery using following way.
Add code to your current theme functions.php file.
function func_add_my_jquery() {
wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'func_add_my_jquery' );
I load all my scripts from functions.php by using wp_enqeue_script. This will avoid duplicate loading.
If you only want to load Query, you can do this by:
function load_my_scripts() {
wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'load_my_scripts' );
This will load the jQuery that follows WP. You can see other default scripts you can load here:
If you want to load other JS scripts, then you must use this:
function theme_name_scripts() {
wp_register_script( 'my-script', get_stylesheet_directory_uri() . '/js/my-script.js', array('jquery') );
wp_enqueue_script( 'my-script' );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
The array('jquery') is for dependencies and in this case means that jQuery must be loaded before this script can be loaded.
If you want to register a newer version of jQuery, you first have to deregister the loaded jQuery:
wp_deregister_script( 'jquery' );