I have a wordpress site and I got an HTML for the homepage, buy when I put the the whole HTML code in Wordpress it doesn't show the page correctly
So I want that wordpress charges this page independenly of the theme CSS, how can I do that ?
Thanks !
Your theme style.css is included by default by the wordpress by wp_head() function. Before you end you HEAD tag add this function.
<?php wp_head(); ?>
If you want to add additional stylesheets then use this function in your functions.php file.
function additional_custom_styles() {
/*Enqueue The Styles*/
wp_enqueue_style( 'themename', get_template_directory_uri() . '/css/custom.css' );
}
add_action( 'wp_enqueue_scripts', 'additional_custom_styles' );
Related
I am creating a landing page and I would like to remove the topbar and header/main Nav links from this page, and this page only.
Currently, I use this CSS code to remove it:
.top-headers-wrapper{display:none;}
However, it leaves a big blank white space in place of the header. Ideally this white space would be removed and the big background image would go all the way to the top of the page.
I illustrate the difference below, where the page with -test appended to the URL has the CSS to remove the header. The original URL does not have the code to remove the header.
How can I modify the code to remove this white space as well as the header/topbar?
https://www.californiabeardco.com/summer-giveaway/
https://www.californiabeardco.com/summer-giveaway-test/
Your content-area class has a top-margin of 133px. If you are removing the header altogther then you should be able to remove the top margin like this
#page_wrapper.transparent_header .content-area {
top-margin: 0;
}
It looks like there are a couple of instances of this in the various #media queries in the CSS file. So you will have to find each instance.
Also like Obsidian mentions in the comments when I access your site I was logged in with admin privileges, you should change this as soon as possible. Hope that helps.
You should disable admin bar by more elegant way, like go to Profile > uncheck the options Show Toolbar when viewing site.
Or if you want to completely disable admin bar for all logged in users, insert this code to your theme's functions.php file.
function remove_admin_login_header() {
remove_action('wp_head', '_admin_bar_bump_cb');
}
add_action('get_header', 'remove_admin_login_header');
Another way is use filter, completely disable for all logged in users too.
add_filter( 'show_admin_bar', '__return_false' );
Ultimately, I found a solution. It's a bit of a workaround but it worked nonetheless.
The solution I found was to create a page template (e.g., "Landing Page") with no headers, footers, or sidebar. This results in a blank page which, when using a page designer like Visual Composer, allows me to design on a blank canvas, perfect for creating a landing page.
I followed the steps from this tutorial but will post them here for anyone else with the problem:
1) create a new php file
2) paste in this code
<?php
/**
* Template Name: Clean Page
* This template will only display the content you entered in the page editor
*/
?>
<html <?php language_attributes(); ?> class="no-js">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>
<body>
<?php
while ( have_posts() ) : the_post();
the_content();
endwhile;
?>
<?php wp_footer(); ?>
</body>
</html>
3) Upload the php file to the server hosting your Wordpress instance. The location should be your theme directory. Something such as ../wp-content/themes/YourThemeName
I added the php file to my child theme which worked fine, if you use a child theme, which is usually recommended protocol as I understand it.
4) Log onto the Wordpress admin console and when you create a new page, look for your newly added Template as an option.
I am organizing my files in the rootfolder. The basic problem is that the CSS and JS is not called. From the "page-services-3.php" I have to call the header. Because the php site is laying in a subfolder, I have tried with the following:
<?php include $_SERVER['DOCUMENT_ROOT'] . '/resources/includes/header.php' ?>
<?php include $_SERVER['DOCUMENT_ROOT'] . '/resources/includes/footer.php' ?>
I tried with a normal href to the CSS(like the picture below) and I also set this infront of my CSS files in the header:
<link href="http://localhost:8888/Portfolio-Version-2//plugins/magnific-popup/magnific-popup.css" rel="stylesheet">
But I am just getting the following page:
How is the correct syntaxs to call a header from a subfolder? The $_SERVER['DOCUMENT_ROOT'] is working for me with the exact same folder structure in some other projects.
UPDATE
After the answer I tried to do the following:
In my page-services.php I tried the following:
<?php require"http://localhost:8888/'resources/includes/header.php'"; ?>
<body class="no-trans ">
<?php require"http://localhost:8888/'resources/includes/navbar.php'"; ?>
<?php require"http://localhost:8888/'resources/includes/banner.php'"; ?>
and i Tried to set the base in the header.php, index.php like this:
<?php define("http://localhost:8888/",dirname(dirname($_SERVER['SERVER_NAME']))); ?>
This is just resulting in the following error:
The localhost page isn’t working
try to do this in the index page
just define the website path
define("SITE_URL",dirname(dirname($_SERVER['SERVER_NAME'])));
SITE_URL : contain the 'http://localhost:8888/'
than u can call any file in the server
php file u can do
require"SITE_URL.'some_folder/some_file.php'";
or css file u can do
<link href="<?echo SITE_URL.'/some_folder/some_file.css';?> " rel="stylesheet">
for more explain how to mare php router visit php router
I'm having some really weird issues with converting a static HTML page to a wordpress custom theme. I have a style css sheet and a foundation css sheet as I am using that frameowrk.
The CSS works perfectly on the static html page but when it goes to wordpress there are issues with the font including the colour and size. Is there a specfic way you should be importing the CSS or a conflict I should be aware of?
The CSS of both are added to the page because I can see them in style editor when I 'inspect element'. I enque the scripts as shown below;
// Adds the css to the theme
function add_theme_scripts()
{
wp_enqueue_style('styles', get_stylesheet_uri() );
wp_enqueue_style('foundation', get_template_directory_uri() . "/css/foundation.css" );
}
add_action('wp_enqueue_scripts', 'add_theme_scripts');
I didn't know if it was to do with any form of config error or just faulty files so I recreated the theme from scratch and the problem persisted.
If someone could perhaps point me in the right direction it would be very appreciated.
Thank you.
-Edit-
I've checked inspect element and removed all the addtional CSS that has been added by wordpress and the problem persists.
try to view source and check any other css are included in the page. May be some plugin css is conflicting with your css. If any plugin css conflicting deactivate that plugin and then change.
If you are en-queuing css file in parent theme.Try like this
function add_theme_scripts()
{
wp_register_style( 'foundation', THEME_DIR . '/css/foundation.css', array(), '1', 'all' );
wp_enqueue_style( 'foundation' );
}
add_action('wp_enqueue_scripts', 'add_theme_scripts');
I'm currently building a custom theme on top of the _S Underscores Wordpress theme. One of the things I immediately did was remove all the content in the style.css file, as I want to create my own styling (largely using Bootstrap).
However, I can't seem to get certain attributes in the style.css to make changes to the html. For example, I'm trying to set the following <h1> tag to red. But it will not change.
<h1 id="testOfContent">Test</h1>
CSS (in the style.css file provided by Underscores):
#testOfContent {
color: red;
}
However, the font remains black. How do you manipulate a wordpress theme (especially _S Underscores which is meant to be customizable) to use your own css? Any ideas as to why it won't register my own CSS?
Here's my functions.php file and how I'm loading the script:
function tlas_css() {
// Enqueue bootstrap css
wp_register_style('bootstrap-css', get_template_directory_uri() . '/bootstrap-3.3.4/css/bootstrap.min.css');
wp_enqueue_style('bootstrap-css');
// Enqueue custom stylesheet
wp_enqueue_style( 'tlas-custom-style', get_template_directory_uri() . '/css/tlas.css' );
wp_enqueue_style( 'tlas-style', get_template_directory_uri() . '/style.css');
}
add_action( 'wp_enqueue_scripts', 'tlas_css' );
You should use wp_enqueue_style( 'your-style', get_stylesheet_uri() ); which retrieves the URI of the current theme stylesheet.
Read more on codex.wordpress.org
The workflow I prefer to customize and add to the css for the _s theme is by editing the .scss Sass files. Be sure to select the Advanced Options so you can tick the _sassify! check box if using the _s theme Generator at https://underscores.me/#generator
Then you can import the Bootstrap Sass you want since Bootstrap 4 is written with Sass. If you prefer using Bootstrap 3, you can find it's Sass ports as well.
If you're not sure how to build the Sass, I put together a Webpack 4 development workflow for the Sassify option included with the underscores Wordpress starter theme. Hope this helps https://jimfrenette.com/2018/08/completely-blank-no-css-_s-wordpress-starter-theme/
If you are working with Chrome, try to clear cache (ctrl+F5).
Or Open Dev tools > settings > preferences > network > disable cache (when dev tool is open)
You can try this one:
add_action( 'wp_enqueue_scripts', 'yourstyle' );
function yourstyle() {
wp_enqueue_style( 'yourstyle', get_template_directory_uri() . '/css/yourstyle.css', array(), PARENT_THEME_VERSION );
}
I am updating my portfolio website and require a different sidebar for different ties of pages, i.e. one for work page and one for the blog page, apparently this can be done using Custom Fields in the page or post.
So, I opened up single.php and found the following code
<?php get_sidebar(); ?>
And replaced it with the code below
<?php $sidebar = get_post_meta($post->ID, "sidebar", true);
get_sidebar($sidebar);
?>
To add a custom sidebar, all I need to do now is apparently add the custom field “Sidebar” and include the name of the sidebar file. For example if I insert “page-01”, it will display sidebar-page-01.php as your sidebar.
After multiple times of trying however this 'isn't' the case, can't see anything wrong with what I am doing, any one have any ideas? Any help would be greatly appreciated!
Thanks guys!
You can do this the way you are doing it by doing your own php function and target the page you need with
<?php
if ( is_home() ) :
get_sidebar( 'home' );
elseif ( is_portfolio page1() ) :
get_sidebar( 'portfolio page sidebar' );
else :
get_sidebar();
endif;
?>
add more elseif statements for as many page & sidebar combination you will have
or you can download this plugin and use the code above the same way