ThemeShaper Forums » Thematic

[closed]

Best way to make new custom templates?

(14 posts)
  • Started 4 years ago by anniesmidt
  • Latest reply from flick
  • This topic is resolved
  1. I think I'm overthinking this one and it's actually something quite simple. Please enlighten me if you can!

    I want to create a home page template that is different than my inside pages. (No blog on this site, just all pages). I'm using Thematic as a parent. I've got my child style.css all set up and working fine. I made a copy of Thematic's home.php in my child theme, and renamed it. We'll call it bob.php. In the WP admin GUI, I set my home page to use the bob.php template. That all works. Cool.

    But my question is what's the best way to STYLE bob? He comes with all the same div names and functions that call others (i think) as a normal page.php, so he can't just rely on the regular style.css which controls all of the rest of the site.

    I think this is a gap in my CSS knowledge here... but I'm just not sure of the best way to do this. Do I make a special bob.css that bob.php imports? Is there a better way?

    I've gotten myself all confused thinking I need to do things with functions or filters and now I'm muddled (I'm just starting to learn PHP and don't really know much yet).

    Thanks for your help!

    Posted 4 years ago #
  2. Thematic uses dynamic css so you can specify a tag and a page name to style a certain page. Below is an example for a category, same idea.
    eg: body.category-membership .hentry

    Posted 4 years ago #
  3. Thanks for the reply. I kinda get what you're saying, but not totally. I'm not sure how dynamic CSS works.

    So, if I have a new template called bob.php, I could style, for example, the div "container" on JUST bob.php by using the selector .bob #container? Sorry if that's a silly question!

    Thanks.

    Posted 4 years ago #
  4. http://forums.themeshaper.com/topic/how-do-i-define-a-custom-css-file-per-page-template

    Some interesting thoughts here - a little old though - but same concept I guess.

    I'm intrigued by this question as well since I haven't quite grasped how custom page templates are best used.

    p/s: http://forums.themeshaper.com/topic/change-body-class

    Posted 4 years ago #
  5. No silly questions here. I'm only about a week ahead of you otherwise I'd give you a better answer. I believe your looking for something like
    body.slug-bob .content{style}

    Posted 4 years ago #
  6. This link (posted by Flick, above) made me totally get it! Yay!

    http://forums.themeshaper.com/topic/how-do-i-define-a-custom-css-file-per-page-template

    So, if I can summarize the solution:

    1. Make a new page in your child theme (you'll probably want to do so by copying the closest template to what you're looking for from the parent theme, to save effort)

    2. Name the page -- let's call it woof.php

    3. In the WP admin area, create and/or edit the page you wish to apply the custom template to. There's a pulldown menu (available in both the edit and quickedit modes) where you can choose the new page template you just created. Choose it (woof.php)

    4. Back in code land, modify the HTML and/or PHP of woof.php as you wish (or not at all)

    5. In your CSS file (can be just your normal old child style.css) target ONLY your custom template, and thus just the page or pages you've applied it to on your site by using selectors formatted as follows: .page-template-woof-php p {}

    (To break down what that example selector's about:
    . (a dot to say it's a class)
    page-template (activates the magic)
    -your-template-name (with hyphens between multiple words)
    -php (and then finish it with hyphen php)
    p (then whatever selector you need to target... p, body, a div, whatever)

    Correct me if I explained this incorrectly, but I believe this is how I got it to work.

    Thanks everyone for your help. This is so damn cool.

    Posted 4 years ago #
  7. @anniesmidt: Thanks for summarising how to use custom page templates for Themeshaper! I'm finding it a very interesting read and it will really help me with creating my own. It makes much more sense now.

    Posted 4 years ago #
  8. rdhenry
    Member

    @flick: you said, "I'm intrigued by this question as well since I haven't quite grasped how custom page templates are best used."

    I'm sure I'm newer than everyone, so tifwiw: from following this thread, it occurs to me one of the utilities of custom page templates (CPTs) is to keep the functions.php clean and tiny. If my assumption is correct, wouldn't I also want a separate css for the (CPT) rather than making style.css unnecessarily large?

    Thx

    Posted 4 years ago #
  9. @rdhenry: Thanks for your analysis re: my question. I suppose it also offers a more familiar interface (for newbies like myself) to work 'on' as it is much like WordPress' own page template system from what I've understood, so perhaps the learning curve isn't as huge.

    I'm not sure about the CSS side. I know the child theme already loads 6 Themematic css files (by default), so I'd be tempted to just keep it all in one file to make editing easier as I am only working on a small site.

    But I did notice that the main Thematic FAQ does give an example of how to load a css file for a specific page: http://themeshaper.com/thematic/guide/?page_id=10 (under Conditional Actions) and that would definitely be very helpful for a more complicated project/design.

    p/s: I have been reading more about CSS optimisation at: http://www.sohtanaka.com/web-design/optimizing-css-tutorial/ - I definitely need to learn more about CSS group selectors, CSS specificity and inheritance to help reduce the style.css file size further, as well as looking into CSS compression tools.

    Posted 4 years ago #
  10. rdhenry
    Member

    @flick: I think you're right about the CSS side. Almost as soon as I posted the reply, I realized my error regarding the most efficient CSS optimization.

    Posted 4 years ago #
  11. @All: I have just found out about Chris' new site (the moderator/guru on ThemeShaper Forums) dedicated to Thematic via WordPress Theming and he has written an article on how to use a different layout for a certain page.

    At the moment there's just one other post about removing the sidebar from a certain page, but I am looking forward to more.

    p/s: Sorry about any duplicate posts. Editing the post seems to make it disappear sometimes!

    Posted 4 years ago #
  12. Does this method mean I can have different widths, say for a Home Page (say 960px), and then other page widths (say 780px) for certain other pages? If so, I'm presuming that setting the width in this way overrides whatever the child theme width is set to.

    Posted 4 years ago #
  13. Yes .. you could define the whole site to have a 780px width and use the body class .home to define a 960px width for your home page.

    Chris

    Posted 4 years ago #
  14. @posword: Going by Chris' article (How to use a different layout for a certain page)I'd say you could - with the use of a separate CSS file to style.css.

    Posted 4 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.