WordPress.org

Ready to get started?Download WordPress

Forums

adding .php files to custom page (23 posts)

  1. thehindutimes
    Member
    Posted 2 years ago #

    Hi!

    I'm building a custom page for my blog that will work as the main page. So I've added the <?php /* Template Name: something */?> to the top of the file.

    Can I import the different .php files from my theme folder. Say if I want to use the footer.php on my main page. Can I just add <?php get_footer(); ?> inside whatever div tag I want it in?

    Or is there something more I have to do?

  2. peredur
    Member
    Posted 2 years ago #

    Yes. You can use whatever WordPress PHP functions you like.

    Cheers

    PAE

  3. thehindutimes
    Member
    Posted 2 years ago #

    Ok, that's good. Then I must be missing something because I can't see the footer when I put <?php get_footer(); ?> in the div footer tag.

    Any idea of what it can be?

    Cheers!

  4. peredur
    Member
    Posted 2 years ago #

    Have you looked at what's in the other page template files that form a part of your theme? The usual structure is something like:

    <?php get_header(); ?>
    
    <!-- Stuff that goes in the page body -->
    
    <?php get_sidebar(); ?>
    <?php get_footer(); ?>

    The call to get_sidebar() is optional, of course, depending on whether the page requires the sidebar or not.

    HTH

    PAE

  5. Jose Castaneda
    Member
    Posted 2 years ago #

    Can you elaborate on what you mean that you can't see the footer?

  6. thehindutimes
    Member
    Posted 2 years ago #

    yes, I've looked in the index.php to see how it's done in there and from what I can see it should be enough with just putting <?php get_footer(); ?> in the appropriate place.

    What I mean with I can't see the footer is that if I refresh the page in Firefox there's just nothing showing where the footer ought to be.

  7. shaile
    Member
    Posted 2 years ago #

    you can also try <?php include('footer.php');?>

  8. Jose Castaneda
    Member
    Posted 2 years ago #

    Yeah, you can try using the PHP include method. I know it may sound so simple but there is a footer.php file in your theme directory? I know I've done that before where I forgot to put it in the right folder.

  9. thehindutimes
    Member
    Posted 2 years ago #

    Yes, I suppose that's classic :)
    I've made my static page inside the TwentyEleven folder so every php-file for that theme should be available right?

    And also, I'm using a child theme .css file (child of twentyeleven's style.css) but it doesn't seem to find the CSS when I change it in wordpress to use my static page.
    I get the HTML of the static page but no CSS or JS. Has that happened to anyone?

  10. peredur
    Member
    Posted 2 years ago #

    Why don't you put your static page template inside your child theme folder? WordPress looks there first. Any files that are new in your child theme should be in the child theme folder, as should any template files that exist in your parent theme but that you want to edit.

    The usual procedure is to copy the original file from the parent theme folder to the child theme folder and then to edit the child theme version, leaving the parent theme version intact.

    When you create a child theme, nothing in your parent theme should change. This is essential when dealing with a default theme like twentyeleven.

    Cheers

    PAE

  11. peredur
    Member
    Posted 2 years ago #

      On the CSS issue, have you included an @import statement in your child theme's style.css file to include the parent theme's style sheet?

      A minimal child theme (which is always the starting point when developing a child theme) comprises:

    • A folder in wp-content/themes
    • A CSS file in that folder, called style.css, and containing:
    • The mandatory comments at the top of the page
    • An @import statement to import the parent theme's stylesheet

    Cheers

    PAE

  12. thehindutimes
    Member
    Posted 2 years ago #

    ok, I've put all my files in my child theme folder and a copy of the original footer.

    I am still not getting any result when I try to include the footer on the page tho.
    I've tried both <?php get_footer(); ?> and <?php include("footer.php"); ?>
    but nothing happens.
    I must be missing something else.

  13. peredur
    Member
    Posted 2 years ago #

    Well, you shouldn't need a copy of the original footer, unless you intend to change it. Maybe that's what's in your mind...

    When WP uses a child theme, it looks for a stylesheet in the child folder. That's why the child style sheet is mandatory. It then looks for any template files first in the child theme and then in the parent. So any template files that haven't changed can just be left where they are, in the parent.

    Basically the child theme just contains the differences between the child and the parent.

    So let's get back to basics:

    • Does your child theme appear in the list of available themes in the Dashboard?
    • Assuming it does, have you successfully activated it, such that it shows up in the Dashboard as the active theme?
    • Assuming it does, when you go to Dashboard --> Appearance --> Editor do you see your child theme's style sheet open in the editor and do you see links to all your child theme's template files in the list on the right?
    • Do the files available in the editor all contain the code you expect?

    If all that's OK we can try to move on.

    Is there no way you can post a link to your site so we can see what's going on?

    Cheers

    PAe

  14. thehindutimes
    Member
    Posted 2 years ago #

    Yes, all the expected files are listed on the menu to the left in the editor. I've made a seperate .css file for the Home Page Template that imports the child theme. and they're all in the child theme folder.

    If I go to settings -> reading and choose static page and my Home Page template then it works but there's no CSS or JS. If I open up Firebug it says that there are no css rules applied so for some reason it's not being read.

    If I use the default "Your latest post" option in Settings -> Reading them the CSS works for the blog. So the child theme is working. It's only when I try to use the Home Page template and it's corresponding css-file.

    I'm still just getting started with developing wordpress sites so
    thanks for taking the time and helping btw!

    Cheers!

  15. peredur
    Member
    Posted 2 years ago #

    It's not finding your style sheet. You need to check the relative path in your child theme's @import statement, although, to be honest I don't see why you need a separate child sheet.

    If you've put code directly into your HTML page to get the special style sheet, you need to use an absolute URL or the style sheet will never be found. So in your template file you need something like:

    ...
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/my_special_styles.css" />
    ...

    This assumes that your special style sheet is in the same directory as your theme's style sheet. If not, you need to adjust the path.

    HTH

    PAE

  16. thehindutimes
    Member
    Posted 2 years ago #

    So it might be better to just stick with the one child theme css file?

  17. peredur
    Member
    Posted 2 years ago #

    As long as you can identify the specific elements you want the new styles to apply to. This is usually done by using specificity.

    A lot depends on how you've coded your special page. If you've used standard WordPress calls that do things like add the standard ids and classes that WordPress uses (e.g. <body class="home">...) then you can easily identify, say, paragraphs on the home page by using some CSS like:

    p.home{...}

    But as I said in my last post, you can link to a special style sheet, but you just have to make sure you construct the proper URL. In WordPress you always have to use absolute URLs - because pages are never called directly but are, rather, included into other pages. Since you can't be sure of the location of the including page you can never use an address relative to it. The address has to be absolute so that the location of the including PHP file is not relevant.

    HTH

  18. thehindutimes
    Member
    Posted 2 years ago #

    I've combined all styles to be in the one child theme style sheet. so any new css rule is in that file.
    By doing that it should be enough to just have the normal
    <link href="../KidTheme/style.css" rel="stylesheet" type="text/css">
    on all pages that use the css-file right?

    My Home Page template is written as I would write any other normal page except that it has the <?php /* Template Name: Home Page
    */ ?> at the top.
    So I haven't used any template files belonging to the Twenty Eleven theme.

  19. peredur
    Member
    Posted 2 years ago #

    Please note what I said. You can't use a relative href to a style sheet in WordPress.

    Also, since you're using the standard style sheet name, you don't need to include it anyway. WordPress automatically uses style.css if it's located in the child theme's directory. You just need to make sure that the file contains the mandatory comments block as the first lines in style.css and that it includes the parent's style sheet by containing the following @import statement immediately after the mandatory comment block:

    @import url('../parentthemedirectoryname/style.css');

    After the @import statement you add the style rules specific to your child.

    Your child theme folder should contain the mandatory style sheet with the contents I detail above in this post, plus any template files that are different from the parent theme's equivalents and any template files that do not exist in the parent such as template files for custom page types.

    A minimal child theme contains only the style.css file formatted as above, with just the comments and the @import statement. Such a minimal child theme would look and behave exactly like its parent.

    HTH

    PAE

  20. thehindutimes
    Member
    Posted 2 years ago #

    I've done all that. The CSS file has the mandatory comment block and the @import line immediately after.

    So by not use a relative href are you saying that I should't attach the stylesheet in my html file? That wordpress takes care of that.

  21. peredur
    Member
    Posted 2 years ago #

    What I'm saying is that if the stylesheet you want to use is the standard style.css file then it will be included by your theme's header.php file.

    If you aren't using the theme's header.php file or have modified it so that it no longer includes the standard stylesheet then yes, you'll have to include it yourself. Just copy the code from your parent theme's header.php file.

    You can't link to a stylesheet into a WordPress theme using a relative address for all the reasons I've already explained to you. You can link to stylesheet using code that constructs an absolute URL, such as:

    <link type="text/css" rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" />

    See:

    http://codex.wordpress.org/Function_Reference/bloginfo

    HTH

    PAE

  22. thehindutimes
    Member
    Posted 2 years ago #

    YES! we've got it working :)
    At least the CSS. I suppose I have to do something similar with JavaScript right?

  23. peredur
    Member
    Posted 2 years ago #

    If you're trying to import a JavaScript file then, yes, you need to use an absolute URL. Construct it using bloginfo(). For instance, if you've put the JavaScript file into a directory called 'scripts' off your child theme's directory, and if your JavaScript file was called 'myjava.js', then you'd construct the URL using:

    <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/scripts/myjava.js" />

    HTH

    PAE

Topic Closed

This topic has been closed to new replies.

About this Topic