converting existing web page into custom page in wordpress 3.01 WordPress
- SOLVED
I need to convert a page on a website that I created in php for a client into css.
I am familiar with wordpress version 2 up to but not including 3.
I have purchased the book "Wicked wordpress themes" which Allan Cole worked on.
I have read through it and have a good idea as to how things have changed I also have realized that I was not always using the previous versions of Wordpress correctly all the time for designs.
In the book "wicked wordpress themes" I have gone through complete the changes made in the book to the Thematic theme. I have had no problems at all.
However I am now lost as I do not want to try and convert the layout of http://www.topfruit.co.za/news.php.
It is a static page not a post as it looks like. The client has very limited knowledge and I need process of them changing the 3 posts of info to be standard repeats.
I am wanting to use the existing css and hopefully html where I can either add widgets or custom fields for the post areas.
I am however a bit lost as to how too do this. I have got a page to look exactly as the site version. I thought I would just use custom fields (magic fields). It works until I add the php to call the fields.
I am also thinking that I am going about it all wrong and that I should be creating widgets instead. The custom areas will need to be able to handle 10 lines of text in some areas, the images will also need to changed easily.
please view the code I have done on the child page theme I have created:
I am only at the stage of adding the first h2 custom field.
<?php
/*
Template name: news
*/
?>
<?php
// calling the header.php
get_header();
// action hook for placing content above #container
//thematic_abovecontainer();
?>
<!-- Beginning of left content -->
<div class="lft-cont">
<div class="head">
<div class="icon-head">
<img src="wp-content/themes/images/icons/tree-home-lft.gif" alt=""></div>
<div class="h1-tag">
<h1> News Flash</h1>
</div>
<!-- end of head -->
</div>
<div class="line-social"></div>
<div class="text-class">
<div class="news-pic">
<img src="wp-content/themes/images/news/farmer-grapes.jpg" alt=""></div>
<div class="news-txt">
<h2><?php echo get(‘giumarra-head’); ?></h2>
<p class="social-txt-2">TopFruit is proud to announce that it has been appointed by Grapa Ltd as the exclusive territorial agent of the ARRA varieties within South Africa and Namibia. A fifteen year long programme of careful grape variety selection and breeding by the Giumarra family in California has reached its commercial availability stage with the release of these varieties.</p>
<p class="social-txt-2"><a href="pdfs/GIUMARRA.pdf" title="Giumarra Breeding Programme" target="_blank"><span class="social-txt-2">Read more</span></a></p>
</div>
<div class="clear"></div>
<div class="line-social"></div>
<!-- end of text-class -->
</div>
<div class="text-class">
<div class="news-pic">
<img src="wp-content/themes/images/shareholder-companies/apple-africa.jpg" alt=""></div>
<div class="news-txt">
<h2>Pink Lady® News (July 2010)</h2>
<p class="social-txt-2">The 2010 South African Pink Lady® season has got off to a good start. There was a concern that the exceptionally hot and dry weather leading up to the harvest, was going to affect colour adversely. As it turned out, some cold nights did come to our rescue and with the judicious use of retain in some instances, a really “nice” crop has been produced.</p>
<p class="social-txt-2"><a href="pdfs/Pink Lady newsletter.pdf" title="Pink Lady newsletter" target="_blank"><span class="social-txt-2">Read more</span></a></p>
</div>
<div class="clear"></div>
<div class="line-social"></div>
<!-- end of text-class -->
</div>
<div class="text-class">
<div class="news-pic">
<img src="wp-content/themes/images/news/people-shot.jpg" alt=""></div>
<div class="news-txt">
<h2>KIKU® Kicks Off (May 2010)</h2>
<p class="social-txt-2">A breath of fresh air has blown into the South African apple world with the establishment of the South African KIKU® range. KIKU® partners in the southern and northern hemisphere will ensure that only apples conforming to specific internal and external quality standards will be packed and promoted under the trademark.</p>
<p class="social-txt-2"><a href="pdfs/Kiku Article.jpg" title="KIKU Kicks off" target="_blank"><span class="social-txt-2">Read more</span></a></p>
</div>
<!-- end of text-class -->
</div>
<!-- end of lft-content -->
</div>
<!-- Beginning of rt-content -->
<div class="rt-cont-news">
<div class="side-bar-nav">
<p class="side-b-nav">Click for more information</p>
<div class="link-side-nav">
<div class="icon-side-b">
<img src="wp-content/themes/images/icons/apple.gif" alt="varieties">
</div>
<div class="text-side-b">
<strong><a href="varieties.php">Varieties</a></strong></div>
<!-- end of link-side-nav -->
</div>
<div class="link-side-nav">
<div class="icon-side-b">
<img src="wp-content/themes/images/icons/flower.gif" alt="varieties">
</div>
<div class="text-side-b">
<strong><a href="news.php">News Flash</a></strong></div>
<!-- end of link-side-nav -->
</div>
<div class="link-side-nav">
<div class="icon-side-b">
<img src="wp-content/themes/images/icons/leaf.gif" alt="varieties">
</div>
<div class="text-side-b">
<strong><a href="healthier-enviroment.php">Environment</a></strong></div>
<!-- end of link-side-nav -->
</div>
<div id="clear"></div>
<!-- end of sidebar nav -->
</div>
<div class="new-rt-txt">
<div class="head-rt-news-txt"><h2>Top Stories</h2></div>
<a href="social-responsibility.php" title="Vegetable garden and soup kitchen">
<div class="news-rt-link">Vegetable garden and <br>soup kitchen (June 2010) </div>
<div class="news-rt-link-grey">Click for more info</div>
</a>
<a href="pdfs/Table Grape Newsletter Mei 2010.pdf" Title="Table Grape newsletter" target="_blank">
<div class="news-rt-link">Table grape newsletter<br>
(May 2010) </div>
<div class="news-rt-link-grey">Click for more info</div>
</a>
<a href="pdfs/Ironman 2010.pdf" title="Pink Lady Iron Man athletes" target="_blank">
<div class="news-rt-link">Pink Lady® sponsors <br>Iron Man athletes (April 2010)</div>
<div class="news-rt-link-grey">Click for more info</div>
</a>
<a href="pdfs/EarlySweet-4b Article Feb 2010.jpg" title="Eraly Sweet TM - the table grape on everyone's lips" target="_blank">
<div class="news-rt-link">Early Sweet TM – the table<br>grape on everyone’s lips <br>(February 2010) </div>
<div class="news-rt-link-grey">Click for more info</div>
</a>
<a href="pdfs/Angels walking.pdf" title="Angels Walking(TM)" target="_blank">
<div class="news-rt-link">Pink Lady(R) joins Angels <br>Walking(TM) in the fight <br>against breast cancer! <br>(November 2009)</div>
<div class="news-rt-link-grey">Click for more info</div>
</a>
<a href="social-responsibility.php" title="Streilization project">
<div class="news-rt-link">Sterilization project<br>
(August 2009) </div>
<div class="news-rt-link-grey">Click for more info</div>
</a>
<!-- end of news-rt-txt -->
</div>
<!-- end of rt-cont -->
</div>
<!-- end of content wrap -->
</div>
<div id="clear"></div>
<div class="line"></div>
<!-- end of wrapper -->
</div>
<?php
// calling the widget area 'page-top'
// get_sidebar('page-top');
the_post();
?>
<div id="post-<?php the_ID(); ?>" class="<?php thematic_post_class() ?>">
<?php
// creating the post header
// thematic_postheader();
?>
<div class="entry-content">
<?php
the_content();
wp_link_pages("\t\t\t\t\t<div class='page-link'>".__('Pages: ', 'thematic'), "</div>\n", 'number');
edit_post_link(__('Edit', 'thematic'),'<span class="edit-link">','</span>') ?>
</div>
</div><!-- .post -->
<?php
if ( get_post_custom_values('comments') )
//thematic_comments_template(); // Add a key/value of "comments" to enable comments on pages!
// calling the widget area 'page-bottom'
//get_sidebar('page-bottom');
?>
</div><!-- #content -->
</div><!-- #container -->
<?php
// action hook for placing content below #container
// thematic_belowcontainer();
// calling the standard sidebar
// thematic_sidebar();
// calling footer.php
get_footer();
?>
Could someone please advise me as to what I should be using to get the
post tile custom
body of the text below the title customizable
the image easily changed
the links in the sidebar easily changed.
Also if I have done anything wrong with the above code. I am sure I should be creating either widgets or using the custom fields differently.
I am a bit desperate as I am on a bit of a deadline.
When I quoted to do this I was finding working alongside "wicked wordpress themes" very easy. I was also confident having done a lot of wordpress sites in the lower versions very easily before.
I am a little paniced now and not thinking too clearly.
help please:)
Answers (1)
Michelle Dancer answers:
I'm in a bit of a rush so might be misunderstanding but from what I can see it seems you're trying to create a static page that LOOKS like dynamic news posts but isn't, meaning your client would actually need to edit code in the news page template to change anything?
It would be a much better approach to actually use WP posts (or pages, or custom content types, depending on the rest of your site structure) so that the client can just use the actual WP admin panel to change things. It may be a bit of a learning curve, but at least then they can't actually break the site by editing the wrong line of code.
If I've got the totally wrong end of the stick I apologise, if you want to change this to use posts or whatever I can help you with that :)
Mike Burton comments:
Thanks very much Michelle.
I have awarded you the money to help/ advise me. It does not let me pay you, It takes me to withdraw funds that I have earned.
I have contacted the site manager and hope to have a response soon.
This is the post I sent when awarding you the money incase you have not received it
Hi Michelle .
Thanks for your answer!
You did get it a little wrong. I dont think I have explained myself too well either. I am basically not sure if I should be using widgets of Custom fields to create the cms. I am using wordpress for the cms. I want the client to be able to edit the page text content and the images (in the fake post area).
I don't think I explained my self in the post too well earlier.
Basically if you think of using wordpress as a CMS rather than a blog. I am wanting to create a page that can be edited using the admin section of Wordpress. The rest of the site will remain as is using php. I update that side as it will hardly ever change. The client needs to be able to update the news page (they don't want a blog), every month the previous fake posts will have the heading body and image changed / updated. The old links will move to the sidebar below top stories. The sections with the icons in the sidebar cannot be editable as it is part of the websites navigation and cannot be messed with.
I need to be pointed in the correct direction as too what to use, custom fields or widgets for the cms. The post area when editing the static cms page I doubt will be used as it needs to edit the 3 fakes posts and the links in the sidebar. From the code above I have tried to include the first heading (h2) using a custom field I setup with the magic fields. It does not call it. I also did not set up the sidebar in the sidebar called in the usual way in wordpress, I have commented them out as I found the sidebar areas but they seem to be setup for widgets only, not the way I was expecting.
I have never used widgets before, but have a good book "Wicked wordpress themes" that shows me all of the steps for creating widgets Wordpress 3.01.which I have found easy. It also gives a work along tut using the thematic theme, handling all of the template files provided and creating child themes from it. It just didn't do anything similar to what I require. It handled using the post and creating areas below and above the post area, sidebar , footer ect.. It also does a little for pages & CMS and it was pritty simple. It does not go into having the 3 areas with heading like I require. Have a look at http://www.topfruit.co.za/news.php
I don't want the 3 text areas (fake posts) as posts unless that is the only way . I would be creating a child theme template for page.php probably calling it page-news.php .
The 3 text fields will always have the same field name or widget just the content of the field/widget will be edited, so there is no chance of my client adding a post by mistake. With my experience with 3.01 I cannot see a way of using the standard editing page provided for editing pages by wordpress to create 3 similar fake posts. If you look at the coding of the php website I have set up classes so they match one another. I can only think that I would have to either build a widget to drop into a widget area or to use custom fields.
If you look at the coding that I have done in my question, I think that I have missed the loop. In the earlier wordpress versions that I have used for CMS, I can always spot the loop. With the new 3.01 version I am totally lost. I just cannot find the loop in the thematic theme page.php, it only seems to call the posts and have widget areas setup. I am sure I need to create new widget ready areas. But don't have a clue if that is the correct way to go.
I think using the Thematic theme I would be able to create this from scratch as I can adapt what is done in the book too get the look but not sure. Using existing CSS and html I am totally lost.
I quoted for this on when the 2 .5 version was out and the client is not interested in a requote. I can't say no as they provide me with a stack of referals virtually every week. I am very familiar with that 2.5 and can spot the loop.
Do you know of a free template that is mainly built for wordpress to be used as a cms with a similar layout?
If you could please advise me as to the correct way to go about getting this to work in 3.01
Thanks very much for your help