Page with different layout

Asked

Viewed 310 times

0

I’m starting to develop themes for Wordpress and so far managed to some content and tutorials of how to do such a thing, however the information I have is that:

  • the page page.php is responsible for displaying the site pages such as contato,quem somos and etc
  • and the page single.php is responsible for displaying the content of the dots along with the page archive.php.

One of the doubts is exactly this, which system of judgment for Wordpress use the pages single and archive? The other question is how can I apply different styles to different pages? If the content of the pages (contato, quem somos) is exhibited in page.php which contains only 1 style?

css wordpress
  • 2

    a little help you find http://codex.wordpress.org/pt-br:Hierarquia_de_modelos_wordpress

2 answers

1


One way to apply individual styles, for example on the Contact page, is to create a template page-contato.php. The important thing is the slug page:

If that slug were sample-page, the template would have to be called page-sample-page.php.

And, when editing, do the CSS markup needed in this custom template.

Another very simple way is if you have the body_class() applied in the <body> HTML. This is in the file header.php:

</head>   
<body <?php body_class(); ?>>
<div id="conteudo">

With this function applied to <body>, the HTML for the contact page is as follows:


And in his style sheet, he would enforce rules like,:

body.page-id-2 #conteudo { text-align: right }

This way you can customize virtually all pages, posts, categories, etc.

Can check the documentation for more details, which includes this diagram of how the hierarchy of templates works in Wordpress:

wordpress template hierarchy

  • I didn’t really understand how the body_clas(), I talked to some friends and they told me to use the same css that goes into the header and just add other ids and other classes, for example. Se in my index.php I have a h1with color: blue and on my page of contatoI want to use a h1 again however with another color I could make 2 classes in the same file style.css, h1-index {codigo} and h1-contato{codigo}, what you think?

  • Check how classes change in body as you navigate the site

  • If Theme is you who is developing, yes, you can modify the main CSS. If Theme is not yours, the ideal is a Child-Theme, because this way you can make updates in the main Theme without problems. As is the implementation in PHP of this h1-index and h1-contato what do you propose? . . . HTML body_class() prints can be customized, has a filter for it. What I propose is that you have in CSS: body.index h1 {/*etc*/} and body.contato h1 {/*etc*/}.

  • If you don’t customize the body_class(), the CSS would be: body.page-id-ID_DO_INDEX h1 {/*etc*/} and body.page-id-ID_DO_CONTATO h1 {/*etc*/}.

  • The theme is my own, I’m learning to develop alone.

  • Here’s some nice code to clear the body_class output: Remove classes from body_class . . . and you can use something like is_page('contato') to place custom classes

Show 1 more comment

0

Regarding the criteria... Ideally you read the Codex hierarchy documentation.
For you to create different styles for pages you can create a Page Template.
With it you can make different styles, have different singles , Rchive, header, footer and etc.
It’s ideal you see on Codex about. And before you create Page Templete, the ideal is for you to have clear in your head the hierarchy of WP or try to be guided to the maximum by it. So you don’t get in trouble in the future.
I hope I’ve helped.
See you around.

Browser other questions tagged css wordpress

You are not signed in. Login or sign up in order to post.