Threaded Mode | Linear Mode

didou038 · 2012-04-04 20:36:18 1

Hi All !

I've got again a question about template.

I want to create a template containing multiple pages in "div". That's a very basic template site but nice for a showcase site.

an example :

Code:

<body>

        <!-- Home -->

        <div id="home" class="content">

            <h2>Home</h2>

            <pSome Content</p>

        </div>

        <!-- /Home -->

        <!-- Portfolio -->

        <div id="portfolio" class="panel">

            <div class="content">

                <h2>Portfolio</h2>

                <p>Some really nice portfolio shots:</p>

                <ul id="works">

                    <li><a href="#"><img src="./images/portfolio_01.jpeg" width="250"></a></li>

                    <li><a href="#"><img src="./images/portfolio_02.jpeg" width="250"></a></li>

                    <li><a href="#"><img src="./images/portfolio_03.jpeg" width="250"></a></li>

                </ul>

                <p class="footnote">Shots by <a href="#">...</a>.</p>

            </div>

        </div>

        <!-- /Portfolio -->

        <!-- About -->

        <div id="about" class="panel">

            <div class="content">

                <h2>About</h2>

                <p>Some content about us</p>

            </div>

        </div>

        <!-- /About -->

        <!-- Contact -->

        <div id="contact" class="panel">

            <div class="content">

                <h2>Contact</h2>

                <p>The contact form :</p>

                <form id="form">

                    <p><label>Your Name</label><input type="text" /></p>

                    <p><label>Your Email</label><input type="text" /></p>

                    <p><label>Your Message</label><textarea></textarea></p>

                </form>

            </div>

        </div>

        <!-- /Contact -->

        <!-- Header with Navigation -->

        <div id="header">

            <img href="./images/logo.png">

            <ul id="navigation">

                <li><a id="link-home" href="#home">Home</a></li>

                <li><a id="link-portfolio" href="#portfolio">Portfolio</a></li>

                <li><a id="link-about" href="#about">About Me</a></li>

                <li><a id="link-contact" href="#contact">Contact</a></li>

            </ul>

        </div>

My problem is, I don't know how to include differents pages in the template. Perhaps it's too difficult and the best way to do it is to create only one page with the content of each page and fix the menu directly in the WYSIWYG editor or in the template page.

You can see what the result would be there :
http://tympanus.net/Tutorials/CSS3PageTr....html#home (demo3)

I prefer to make a full dynamic template with GS function but I need help. I am able to imagine what to do but I can not transcribe it.

Thanks for your help !

***n00dles101*** · 2012-04-04 20:41:54 2

The way I would usually do it is create all the parts of your page as subpages of index.

index
--homecontent
--aboutcontent
--portfoliocontent

Edit these pages as normal, set the to private so they don't show on the menu etc...

Then to include them in your template just use

Code:

<!-- About -->

        <div id="about" class="panel">

            <div class="content">

                <h2><?php getPageField('aboutcontent','title');?></h2>

                <?php getPageContent('aboutcontent'); ?>

            </div>

        </div>

        <!-- /About -->

didou038 · 2012-04-04 21:00:49 3

Thank you Noodles I try it !

In The Wiki I saw the function Get_Page_Content but it's wrote :
"Echos the page's content. No options."
So, and i'm faulty, I don't tried , with the page name in option.

Thanks !

***n00dles101*** · 2012-04-04 21:26:06 4

This is a new function in 3.1 which allows you to specify a page slug and get any field including the content.

didou038 · 2012-04-05 23:53:23 5

I think my template is finished, you can watch it here :
www.artisan-online.fr
The main problem is to include I18N Gallery because this plugin is getting the url with slug (like mysite.com/index.php?id=portfolio and not in my case mysite.com/#portfolio) I resolved it by using the plugin fancybox.
Same thing with share3+/5+ plugin so I add directly share button in the template.

Yes, it's DIY. But that is suitable for my use where my page content will not change.

What do you think about it ?

special thanks to n00dles101 Wink

I can share it if someone like it Wink

eatons · 2012-04-06 01:16:53 6

didou038 wrote:I think my template is finished, you can watch it here :
www.artisan-online.fr
The main problem is to include I18N Gallery because this plugin is getting the url with slug (like mysite.com/index.php?id=portfolio and not in my case mysite.com/#portfolio) I resolved it by using the plugin fancybox.
Same thing with share3+/5+ plugin so I add directly share button in the template.

Yes, it's DIY. But that is suitable for my use where my page content will not change.

What do you think about it ?

special thanks to n00dles101

Quote:I can share it if someone like it

i for one, hope you turn it into a theme!! Good job!!

didou038 · 2012-04-06 01:47:45 7

I do it tonight with a special topic to explain how it works.
I'll try to do my best to support it.

didou038 · 2012-04-06 09:14:08 8

Hi !

As (or since ???) this theme is not compatible with a lot of plugin, I will not add it in the "extend".

If I were sure I can provide support I would have done, but now I have a lot of personal stresses.

I therefore prefer to provide the "zip" here, and if people feel able to and want to advance this issue so they do not hesitate!

My theme is not compatible with the following plugins:
I18N Gallery
Share (3/5)
P01-contact
Against it is perfectly compatible with the plugin "fancybox" instead to "I18N Gallery".

I'll do my best to help (especially with my knowledge of beginners).

If some of you working on the theme, do not hesitate to inform us of your progress or problems. We can then offer a final version to this theme. I hope anyway.

I am a little tired, and google help me a lot to write this message (that I read!).

(probably, I must create a specific topic in theme section ?)

PS : the theme in the zip file include my logo, a lot of social icone etc, this is in production theme for my website)

PSS: This theme is not perfect ... like me Wink

didou038 · 2012-04-06 18:40:05 9

I forgot to explain how to do ! so ...

Create all the parts of your page as subpages of index. (n00dles101 method)

index
--homecontent
--aboutcontent
--portfoliocontent

[list=*]
[*]Edit these pages as normal[/*]
[*]Add them to the menu[/*]
[*]Select the position you wish[/*]
[*]DO NOT set to private.[/*]
[/list]
You can set to private all page that you won't to display in the menu. The function my_get_navigation in theme is there to create the menu.

Then to include them in your template just use (replace "about" by your "ID") / (i'm working on getPageContent implementation that will generate automaticly the content.

Code:

<!-- About -->

        <div id="about" class="panel">

            <div class="content">

                <h2><?php getPageField('aboutcontent','title');?></h2>

                <?php getPageContent('aboutcontent'); ?>

            </div>

        </div>

        <!-- /About -->

edit :

New version ! (I think in few days I will be able to purpose you a final version ^^)

Function.php :
add my_GetPageContent function
--> you have to put in parameter : the page (like getpagecontent) and the type
------> the type is the class of the div : "content" or "panel". Only the first page must be "content" type and other must be "panel" type.
example :

Code:

<!-- Home -->

            <?php my_getPageContent('home','content'); ?>

        <!-- /Home -->

        <!-- Portfolio -->

            <?php my_getPageContent('portfolio','panel'); ?>

        <!-- /Portfolio -->

        <!-- offers -->

            <?php my_getPageContent('offers','panel'); ?>

        <!-- /offers -->

template.php :
Just need to add <?php my_getPageContent('my-slug-page','content-or-panel'); ?> in the body for each slug page you wish to display.

If you want to add a personnal content directly in the template you have to add this code :
in template.php (replace your-id-content by your own id)

Code:

<div id="your-id-content" class="panel">

            <div class="content">

                <!--Your content, component code etc -->

            </div>

        </div>

in style.css (replace every 'index' by your-id-content you define in template.php) that's permit to display correctly the link in the menu:

Code:

#index:target ~ #header #navigation #link-index{ background: #000; color: #fff; opacity:0.9;}

I hope my development is good.

didou038 · 2012-04-07 03:34:41 10

I'm searching the way to get the content of all page available in the menu.
With this "solution", final user has just to add personnal component like sidebar in the template.
He will not need to add the "getPageContent" for each new page created.

Currently, I try to implement the "getPageContent" function by mixing with the "get-navigation" function. I don't know if I'm on the good way (This does not work yet.).

If someone has an idea I'm interested.

***n00dles101*** · 2012-04-07 04:38:56 11

Why not use getChildren to get all the child pages of your index page and output them ...

sample code here....

Code:

$pages=getChildren('news');

    $mypageArray=array();

    foreach ($pages as $page){

        $mypageArray[(string)$page]['menuOrder']=returnPageField($page,'submenuorder');

        $mypageArray[(string)$page]['url']=returnPageField($page,'slug');

    }

    $pages= sort2d($mypageArray,'menuOrder','desc', FALSE);

    foreach ($pages as $page){

        $output=returnPageField($page['url'],'content');

        // you can use returnPageContent if your not going to need any other fields... 

        // echo your output in DIVs or whatever here...

    }

edit:

I use sort2d in my code for sorting arrays:

here's the code

Code:

function sort2d ($array, $index, $order='asc', $natsort=FALSE, $case_sensitive=FALSE)  

    { 

        if(is_array($array) && count($array)>0)  

        { 

           foreach(array_keys($array) as $key)  

               $temp[$key]=$array[$key][$index]; 

               if(!$natsort)  

                   ($order=='asc')? asort($temp) : arsort($temp); 

              else  

              { 

                 ($case_sensitive)? natsort($temp) : natcasesort($temp); 

                 if($order!='asc')  

                     $temp=array_reverse($temp,TRUE); 

           } 

           foreach(array_keys($temp) as $key)  

               (is_numeric($key))? $sorted[]=$array[$key] : $sorted[$key]=$array[$key]; 

           return $sorted; 

      } 

      return $array; 

    }

didou038 · 2012-04-07 07:13:25 12

n00dles101,

By searching the WIKI, the definition of the "GetChildren" I arrived on the "config: caching". I discover features! What was I thinking? Why I switched besides that?

Anyway ... THANK YOU!

I managed to implement the "getpagecontent" the way I wanted except for one detail:
When I used your code, I did not differentiate on the "menuOrder". So I'm going directly into my XML files. Surprise! Only the "home" has this field, it does not appear in the other pages!

To make this work so I had to improvise, here is my code:

Code:

$pages=getChildren('index');

    $mypageArray=array();

    foreach ($pages as $page){

        $mypageArray[(string)$page]['menuOrder']=returnPageField($page,'submenuorder');

        $mypageArray[(string)$page]['url']=returnPageField($page,'slug');

    }

    $pages= sort2d($mypageArray,'menuOrder','desc', FALSE);

    foreach ($pages as $page){

        $content=returnPageContent($page['url']);

        // you can use returnPageContent if your not going to need any other fields... 

       if ($page['url']=='home'){

            echo '<div id="'.$page['url'].'"';

            echo ' class="content">';

            echo '<h1>'.$page['title'].'</h1>';

            echo $content;

            echo '</div>';

        }else{

            echo '<div id="'.$page['url'].'"';

            echo ' class="panel">';

            echo '<div class="content">';

            echo '<h1>'.$page['title'].'</h1>';

            echo $content;

            echo '</div></div>';

        }

        // echo your output in DIVs or whatever here...

    }

So I set up a condition in order to have the main page (here "home") with the class "content" and other pages with the class "panel". This works, but if main page isn't named "home" it doesn't work!

The interest of field "menuOrder" is precisely to differentiate the pages as normally the main page will be in first position.

I don't understand why I didn't enter anything in all my pages (only in "home" XML, menuOrder set to 0)?!

didou038 · 2012-04-07 07:32:43 13

I fix the problem !!!

I disactivate I18N plugin and all works fine !

EDIT : problem not fixed ... but priority is ok for menu

EDIT : I have to make a modification in your code :

replace :

Code:

$mypageArray[(string)$page]['menuOrder']=returnPageField($page,'submenuorder');

by :

Code:

$mypageArray[(string)$page]['menuOrder']=returnPageField($page,'menuOrder');

Thanks !

didou038 · 2012-04-08 22:51:07 14

I use this topic to continue the development of this theme before sharing officially.

How it works :

Create your page and make it as child from index :
[Image: management.png]

Others pages must be private otherwise they will be displayed.

In template.php:

- the function menu_css() create the css style in <head> for the menu for each child page of index.
- the function my_getPageContent2 permit to display content of child page from index.
- the function my_get_navigation(return_page_slug()) create the menu on the left. It indexes the child pages of index.

each of this function are available in functions.php.

Be Careful, this theme isn't compatible with many plugin. I've only test this :

- I18N plugin (all) not compatible
- P01-Contact not compatible
- Share 3+/5+ not compatible

Probably not compatible :
- item manager
- any other ...

Compatible :
- DM Contactable
- fancybox plugin

Things to improve:
- Creating a page and not create a child page. The priority (for menu) of each page will determine the style of the page. Priority 1: style "content" other priorities: style "panel"
---> This will probably make the theme compatible with other plugin. Must try !
- Make the theme compatible with most plugin as possible.
- Make the css compatible with any browser.

For these improvements, I'm going to need help and time. That's why I prefer to keep this topic before sharing this theme officially.

All your tips are welcome!

didou038 · 2012-04-09 01:45:56 15

Quote:Things to improve:
- Creating a page and not create a child page. The priority (for menu) of each page will determine the style of the page. Priority 1: style "content" other priorities: style "panel"

I managed to change the "my_getpagecontent2" so that the pages, other than "index" aren't child pages of "index".

I still work on this implementation because the php code isn't at all optimized.

For those who are interested I joined the new function to this message. It will take a copy / paste in "functions.php".

didou038 · 2012-04-10 22:49:18 16

I stopped to develop this theme for many reasons :

- very complex to have keywords and meta description for each page
- too incompatibility with many plugins

I've modified this theme to make it much more compatible with all plugin. Now there's no content slide.
In the short time I will propose it to download with some settings options and a CSS optimized for P01contact plugin.

Threaded Mode \| Linear Mode Multiple page in template / Content Slider theme
Author	Message