I'm new to WordPress and this is my first attempt to migrate a static website to WordPress. The websites layout must remain unchanged so I intend to develop a theme for it.
I'm used to having css files in the css directory, but the WordPress Theme Development page states that there has to be a style.css in the theme root.
Can I setup WP to get css/style.css instead? What is the recommended way to organise css files in WP?
You can use Wordpress' wp_enqueue_style.
function addMyScript() {
wp_enqueue_style( 'my-style', get_template_directory_uri() . '/css/my-style.css', false, '1.0', 'all' );
}
add_action('wp_head', 'addMyScript');
Just remember that you still need to have a style.css inside your theme root, even if it only has the details about the Theme in the form of comments.
Please refer to: http://codex.wordpress.org/Function_Reference/wp_enqueue_style
Related
I'm trying to make changes to a WordPress theme via FTP, and it doesn't appear to update on the live website.
In this case I made changes to a JavaScript file:
../wp-content/themes/Divi/includes/builder/scripts/frontend-builder-global-functions.js
Currently a child version of the theme is active on the site. Is there a process I'm missing to have my live website reflect the changes? Also, in Chrome developer tools, the file I tried to update has ?ver=3.17.6 at the end of the filename.
The easiest way would be to copy the updated JavaScript file from the parent into the child theme's folder, next in your child theme functions.php file use the built in WordPress functions wp_deregister_script and wp_register_script. Your code should be like this:
function new_child_script() {
// De-register the Divi default theme script
wp_deregister_script('frontend-builder-global'); //check the name of the default script in page source
// Register the updated script from the child theme
wp_register_script('frontend-builder-global-custom-script', get_template_directory_uri() . '/js/frontend-builder-global-functions.js',
array('jquery'));
// Enqueue the script
wp_enqueue_script('frontend-builder-global-custom-script');
}
add_action('wp_enqueue_scripts', 'new_child_script');
I'm trying to load in my css for a WordPress theme however it doesn't seem to load.
Here is what I have so far
I am new to building WordPress themes so any help is great.
Your main style.css file needs to be in the root folder. Move style.css from the css folder to the root folder (same folder as index.php).
Custom Theme need two files
i)style.css
ii)functions.php
you can call your style sheet from functions.php using hooks
ex:
function wpdocs_theme_name_scripts() {
wp_enqueue_style( 'style-name', get_stylesheet_uri().'yourstylesheetname.css' );
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );
There are some Required Theme Files that you have to add in your theme folder in order to start
You have at least to have these two files: style.css & index.php
I see that you have an index.php thats's good, but for the style.css file in yourThemeFolder/css folder, hasn't been recognized by wordpress, because In order for WordPress to recognize the set of theme template files as a valid theme, the style.css file needs to be located in the root directory of your theme, not a subdirectory, (the same directory of you index.php file).
Take a look at Required Theme Files or Main Stylesheet CSS for more Information.
I'm trying to do something simple, though I can't find an answer for this anywhere.
I have a directory /blog/ where I have wordpress installed. I'm creating a theme to handle the blog within that directory.
I have all my styles in /style/, includes in /includes/, and scripts in /scripts/. There has to be a way for me to include these files into my wordpress theme. So basically, I want to include my stylesheet that the rest of the site (non-wordpress) is using. Yes, I'm aware wordpress requires a style.css in the theme root. However, I want to use this for other things as well. Such as including my header and footer, and also my compiled external javascript.
index.php
/style/
/blog/
/wp-content/
/themes/
/my-theme/
/includes/
/scripts/
Summary: How do I access style / includes / scripts directories from within the wordpress theme.
It seems like a simple enough request, but I can't find anywhere that points me in the right direction. Thank you in advance.
In your functions.php you can do the following:
function yourtheme_enqueue_scripts() {
wp_enqueue_style( 'unique-id', $_SERVER['DOCUMENT_ROOT'] . '/styles/style.css', false );
wp_enqueue_script( 'unique-id', $_SERVER['DOCUMENT_ROOT'] . '/scripts/filename.js', false );
}
add_action('wp_enqueue_scripts','yourtheme_enqueue_scripts');
Replace yourtheme, unique-id, style.css, filename.js with whatever is suitable for your situation.
The easiest way is to use a symlink inside the Wordpress directory that points to the file outside of it.
You can do this inside any PHP file:
<?php include_once($_SERVER['DOCUMENT_ROOT'] .'/path/to/file.php'); ?>
It's not a serious question.
I normally use get_stylesheet_directory_uri() when enqueuing scripts in WordPress, which worked fine so far.
I just wonder what's the difference between get_stylesheet_directory_uri() and get_template_directory_uri() when enqueuing scripts in wordpress.
According to WordPress Codex:
get_template_directory_uri -> Retrieve template directory URI for the
current theme.
get_stylesheet_directory_uri ->Retrieve stylesheet directory URI for
the current theme/child theme
Then, get_template_directory_uri cannot be used for a child theme?
Both functions can be used in a parent or a child theme.
get_template_directory_uri will always refer to the parent theme folder for assets.
get_stylesheet_directory_uri will refer to the "current" theme folder for assets (which could be the parent or the child, depending on where it is called).
For example, in a child theme:
// This will point to style.css in child theme
wp_enqueue_style( 'my_child_styles', get_stylesheet_directory_uri().'/style.css' );
// This will point to style.css in the parent theme
wp_enqueue_style( 'my_parent_styles', get_template_directory_uri().'/style.css' );
Note that if a theme is not a child theme, then it is considered a parent theme.
Im trying to create my own WP-theme from my html/css-site.
I managed to migrate the html/css but the images won´t show up.
I realise that i have to change the img src-path but do i also have to add som php?
What does the path look like?
Thanks!
Are the images intended to be part of the theme? If so, then I'd recommend making a directory called images or something similar (I've seen some people use assets) in the theme's root directory (ie, wp-content/themes/[theme]/images).
Then you should be able to access them using get_template_directory_uri(), like so:
<img src='<?php get_template_directory_uri(); ?>/images/your-image.ext'>
If you're creating a Child Theme, and want to allow overrides of the parent themes images, replace get_template_directory_uri() with get_stylesheet_directory_uri().
References
get_template_directory_uri()
get_stylesheet_directory_uri()
Child Themes