I am new to wordpress. I have created a wordpress theme which has style.css , header.php and index.php and footer.php. Now I want to make my index.php page responsive because after resizing of browser window layout of index.php went horrible(doesn't view properly on mobile and other handle held devices).
I want to make index.php responsive with the help of #media query or bootstrap.
Please suggest how i can make index.php a responsive page?
You need to register your responsive.css sheet using the wp_enqueue_style() function inside your functions.php file inside your theme folder. If you don't have this file, just create it :
<?php
// Enqueue your files
function theme_enqueue_styles() {
// If the current page is the homepage, then load the responsive.css file
if(is_home()) {
wp_enqueue_style( 'responsive', get_stylesheet_directory_uri() . '/css/responsive.css' );
}
}
// Add action
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', 15 );
Then you need to create your theme/css/responsive.css file and write you media queries and styles.
Hope this helps !
Related
I want to create a WordPress Plugin where I want to add some css, and upon activation, those css will be in effect and be viewing in the website. Upon deactivation, the css will also be out of effect.
Any how I can do that? Or any documentation I can take help from?
You can follow Plugin Handbook for creating a plugin https://developer.wordpress.org/plugins/.
create a CSS file in plugin directory then upon plugin activation hook you can enqueue the CSS file using action 'wp_enqueue_style'.
You can add this to your main file to load your css file:
function add_my_css() {
$plugin_url = plugin_dir_url( __FILE__ );
wp_enqueue_style( 'style', $plugin_url . "/css/plugin-style.css");
}
add_action( 'wp_enqueue_scripts', 'add_my_css' );
Then create your plugin-style.css file and write your css.
Hope this helps
I've been trying to develop a simple child theme to tweak a few things on my website which currently uses the vantage theme. So far, I've had little success.
The two files (style.css and function.php) I've created only have a few lines of code, but I'm still unable to pinpoint the problem.
<?php
add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles',
PHP_INT_MAX);
function enqueue_child_theme_styles() {
wp_enqueue_style( 'parent-style',
get_template_directory_uri().'/style.css' );
}
?>
/*
Theme Name: vantage-child
Template: Vantage
*/
body {
color:aqua;
}
I suspect the problem is with the enqueueing in the PHP file, but all configurations that I have found on the internet and the wordpress codex don't seem to work on my site. When I activate the child theme created by my code, the site reverts to ONLY the styles in my child theme's stylesheet, instead of falling back on the parent theme's stylesheet when no styles are specified in the child theme.
For child theme you can first need to create folder with themename-child.
Then you have to create style.css file.
Put the following lines in your style.css
/*
Theme Name: Twenty Fourteen Child
Theme URI: http://yourwebsite.com/twentyfourteen-child/
Description: My first child theme, based on Twenty Fourteen
Author: Joshi Niket
Template: twentyfourteen
Text Domain: twenty-fourteen-child
*/
Then create functions.php in child theme folder and put the following code.
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>
Please check following link to make child theme with proper steps, i have added few here to guid you.ReferenceLink
Thank you ,I hope this helps you.
Please install and create child theme by using One-Click Child Theme
plugin. This is very easy to use
I have WordPress theme with a child theme. After editing and saving the child style sheet, I don't see the changes. Looking at the source code, the style sheet is loaded but has this ver at the end: style.css?ver=4.9.7
Now, the styles show when I load style.css but shows an empty file with comments (the original file when first got the theme) style.css?ver=4.9.7
I understand that it is encouraged to have custom styles in the child theme but, then why doesn't WordPress support this?
Any advice or help is appreciated. Thanks.
This version added on function.php file, check it first
Better enqueue style on function.php like this
function child_themes_styles() {
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array(), wp_get_theme()->get('Version'));
}
add_action( 'wp_enqueue_scripts', 'child_themes_styles' );
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 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