Hi!

 

So a few weeks ago I asked for some advice on where to start with Wordpress. I've now got a blog up and running, have created a theme using the Starkers theme as a base, and now have something resembling a blog. Yay!

 

(You can view it here btw: http://rubytuesdaycreative.co.uk/blog/)

 

I'm looking for some advice on how to edit the themes layout. I'm aware Starkers in it's nature has no layout, but I need to work out how to add a bit here and there.

 

I started by pulling over the relevant styles from my CSS, and then c&p'd my header and footer code into the header and footer pages. Seemed to all work lovely.

 

I then needed to look into wrapping the central 'content' area in a neat wrapper. I had used #content across my site, so I simple added:

 

<div id="content">

 

... to the bottom of my head.php file, and closed it at the beginning of my footer. This defined a nice neat content div wrapping the main content.

 

Now... I want to add a side bar into the design so I can have a two col blog (main area for the posts, side bar for widgets and all that.)

 

I've looked at some other themes and it seems like they work by using "main" and "aside" as the ID names. But I'm not sure a) how to code this and be) where it belongs in the files.

 

Anyone offer any advice on where these divs should be started/defined and the settings I need to get them working?

I think the main content div will keep everything together. From that you can but divs inside divs etc.

 

For instance, you can put the loop in a div set to 700px width for instance - This will hold all of the posts, then put the sidebar in another div at 300px (hypothetically assuming the width of your site is 1000px, yours is probably different). Then you can float the divs so that they are next to each other.

 

You can call the sidebar using dynamic_sidebar :

 

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

 

You can name the ids/classes what you like. You can also use the inspector in your browser to see what wordpress is outputting so that you can style the approiate parts accordingly ie - your sidebar and links etc

 

Sorry if this isn't very clear.

 

The main problem I had with wordpress is that you can style it anyway you want, its just a matter of understanding what functions output what, and then customising certain parts.

I think the main content div will keep everything together. From that you can but divs inside divs etc.

 

For instance, you can put the loop in a div set to 700px width for instance - This will hold all of the posts, then put the sidebar in another div at 300px (hypothetically assuming the width of your site is 1000px, yours is probably different). Then you can float the divs so that they are next to each other.

 

You can call the sidebar using dynamic_sidebar :

 

http://codex.wordpre...dynamic_sidebar

 

You can name the ids/classes what you like. You can also use the inspector in your browser to see what wordpress is outputting so that you can style the approiate parts accordingly ie - your sidebar and links etc

 

Sorry if this isn't very clear.

 

The main problem I had with wordpress is that you can style it anyway you want, its just a matter of understanding what functions output what, and then customising certain parts.

 

Thanks, this does make sense.

 

The thing I'm really confused about is where this code goes. I only have two 'parts'. Header.php and footer.php. Presently, I have opened my #content div in the header and closed it in the footer, but I'm presuming this isn't really how it's supposed to be done. Surely there is some sort of 'main.php' or something similar where all this code can go?

Try this:

 

#content {

-moz-column-count:2; /* Firefox */
-webkit-column-count:2; /* Safari and Chrome */
column-count:2;

-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
}

Try this:

 

#content {

-moz-column-count:2; /* Firefox */
-webkit-column-count:2; /* Safari and Chrome */
column-count:2;

-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
}

 

Is this the correct way? Surely I should be using some sort of sidebar.php ? I want to do this correctly.

Have you got an index.php with the loop inside it?

Is this the correct way? Surely I should be using some sort of sidebar.php ? I want to do this correctly.

 

This is CSS3, It will simply layout your content into two columns. just add it to your style sheet

Have you got an index.php with the loop inside it?

 

Ah yes I think I do! (Sorry I'm on my work PC not at home.)

 

Starkers has a 'parts' folder with header and footer, so I assumed all the 'parts' would be in there. Do I code everything into the index.php then? I kinda assumed that like 'header' and 'footer' there would be a list of different files I could have e.g 'sidebar' etc and how I could reference each of these into my site?

You need more base files. Typically I use; head.php (<head> stuff), header.php (actual header/banner), nav.php, home.php/2col.php (depends on the page design and I have as many of these as I need with relevant filenames), footer.php, (I rarely use a sidebar but you can use sidebar.php). That isn't concrete, you can use get header, get sidebar etc I just prefer to use includes. Basically you need more files. WP should automatically load home.php if it exists so use that as your base then for different pages use a different file, e.g. 2col.php and define this as a template on the WP page edit admin.

 

Hope this kind of makes sense.

I cant remember of the top of my head the minimum amount of files you need, i think the index.php is compulsory.

 

The way it works is you have the seperate files when you look at it in a code editor, but when the site is in the browser, all of the files are brought together to from one file. So you might have:

 

Header.php (with the header code, so links to css,title, header, main site nav etc)

 

index.php (with the loop and other parts that are outputted ie posts)

 

footer.php (with the footer code and everything you want in the footer maybe a navigation for specifically for that area)

 

when the page is in the browser, all of those files become one page.

 

this may help, hopefully it doesn't add to the confusion:

 

http://codex.wordpress.org/Template_Hierarchy

 

If you want to output the sidebar, use <?php dynamic_sideabr(); ?> but put it in its own div with appropriate widths and styles, or you can use <?php get_sidebar(); ?>. I have just hade a look at a theme im developing using the starkers/1140 mix theme, and the sidebar.php is blank, so i am using the dynamic sidebar function to output a sidebar.

 

the wordpress functions mainly output content, then you use css to position/style to your hearts content.

You need more base files. Typically I use; head.php (<head> stuff), header.php (actual header/banner), nav.php, home.php/2col.php (depends on the page design and I have as many of these as I need with relevant filenames), footer.php, (I rarely use a sidebar but you can use sidebar.php). That isn't concrete, you can use get header, get sidebar etc I just prefer to use includes. Basically you need more files. WP should automatically load home.php if it exists so use that as your base then for different pages use a different file, e.g. 2col.php and define this as a template on the WP page edit admin.

 

Hope this kind of makes sense.

 

Yep this definitely makes sense, I'll have a hunt through the documentation, I presume there is a list somewhere of accepted base filenames?

 

Do these need to be referenced anywhere in the code, or is WP capable of recognising them and placing them correctly itself? 9E.g if I just create sidebar.php, dump it in my parts folder and run, will WP find it or do I need to add it to one of the WP files)

I cant remember of the top of my head the minimum amount of files you need, i think the index.php is compulsory.

 

The way it works is you have the seperate files when you look at it in a code editor, but when the site is in the browser, all of the files are brought together to from one file. So you might have:

 

Header.php (with the header code, so links to css,title, header, main site nav etc)

 

index.php (with the loop and other parts that are outputted ie posts)

 

footer.php (with the footer code and everything you want in the footer maybe a navigation for specifically for that area)

 

when the page is in the browser, all of those files become one page.

 

this may help, hopefully it doesn't add to the confusion:

 

http://codex.wordpre...plate_Hierarchy

 

If you want to output the sidebar, use <?php dynamic_sideabr(); ?> but put it in its own div with appropriate widths and styles, or you can use <?php get_sidebar(); ?>. I have just hade a look at a theme im developing using the starkers/1140 mix theme, and the sidebar.php is blank, so i am using the dynamic sidebar function to output a sidebar.

 

the wordpress functions mainly output content, then you use css to position/style to your hearts content.

 

OK, so I don't necessarily need to have a full sidebar.php file, but do I add this dynamic sidebar code to the index file?

 

So in index, I'll create my two col layout and then add dynamic_sidebar to my narrow col, and keep the loop in my wider col?

Best thing to do is don't think of Wordpress as a concrete structure, it's very flexible. The get functions just fetch files that are defined in the WP settings (possibly function.php not sure though) so in theory I could change the settings so that get_sidebar fetches the file "nonsense.php". All you're doing is inserting different bits of code in certain parts of the site by pulling in files. You can use PHP includes alongside the default WP functions so you could fetch a file called pre-footer.php for example and use an include to fetch that. In your page, which could be index.php or 2col.php etc you just include pre-footer.php where you want it to appear in the HTML.

 

It's basically a big jigsaw, you're putting files into slots to make it all work as one. Having the files separate just makes things easier in the long run, you could in theory have a static site like, index.php, page1.php etc and just have specific HTML in each page, obviously this defeats the purpose but I'm just trying to get across that you don't have to think of WP as being rigid, don't be afraid to break it.

 

EDIT: You're 100% correct about the 2 col and having the loop in one bit and the sidebar in the other. Your file would look something like; <div class="left-col>the loop</div> <div class="right-col>get_sidebar (or use an include if you wish, for example you could get "ads.php")</div.

Edited November 19, 201213 yr by jtuds

Best thing to do is don't think of Wordpress as a concrete structure, it's very flexible. The get functions just fetch files that are defined in the WP settings (possibly function.php not sure though) so in theory I could change the settings so that get_sidebar fetches the file "nonsense.php". All you're doing is inserting different bits of code in certain parts of the site by pulling in files. You can use PHP includes alongside the default WP functions so you could fetch a file called pre-footer.php for example and use an include to fetch that. In your page, which could be index.php or 2col.php etc you just include pre-footer.php where you want it to appear in the HTML.

 

It's basically a big jigsaw, you're putting files into slots to make it all work as one. Having the files separate just makes things easier in the long run, you could in theory have a static site like, index.php, page1.php etc and just have specific HTML in each page, obviously this defeats the purpose but I'm just trying to get across that you don't have to think of WP as being rigid, don't be afraid to break it.

 

EDIT: You're 100% correct about the 2 col and having the loop in one bit and the sidebar in the other. Your file would look something like; <div class="left-col>the loop</div> <div class="right-col>get_sidebar (or use an include if you wish, for example you could get "ads.php")</div.

 

Perfect thanks. I'll write that up when I get home tonight and see what I can make. Assume adding the dynamic sidebar code given above will then allow me to 'widgetize' as WP seems to call it. (I went to add widgets last night but WP said the theme had no widgetized sidebar, hence why I want to add this.)

I used to make site on frameworks. the best one is bootstrap. There is an article to help you make your own theme.

http://blog.teamtreehouse.com/responsive-wordpress-bootstrap-theme-tutorial

Also take a look on this

Perfect thanks. I'll write that up when I get home tonight and see what I can make. Assume adding the dynamic sidebar code given above will then allow me to 'widgetize' as WP seems to call it. (I went to add widgets last night but WP said the theme had no widgetized sidebar, hence why I want to add this.)

 

Don't take this as certain because I'm not but I think widgets link into Wordpress which means you need to use code that corresponds. If you just use an include to fetch the sidebar which could be anything from ads.php to righthandside.php and you fill that file with HTML then WP won't do anything with it other than simply fetch the file. To use WP functionality there has to be some code in the PHP file that WP can work with, I think this is where the default WP sidebar comes into play.

 

Starkers won't come with a sidebar I don't think. You might have to find a plugin to give you the functionality you want.

Edited November 19, 201213 yr by jtuds

Don't take this as certain because I'm not but I think widgets link into Wordpress which means you need to use code that corresponds. If you just use an include to fetch the sidebar which could be anything from ads.php to righthandside.php and you fill that file with HTML then WP won't do anything with it other than simply fetch the file. To use WP functionality there has to be some code in the PHP file that WP can work with, I think this is where the default WP sidebar comes into play.

 

Starkers won't come with a sidebar I don't think. You might have to find a plugin to give you the functionality you want.

 

Ah ok, so I probably do need to have sidebar.php then.

 

So, coming back to that... how do I include sidebar.php?

 

Do I just create sidebar.php and then it'll work?

 

All I want is to have a sidebar I can add widgets to. Surely this exists?

Ah ok, so I probably do need to have sidebar.php then.

 

So, coming back to that... how do I include sidebar.php?

 

Do I just create sidebar.php and then it'll work?

 

All I want is to have a sidebar I can add widgets to. Surely this exists?

 

I think you need a sidebar plugin to deal with all that functionality. In the default WP theme the plugin has the categories, previous posts etc and you call it with get_sidebar but starkers doesn't have this. I would search for a plugin that deals with what you need and follow the instructions on how to call it.

 

What you're basically after is pre made code that deals with your needs, this code will be called in base file. That is all the sidebar, or any other part of the page is it's just with default WP the sidebar provides certain functions.

 

On a related note, but separate from this particular situation, you call sidebar.php with a PHP include. You can do this with any file whatsoever. So in future you may create a site based on WP but has no visible WP features so you might have 3/4 of the page for main content and a bit on the right for let's say social buttons. You would have <div class="main-content">loop code to fetch WP editable content</div> <div class="social"><?php include 'social.php' ?></div>. All social.php is, is a load of HTML but when you have lots of different components to a site and some are consistent it's useful to separate them into small individual files and include them when needed.

Ah ok, so I probably do need to have sidebar.php then.

 

So, coming back to that... how do I include sidebar.php?

 

Do I just create sidebar.php and then it'll work?

 

All I want is to have a sidebar I can add widgets to. Surely this exists?

 

I believe it is like this (only starting with WordPress):

 

- Register the sidebar in your functions.php:

 

 

if(function_exists('register_sidebar')){
register_sidebar();}

 

- in sidebar.php check if any widgets are added to the sidebar and if not display the static sidebar (dynamic_sidebar() displays the widgets):

 

 

<?php if(!function_exists('dynamic_sidebar') || !dynamic_sidebar()) : ?>
<li>
<h2>Static sidebar...</h2>
</li>
<?php endif; ?>

 

- include the sidebar in index.php:

 

 

<div>
<?php get_sidebar(); ?>
</div>

 

Like here:

 

See How Easy It Is To Widgetize WordPress Themes

Edited November 19, 201213 yr by Anonimista