Jump to content

where to link css in wordpress custom page in wordpress

shwetapandit

By shwetapandit
in Applications

 Share

Recommended Posts

QuickOldCar Regular Member

QuickOldCar

Posted
Posted

Can make a child theme and make any changes there, not usually a good idea to edit the original one.

http://codex.wordpress.org/Child_Themes

 

You can also just use <style></style> tags for each custom page

 

Or even something like this

 

I'm using custompage as the page name

 

<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" media="screen" />
<?php if(is_page_template('custompage.php')) :?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/custompage.css" media="screen" />
<?php endif;?>
Link to comment
Share on other sites
shwetapandit Member

shwetapandit

Posted
  • Author
Posted

 

Can make a child theme and make any changes there, not usually a good idea to edit the original one.

http://codex.wordpress.org/Child_Themes

 

You can also just use <style></style> tags for each custom page

 

Or even something like this

 

I'm using custompage as the page name

<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" media="screen" />
<?php if(is_page_template('custompage.php')) :?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/custompage.css" media="screen" />
<?php endif;?>
Link to comment
Share on other sites
shwetapandit Member

shwetapandit

Posted
  • Author
Posted

hi.....

As i am newbie to wordpress.i may be wrong.but can't find.Below is my files:

 

cutom_page.php

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type='css'>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" media="screen" />
<?php if(is_page_template('custom_page.php')) :?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/style.css" media="screen" />
<?php endif;?>


</style>
</head>

<body>
<?php
/**
 * Template Name:Custom Page
 * The main template file
 *
 * This is the most generic template file in a WordPress theme and one of the
 * two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * For example, it puts together the home page when no home.php file exists.
 *
 * @link http://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Thirteen
 * @since Twenty Thirteen 1.0
 */
?>
 <div id="container">

<div id="header">
<h1>Main Title of Web Page</h1></div>

<div id="menu">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>

<div id="content">
Content goes here</div>

<div id="footer">
Copyright©</div>
</div>

</body>
</html>
 

 

style.css

/* CSS Document */
/*

 Theme Name:      Demo    
  Theme URI:      http://example.com/Demo/
 Description:    Demo
  Author:         John Doe
 Author URI:     http://example.com
  Version:        1.0.0



 * ----------------------------------------------------------------------------
 */

h1{color:#00FF99;
background-color:#00FF66;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
}
p{
color:#FFFF33;
background-color:#CCCCCC;
}
#footer{
  background-color:#FFA500;
  clear:both;
  text-align:center;
  }
  #main{
  width:1000px;
   height:1000px;
   }
   #header{
   background-color:#FFA500;
    height:100px;
    }
    #menu{
    background-color:#FFD700;
    height:800px;
    width:200px;
    float:left;
    }
    #content{
     background-color:#EEEEEE;
     height:800px;
     width:800px;
     float:left;
     }

 

header.php

<?php
/**
 * The Header template for our theme
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package WordPress
 * @subpackage Twenty_Thirteen
 * @since Twenty Thirteen 1.0
 */
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width">
    <title><?php wp_title( '|', true, 'right' ); ?></title>
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" media="screen" />
<?php if(is_page_template('custom_page.php')) :?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/style.css" media="screen" />
<?php endif;?>


        <!--[if lt IE 9]>
    <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
    <![endif]-->
    <?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
    <div id="page" class="hfeed site">
        <header id="masthead" class="site-header" role="banner">
            <a class="home-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
                <h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
                <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
            </a>

            <div id="navbar" class="navbar">
                <nav id="site-navigation" class="navigation main-navigation" role="navigation">
                    <h3 class="menu-toggle"><?php _e( 'Menu', 'twentythirteen' ); ?></h3>
                    <a class="screen-reader-text skip-link" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentythirteen' ); ?>"><?php _e( 'Skip to content', 'twentythirteen' ); ?></a>
                    <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
                    <?php get_search_form(); ?>
                </nav><!-- #site-navigation -->
            </div><!-- #navbar -->
        </header><!-- #masthead -->

        <div id="main" class="site-main">
 

 

Where i am wrong plz suggest.Thanks in advance...........

Link to comment
Share on other sites
QuickOldCar Regular Member

QuickOldCar

Posted
Posted (edited)

Ok, lets make sure you are going about this correct.

 

I see you are using Twenty Thirteen template, browse to that theme folder and make a new file called custompage.php

 

Paste this within and save it:

<?php
/*
Template Name: CustomPage
*/
?>

<?php get_header(); ?>

<style>
<!--
  div.newcontent {
    width: 80%;
    background:#000000;
    color:#DF0101;
    text-decoration: none;
    text-align:center;
    margin-top:0px;
    margin-bottom:0px;
    margin-right: auto;
    margin-left: auto;
    padding:0px;
    }
-->
</style>
 
<?php
echo "<div class='newcontent'>";
 
echo "Any code gets added this area";
 
echo "</div>";
?>

<?php get_footer(); ?>
 

Go to your dashboard

Create a new page and name it what you desire

At the bottom right under "Page Attributes" select the "CustomPage" under "Template"

Publish your page

Edited by QuickOldCar
Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.