Don't know how to make content fully editable and creating a menu for my pages

  • Resolved Bovah

    (@bovah)


    12 years ago

    Hi!

    Im currently helping out a friend with designing a website for him. I am as good as done with the design and want to use WordPress as a CMS. Now im trying for the first time making the design a working WordPress theme. This is also the first time I have ever dealt with PHP code, so im very unexperienced.

    Anyways, I have managed to get the site up and running as a WordPress theme. I know the code is a mess, especially the php. This is because it it’s my first attemt to get this to work correctly. Ive come this far by searching the web and trying, trying and trying.

    So basically there are two things I need help with.

    1. Adding a menu of the different pages Ive created in the black field (right to the logo).

    2. I can’t figure out how to make the bar to the right of the site content editable. I also don’t know how to make the picture of the man to the left of the content changeable.

    Link to the site

    And here is the code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?>
</title>
<link rel="stylesheet" href="<?PHP bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
		fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
		speed:  1500,
	    timeout: 5000
	});
});
</script>
<?PHP wp_head(); ?>
</head>

<body>
<div id="container">

<div id="top">

<div id="meny">
<div class="menybilder">

</div>
</div>

<div id="header">
<a href="index.html"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/header.png" /></a>
</div>

</div>

<div id="bla">
</div>
<div id="skugga_top">
<div class="slideshow">
		<img src="<?php bloginfo('stylesheet_directory'); ?>/images/bildspel.jpg"/>
		<img src="<?php bloginfo('stylesheet_directory'); ?>/images/bildspel2.jpg"/>
	</div>
    </div>

<div id="skugga">

<div id="bodycont">

<div id="blaunder">
</div>

<div id="body">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<div id="hogercont">
<div id="hogertop">
</div>

<div id="hogerbody">
<p class="hoger_p"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/rotavdrag.png" /></p>
<p class"hoger_p"><a  href="<?php the_permalink() ?>"><img class="hoger_img" src="<?php bloginfo('stylesheet_directory'); ?>/images/hitta_hit.png"></a>
<a class="link" href="<?php the_permalink() ?>">Hitta hit</a></p>
</div>

<div id="hogerbottom">
</div>

</div>

<h1><?php the_title(); ?><br />
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/underline.png" /></h1>
<img class="body_img" src="<?php bloginfo('stylesheet_directory'); ?>/images/portrait.jpg" />
<?php the_content('<p>Read more</p>'); ?>
</div>

<?php endwhile; endif; ?>

<div id="footer">
<p>Lundgren Bygg AB •  Sidan gjord av <a class="footerlink" href="http://www.blabla.se" TARGET="_blank">Test Test</a></p>
</div>

</div>

</div>

</div>

<?PHP wp_footer(); ?>

</body>
</html>

    And the CSS:

    /*
Theme Name: Lundgren Bygg
Theme URI: http://www.lundgrenbyggab.se
Description: Designen till Lundgren Bygg AB är skapad av ......
Author: ......
Author URI: .........
.
General comments/License Statement if any.
.
*/

@charset "UTF-8";
/* CSS Document */

body {
background-color:#fff;
margin:0;
background-image:url(images/bakgrund.png);
background-repeat:repeat-x;
background-color:#e0e0e0;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}

h1 {
color:#2d7da6;
font-size:20px;
}

.menybilder {
float:right;
margin-bottom:0px;
}

.hoger_p {
margin-bottom:20px;
}

.hoger_img {
margin-bottom:5px;
}

.body_img {
float:left;
margin-right:10px;
}

.bild_hoger {
float:right;
margin-left:10px;
}

.link {
color:#2d7da6;
text-decoration:none;
}

.footerlink {
color:#fff;
text-decoration:none;
}

a:hover.hitta_hit {
background-color:#2d7da6;
color:#fff;
}

a:link
{
color:#000;
text-decoration:none;
}

A[Disabled]:hover
{
text-decoration:none;
}

a:visited
{
COLOR:#2d7da6;
}

a:hover
{
color:#2d7da6;
}

#container {
width:950px;
height:auto;
margin:0 auto;
}

#skugga {
width:950px;
height:auto;
margin:0 auto;
background-image:url(images/skugga.png);
}

#top {
width:878px;
}

#header {
height:218px;
width:303px;
}

#bodycont {
width:800px;
margin:0 auto;
}

#menycont {
width:600px;
height:auto;
}

#meny {
margin-top:197px;
height:21px;
width:497px;
float:right;
background-color:#000;
}

#skugga_top {
width:950px;
height:auto;
background-image:url(images/skugga_top.png);
}

#bla {
width:800px;
height:7px;
background-color:#2d7da6;
margin:0 auto;
}

.slideshow { height: 231px; width: 800px; margin: auto }

#blaunder {
height:4px;
background-color:#2d7da6;
}

#body {
padding:15px;
width:770px;
height:auto;
background-color:#FFF;
min-height:500px;
}

#body_samarbetspartners {
padding:15px;
width:770px;
height:auto;
background-color:#FFF;
min-height:500px;
}

#hogertop {
height:16px;
background-image:url(images/hoger_top.png);
}

#hogerbottom {
height:16px;
background-image:url(images/hoger_bottom.png);
margin-top:0px;
}

#hogercont {
width:300px;
min-height:470px;
float:right;
background-color:#FFF;
margin-left:15px;
margin-top:35px;
margin-bottom:20px;
}

#hogerbody {
background-color:#e8e8e8;
min-height:428px;
text-align:center;
padding:10px;
margin-bottom:0px;
}

#hogercont_projektmeny {
width:220px;
min-height:100px;
float:right;
background-color:#FFF;
margin-left:15px;
margin-top:35px;
margin-bottom:20px;
}

#hogerbody_projektmeny {
background-color:#e8e8e8;
min-height:100px;
text-align:center;
padding:10px;
margin-bottom:0px;
}

#hogertop_projektmeny {
height:16px;
background-image:url(images/hoger_top_projektmeny.png);
}

#hogerbottom_projektmeny {
height:16px;
background-image:url(images/hoger_bottom_projektmeny.png);
margin-top:0px;
}

#kontakt {
padding:15px;
min-height:470px;
width:470px;
height:auto;
background-color:#FFF;
}

#hitta_hit {
width:300px;
min-height:470px;
padding:15px;
float:right;
background-color:#FFF;
}

.tel_mail {
color:#2d7da6;
}

#footer {
clear:both;
width:800px;
height:55px;
background-image:url(images/footer.png);
text-align:center;
padding-top:25px;
}

    Thanks in advance

Viewing 3 replies - 1 through 3 (of 3 total)
  • Jeff Sebring

    (@jeffsebring)

    12 years ago

    What you need to do is register the menu and sidebar from your functions.php, and display them in your template files.

    Look into these functions:

    Thread Starter Bovah

    (@bovah)

    12 years ago

    Hi Jeff!

    Thank you for your reply.

    I have been quite busy during this Easter and that is why I have not replied. I will take a look at all this immediately and will come back if I need further help.

    Thread Starter Bovah

    (@bovah)

    12 years ago

    I found my solution to this problem. Clearly speaking, I was looking for a way to show a page’s content in the sidebar.

    By using this line of code, I got it working.

    <?php
$about_page = get_page_by_title('Sidebar');
echo apply_filters('the_content',$about_page->post_content) ;
?>
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Don't know how to make content fully editable and creating a menu for my pages’ is closed to new replies.