How to link a custom WP template "page" to a new css file?

by Ashley Gable

Posted: 16 years ago 16 replies

PROGRAMMING

Hi,

I am hoping someone can help me out.

I am just made a new template in WP for some pages I am working on.

Basically I just needed the sidebars removed. It was easy enough to remove them from the code.

But I also needed to widen the content area and center it so it looked normal. That was easy enough too.

So I have a new template page (which is identical to the default WP page.php except for the sidebars being removed) and a new css file.

Here is where I am having trouble. I cannot figure out how to link the new template to the new css.

It just keeps linking to the old one.

Here is the code at the top of the template:

Code:

 
<?php get_header() ?>
 <div id="content">

I am not a programmer, but this means that it is going to the header file and retreiving the information, right?

I think that is right because as the top of the header file it does in fact link to the defualt css file.

So I am assuming I need to change the header file so that when this new template goes there, it goes to my new css file ...

but I dont know how to do that! I dont know what I am supposed to add so that the rest of the site still displays the default css and so the new template uses my custom one:confused:

I know this must be very simple for you guys lol But I have trouble with the simplest things when it comes to stuff like this!

And instead of spending another 2 1/2 hours tring to figure it out, I thought I would come as you guys!

Any help would be appreciated, even if you could point me in the right direction!

Thanks
Ashley

#css #custom #file #link #page #template

Harrison Ortega

16 years ago

Hey Ashley, a few steps for you to accomplish that.

1st- Preparing the template.
1a- Add this line of code to the very top of your new template.

PHP Code:

  <?php
/*
Template Name: No Sidebars
*/
?>

1b- Name this template to something like (It can be any name) nosidebars.php

1c- Upload this template to your server.

2nd- Preparing the header.php (backup the header.php).
2a- Open the header.php
2b- locate the call for the css.
2c- Insert the default css on the else statement on this code:

PHP Code:

  <?php if (is_page_template('nosidebars.php')) { ?>
 <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>/your-new-style.css" type="text/css"media="screen" />
<?php } else { ?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css"media="screen" />
<?php } ?>

3- Create the page and apply the template to it.

You should be done by now.

[ 1 ] Thanks
1 reply

Signature

NJ web design / NJ Web Designer. MY Wordpress portfolio. 10 years of HTML/CSS - 6 years developing professional Wordpress websites. Currently not available for services.

{{ DiscussionBoard.errors[2122150].message }}

Ashley Gable

16 years ago

Hey thanks for the reply.

Okay I did all the steps up until the header part.

If I am right, it should look like this now?:

Code:

<?php if (is_page_template('nosidebars.php')) { ?>
 <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>/your-new-style.css" type="text/css"media="screen" />
<?php } else { ?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>/defualt.css" type="text/css"media="screen" />
<?php } ?>

And that is exactly what I put into the header file?

Here is the header code:

Code:

<html xmlns="XHTML namespace" <?php language_attributes(); ?>>
<head profile="XFN 1.1 profile">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php bp_page_title() ?></title>
<?php do_action( 'bp_head' ) ?>
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<?php if ( function_exists( 'bp_sitewide_activity_feed_link' ) ) : ?>

Do I remove the red part and add in the new code you gave me?

Thanks again for the help! I really appreciate it!

Thanks
1 reply

{{ DiscussionBoard.errors[2122223].message }}

Harrison Ortega

16 years ago

okay, hold on. What is the main CSS and the new one?
If you want, PM me an admin access and I can do it for you in one minute. Or the link to your site so I can see the CSS styles that you have to use.

Otherwise, the idea it is to replace the style.css that would conflict with the new one. If you have a third style, don't remove it.

[ 1 ] Thanks
1 reply

Signature

NJ web design / NJ Web Designer. MY Wordpress portfolio. 10 years of HTML/CSS - 6 years developing professional Wordpress websites. Currently not available for services.

{{ DiscussionBoard.errors[2122227].message }}

Ashley Gable

16 years ago

hey,

Sure I can send you the login details, but do you mean for wordpress or cpanel?

Just to be clear, this is a buddy press theme. From what I can tell, in the theme folder is the page.php file, it goes to the "header" file, but that is in the plugins folder, as there is no header.php file in the theme folder (as far as I have found)

There are 2 css files in the theme folder, and a bunch in the plugin directory.

Let me know about whether you want cpanel or wordpress and I will pm you!

Thanks again, I really appreciate it.

Thanks
1 reply

{{ DiscussionBoard.errors[2122372].message }}

Harrison Ortega

16 years ago

If you don't mind, send me both cpanel or ftp and wordpress.

[ 1 ] Thanks
1 reply

Signature

NJ web design / NJ Web Designer. MY Wordpress portfolio. 10 years of HTML/CSS - 6 years developing professional Wordpress websites. Currently not available for services.

{{ DiscussionBoard.errors[2122389].message }}

Harrison Ortega

16 years ago

Hey Ashley, since I can't PM you (not enough posts) feel free to email me at hhffoo@optonline.net.

What is the name of the new css you created? also have you uploaded the template without the sidebars already?

[ 1 ] Thanks
1 reply

Signature

NJ web design / NJ Web Designer. MY Wordpress portfolio. 10 years of HTML/CSS - 6 years developing professional Wordpress websites. Currently not available for services.

{{ DiscussionBoard.errors[2122493].message }}

Ashley Gable

16 years ago

Originally Posted by Harrison Ortega

Hey

It is called forum.css, it is in the folder with the page.php and the new template which I named forumtemplate.php.

They are both in the buddypress theme folder.

Ashley

Thanks
1 reply

{{ DiscussionBoard.errors[2122516].message }}

Ashley Gable 16 years ago

Any luck?

Also dont worry about breaking anything, this is just a test site, there arent any members or anything, wont matter a bit if I have to reinstall.
- Thanks
- 1 reply
{{ DiscussionBoard.errors[2122662].message }}
- Harrison Ortega 16 years ago
  
  I got the header to pull the forum.css but I can't figure out which css is conflicting with it. At first, I thought we could delete the default.css, but we can't. I will try to delete the custom.css and see the results.
  
  Thanks
  
  1 reply
  
  Signature
  NJ web design / NJ Web Designer. MY Wordpress portfolio. 10 years of HTML/CSS - 6 years developing professional Wordpress websites. Currently not available for services.
  
  {{ DiscussionBoard.errors[2122700].message }}
  
  Ashley Gable 16 years ago
  
  Also I am not 100% sure what the page will look like once it does successfully get to the new css.
  
  I just changed it from left to center and widened the content a bit. So I am not sure what it will look like, i guess if the forum area centers then that will be the hint, but it also might not center it lol again I changed what I thought needed to be changed, but I never really deal with this sort of thing!
  
  Thanks
  
  {{ DiscussionBoard.errors[2122724].message }}

Ashley Gable 16 years ago

Okay Cool

There seemed to be so many css files! I dont do much in the way of that stuff so it got really confusing really fast!
- Thanks
{{ DiscussionBoard.errors[2122712].message }}
Ashley Gable 16 years ago

oh there it is!

You did it!
- Thanks
{{ DiscussionBoard.errors[2122735].message }}

Harrison Ortega

16 years ago

yes, I took a different approach. I just modified the class on the forumtemplate.php from padder to padder-2 and added this new class to the custom.css.

Basically, you no longer need the forum.css and if you want to make any changes just go to the custom.css (last class there).

Also we didn't need to call an extra css on the header.php

Okay, got to go. Talk to you later.

[ 1 ] Thanks
1 reply

Signature

NJ web design / NJ Web Designer. MY Wordpress portfolio. 10 years of HTML/CSS - 6 years developing professional Wordpress websites. Currently not available for services.

{{ DiscussionBoard.errors[2122753].message }}

Ashley Gable

16 years ago

Originally Posted by Harrison Ortega

Okay so if I need to change anything only change the custom.css, gotchya!

Thank you so much! I would of been here for hours if not days figuring this out!

If you send me your paypal email I will send you some money, you really did me a big favor, so I wanna give something back!

you can send me an email via my profile.

Thank you so much again I really appreciate it!

Ashley

Thanks
1 reply

{{ DiscussionBoard.errors[2122761].message }}

Harrison Ortega 16 years ago

Don't worry about payment. I am glad we were able to sort it out.
- [ 1 ] Thanks
- 1 reply
Signature
NJ web design / NJ Web Designer. MY Wordpress portfolio. 10 years of HTML/CSS - 6 years developing professional Wordpress websites. Currently not available for services.
{{ DiscussionBoard.errors[2122789].message }}
- Ashley Gable 16 years ago
  
  Originally Posted by Harrison Ortega
  
  Don't worry about payment. I am glad we were able to sort it out.
  
  Thanks man I really appreciate it! Its guys like you that make this forum a such a great place
  
  Thanks again mate
  
  Ashley
  
  Thanks
  
  {{ DiscussionBoard.errors[2125267].message }}

How to link a custom WP template "page" to a new css file?

Trending Topics

Hello there

Kicked the diet coke addiction ...

AEO/AIO/GEO differences

Veteran bloggers, do you notice a decline in visitor comments?

The Masters....