How do I make certain areas editable?

Question

I'm new to wordpress and I'm currently converting an HTML/CSS site I made to wordpress to make it easier for my client to edit it from the admin panel.

I have provided 3 screenshots and I'll refer to them here.

The first screenshot shows how my website looks so far. It's using a template I made called homepage.php (see screenshot 3 for code). The template includes header.php which contains the logo, navigation menu etc. It has the image banner and finally includes footer.php. I want the "Our Values" part to be editable so that my client can change the text any time they need to.

Currently, they can edit the top part which says "PROtential Coaching" and that's because it's included on the page within the admin panel and not in the template. I want the bottom part including"Our Values" to be editable from that panel too, is there a way to do this or does this content have to be static and within the template? "Our Values" and "Our People" are in a dynamic secondary navigation menu which my client can add items to if they want to, however they can't change the content for the menu item.

Images:

Please help me out guys, I've been looking all over the place for days to get this done.

Answer 1

These links should help you: http://codex.wordpress.org/The_Loop

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

with this two techniks you can give your client the ability to change the content and the navigation. For these you have to edit your theme and insert the snippets on the placese you want to output your contents....

For the footer you can use a custom page maybe footer

    $loop = new WP_Query( 'pagename=footer' );
    while ( $loop->have_posts() ) : $loop->the_post();
        the_content(); 
    endwhile;

Answer 2

I would recommend installing the Advanced Custom Fields plugin

in order to achieve the desired functionality. Once you download it, create a few fields. For example, create a field called "footer_text" and print it like this:

<?php the_field('footer_text'); ?>

and so on with the rest of the fields.

Answer 3

I would probably do it this way,

1. Add footer.php to your list of theme files, and copy your footer code there.
2. Call get_footer in the similar way you call get_header in the code
3. Widgetize your theme, what you have to do here is essentially create a Sidebar area in the footer to contain "Our Values" text.
4. Finally in the WP-Admin, Go to Appearance->Widgets, Drag a Text widget to your sidebar area defined in the above step and Fill in the content there. So when ever you want to edit the bottom part you go to Appearance->Widgets and edit your widget, making your footer content dynamic.

Answer 4

WordPress now has a native theme options system in place for you to work with, the Customizer. Read more about it at https://wordpress.com/support/customizer/.

You don't need to add any additional plugins to make this work, just write the code and drop it into your theme.