I am brand new to WordPress and desperately need help. I have read through several forums and watched many video tutorials but for some reason am having a total nightmare trying to integrate WordPress as a CMS to an existing site.
I know HTML & CSS pretty well but not PHP. I have installed WordPress to a sub directory of the site so I can fiddle around with it while the site is still live (and untouched) without WP.
I have created different page templates from my existing HTML pages and the content is displaying but no images nor styling. The links aren’t happening for me either. All links were document relative so they should be working, for some reason two images are showing but nothing else. I got this far by following a video tutorial on You Tube;
I know I’ve done something major wrong but I don’t know what. I know there is heaps of help out there for this kind of thing but everything I find and read seems to be above my head. Even beginners posts start about 10 steps ahead of me…
ANY help advice much apprecited, I really need your help,
I’ve taken a look at your files. The problem is as I described above. You have pasted the code for your static HTML into pages in your WordPress theme.
To properly create a static page in WordPress, you’d insert the content for a given page into the page you have created in the WordPress admin panel rather than directly into your file. The goal here is to basically separate code from content where the content goes into the pages/posts you create in your WP admin panel and the code goes into your WordPress’ theme templates (e.g. about.php).
Right now, all your content is directly pasted into your volunteer.php template.
What you’d need to do is read up on how the templating system works in WordPress as you’ll be lost otherwise.
When you’ve got that, go to the volunteer page and click on it. Normally you would add your content into the form fields you see there such as the textarea field and the fields below that.
Make sure that you head on over to the right side panel in your post panel (the one that says “Page Attributes”), go to the Template select field and select the volunteer template that you’ve created earlier.
The big textarea field you see in the main column is where you normally add your main content. On the right of it, you have two tabs (Visual and HTML). Choose the HTML tab and insert your HTML code into the textarea field.
This textarea field is then called via WordPress’ function the_content(); which should be in your volunteer template.
<div id=“content”>
<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
<?php the_content(); ?><!-- display the content you added into the textarea field will display here –>
<?php endwhile; ?>
</div>
Ok, then please open the header.php file and post its code.
Before you edited the twentyten theme, it should have looked something like this:
<?php
/**
* The Header for our theme.
*
* Displays all of the <head> section and everything up till <div id="main">
*
* @package WordPress
* @subpackage Twenty_Ten
* @since Twenty Ten 1.0
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php
/*
* Print the <title> tag based on what is being viewed.
*/
global $page, $paged;
wp_title( '|', true, 'right' );
// Add the blog name.
bloginfo( 'name' );
// Add the blog description for the home/front page.
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) )
echo " | $site_description";
// Add a page number if necessary:
if ( $paged >= 2 || $page >= 2 )
echo ' | ' . sprintf( __( 'Page %s', 'twentyten' ), max( $paged, $page ) );
?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php
/* We add some JavaScript to pages with the comment form
* to support sites with threaded comments (when in use).
*/
if ( is_singular() && get_option( 'thread_comments' ) )
wp_enqueue_script( 'comment-reply' );
/* Always have wp_head() just before the closing </head>
* tag of your theme, or you will break many plugins, which
* generally use this hook to add elements to <head> such
* as styles, scripts, and meta tags.
*/
wp_head();
?>
</head>
<body <?php body_class(); ?>>
<div id="wrapper" class="hfeed">
<div id="header">
<div id="masthead">
<div id="branding" role="banner">
<?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
<<?php echo $heading_tag; ?> id="site-title">
<span>
<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
</span>
</<?php echo $heading_tag; ?>>
<div id="site-description"><?php bloginfo( 'description' ); ?></div>
<?php
// Check if this is a post or page, if it has a thumbnail, and if it's a big one
if ( is_singular() &&
has_post_thumbnail( $post->ID ) &&
( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) &&
$image[1] >= HEADER_IMAGE_WIDTH ) :
// Houston, we have a new header image!
echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
else : ?>
<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
<?php endif; ?>
</div><!-- #branding -->
<div id="access" role="navigation">
<?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
<div class="skip-link screen-reader-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentyten' ); ?>"><?php _e( 'Skip to content', 'twentyten' ); ?></a></div>
<?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
</div><!-- #access -->
</div><!-- #masthead -->
</div><!-- #header -->
<div id="main">
You need to include your header.php in all page templates you create.
So, a custom page template you created should have something like this at the very top:
And always call the following two files in each page template you create:
header.php
footer.php
The header contains the top part of your template, so your head and everything contained within them, like your stylesheets, rss links, meta, and so on. If you just copy and paste your original code into the page templates, then nothing will happen because you’re not referencing WordPress’ functions or calling the header.php in any way.
The footer contains everything you’d like to display at the bottom on every page.
Print the <title> tag based on what is being viewed.
*/
global $page, $paged;
wp_title( ‘|’, true, ‘right’ );
// Add the blog name.
bloginfo( ‘name’ );
// Add the blog description for the home/front page.
$site_description = get_bloginfo( ‘description’, ‘display’ );
if ( $site_description && ( is_home() || is_front_page() ) )
echo " | $site_description";
// Add a page number if necessary:
if ( $paged >= 2 || $page >= 2 )
echo ’ | ’ . sprintf( __( ‘Page %s’, ‘twentyten’ ), max( $paged, $page ) );
?></title>
<link rel=“profile” href=“http://gmpg.org/xfn/11” />
<link rel=“stylesheet” type=“text/css” media=“all” href=“<?php bloginfo( ‘stylesheet_url’ ); ?>” />
<link rel=“pingback” href=“<?php bloginfo( ‘pingback_url’ ); ?>” />
<?php
/* We add some JavaScript to pages with the comment form
to support sites with threaded comments (when in use).
*/
if ( is_singular() && get_option( ‘thread_comments’ ) )
wp_enqueue_script( ‘comment-reply’ );
/* Always have wp_head() just before the closing </head>
tag of your theme, or you will break many plugins, which
generally use this hook to add elements to <head> such
as styles, scripts, and meta tags.
*/
wp_head();
?>
</head>
<?php
// Check if this is a post or page, if it has a thumbnail, and if it's a big one
if ( is_singular() &&
has_post_thumbnail( $post->ID ) &&
( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) &&
$image[1] >= HEADER_IMAGE_WIDTH ) :
// Houston, we have a new header image!
echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
else : ?>
<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
<?php endif; ?>
</div><!-- #branding -->
<div id="access" role="navigation">
<?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
<div class="skip-link screen-reader-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentyten' ); ?>"><?php _e( 'Skip to content', 'twentyten' ); ?></a></div>
<?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
</div><!-- #access -->
</div><!-- #masthead -->
</div><!-- #header -->
<div id="main">
I’m not sure where to begin, but you need to start from scratch as one of the purposes of using a CMS is so that you do not have to create single, static files anymore. Everything is centralised.
Do you intend on running both, the static pages and the blog on WordPress? Given that you installed WordPress in a blog, I’m slightly confused because above you mentioned that you’d like to get your site intergated into WordPress, so that would mean static site + blog. Is that correct?
First things first: Is WordPress correctly installed?
If I were to uninstall it and start again, how would I go about add WP as a CMS to www.tirc.ie? It might be easier to go about it all over again rather than trying to fix what it is like now…
I installed WP to the server in a folder named blog in the root directory. I did this using a service offered by my hosting account, a one click install.
I followed that You Tube video then and saved my html pages as php pages with the php at the start of each page creating a template for each one.
Yup, it is correctly installed, I can log into my admin, this is where I added pages. The only reason I have it in a directory called blog is so I wouldn’t mess up the original site while I was trying to figure it out. Should I have uploaded the WP files to the root directory in order to use it as a cms?
What I would like is to have certain pages (and parts of pages) easily editable for those who are not familiar with websites at all.