Adding custom DIVs to template files « My Site My Way Support

Adding custom DIVs to template files

pending (9 posts) (3 voices)

avatar12
Member

Ok, so I've made my feelings known about the inaccessibility of the new themes... but I have been a loyal customer and have recommended your work (and your tech support) for a few years now... and I feel like I owe it one more good effort to try to get the new system to work for me, before abandoning it for my projects.

What I need to do is add a custom DIV structure to the theme templates.

I need to insert new DIV tags into single.php, and index.php, and archive.php and any other template file that displays content. BUT, it will be slightly different for each, ad I prefer to structure each page differently to show the content differently.

You can see how I edited in custom DIVs on my site here: http://www.townsandtrails.com

I need to be able to do that again with the new Awake.

So, lets start with something easy:

The theme includes <div id="header">, how do I add a new DIV and wrap <div id="header-container"> around that?

So it would look like:

Div header-container
Div header
/Div header
/Div header-container

Posted 3 months ago #
Elliott
Support

Hello avatar12,

You can find the header div in /wp-content/themes/[your_theme]/header.php around line 30,

?><div id="header">

I don't see any reason to add extra divs though, what exactly are you wanting to do?

Posted 3 months ago #
avatar12
Member

Elliott,

I am looking to recreate the site at the URL provided above. For that site, I abandoned (among other things) the upper HTML structure of your pages, and customized my own.

The elements I added were a new header area, a different menu system (css mega drop down), and something called an intro-container where I places my breadcrumbs. The menu and intro-container also included "shadow" containers that allowed me to position a design element.

That may not be the best example...

The main page of my site, index.php, may be a better example.

On that page I do several custom things.

1. I pull in my own featured slider.

2. I changed and added several DIV elements. Such as "boxmain" to allow me to display posts 2 at a time.

3. I pull in some code to display the comments to the right of the featured

I did all of that by editing up the index.php. In the new theme, index.php is completely blank.

I found something called home.php... but I don't see where I would insert the elements above.

I could post the full contents of the two index.php pages if you think that would help illustrate the issue.

Posted 3 months ago #
avatar12
Member

Hmmm, crazy idea....

But, since I can see all of the HTML that your new framework produces, by just inspecting the source once a page is actually displayed... would it be possible to simply recreate those template files using the actual HTML?

Can I abandon all of your function calls and buried code, etc... and just paste in the HTML structure?

So, for example, delete <?php mysite_before_entry(); ?> and in its place just type in the actual HTML that this function is hiding from us?

Is that possible? Would it break things that I am not aware of?

Posted 3 months ago #
Elliott
Support

I wouldn't recommend doing that. If your just adding extra divs then you would just need to insert them into the template files, header.php, single.php, page.php, footer.php, etc etc.

Your also going to want to integrate them into a child theme to save them between updates, http://mysitemyway.com/docs/index.php/Using_Child_Themes.

Posted 3 months ago #
avatar12
Member

Elliott,

My confusion remains... how do I do this? "you would just need to insert them into the template files, header.php, single.php, page.php, footer.php, etc etc."

There is no HTML in those files. Just function calls.

So, in single.php... How would I insert a new DIV container between the 'post_meta' DIV and the 'entry' DIV?

Or, in home.php... How would I wrap the 'post' DIV in another DIV container? Let's say I want the posts to sit inside another box, which I would then style via css. Where do I insert that code?

Posted 3 months ago #
Webtreats
Support
Hi avatar12,

Lets take it back to something easy as you suggested in your first post.

To wrap <div id="header"> in <div id="header-container">

Open up the following file wp-content/themes/awake/header.php

Replace line #30 - 36
```
?><div id="header">
		<div id="header_inner">

		<?php mysite_header(); 

		?></div>
	</div>
```
With this code:
```
?><div id="header-container">
	<div id="header">
		<div id="header_inner">

		<?php mysite_header(); 

		?></div>
	</div>
</div>
```
Alternatively you could use the following code so you wouldn't have to edit any core files:
```
add_action( 'mysite_before_header', create_function('','echo "<div id=\"header-container\">";') );
add_action( 'mysite_after_header', create_function('','echo "</div>";'), 1 );
```
You could add the code below after line # 21 in your wp-content/themes/awake/functions.php file or better yet add it into the functions.php of a child theme:

http://mysitemyway.com/docs/index.php/Using_Child_Themes

If you could be very specific with your questions like you were in your first post we'll try to help you out with your questions one by one.
Posted 3 months ago #
avatar12
Member

Thanks Webtreats.

Here is a specific question...

How do I wrap the "post" div on the home page (when displaying blog posts) in another div?

Right now you have the code DIV ID="post-(post number)"

I need those "posts" to be wrapped inside another div. Let's call it "boxmain"

I only want this to happen on the home page (and paginated there after)... not in archives or search, etc.

Posted 3 months ago #
Webtreats
Support

Hi avatar12,

Open up the following file on your server wp-content/themes/awake/loop.php

And replace line # 24 :

?><div id="post-<?php the_ID(); ?>" <?php post_class( $layout['post_class'] ); ?>><?php endif;

With this :

?><?php if( is_front_page() ) { ?><div class="boxmain"><?php } ?><div id="post-<?php the_ID(); ?>" <?php post_class( $layout['post_class'] ); ?>><?php endif;

Then replace line # 42 :

?></div><?php endif;

With this :

?><?php if( is_front_page() ) { ?></div><?php } ?></div><?php endif;

If you're using a child theme just copy loop.php into your child theme's main directory then make the above changes.

Let me know if this works for you.

Posted 3 months ago #