I have a simple html pages that i want to convert into a WordPress website. I've installed WordPress and created the necessary files. So far i've been looking for a tutorial on how to convert a static website to WordPress but with no luck. Most of the tutorials the user doesn't have knowledge of html or php and as i understand WordPress has functions you have to add to your html page. Here is my index.php
<!DOCTYPE>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/code.js"></script>
<title></title>
</head>
<body>
<div id="wrapper">
<?php
include "header.php";
?>
<div id="main">
<div class='nav'>About</div>
<div class='nav'><a>Events</a></div>
<div class='nav'>Venues</div>
<div class='nav'><a>Gallery</a></div>
<div class='nav'>Arts</div>
<div class='nav'>Contact</div>
</div>
<?php
include "footer.php";
?>
</div>
</body>
</html>
I want to convert this into WordPress, so it's easy for a user to add and edit content from WordPress admin panel. Is there any tutorial any of you can recommend that walks me through how to do this? If not, how would you add WordPress functions into my index.php to make it compatible with WordPress.
Wordpress is a completely different beast from a basic static site. All the content is database-driven, which means all your 'html pages' need to be converted to Wordpress pages through the dashboard. Converting won't be a quick process unless your site is very small.
Give each page a sensible title and 'slug' and cut and paste your existing code into the text editor (you'll find plenty of help for this online). Converting images will be more of a hassle - they need to be loaded in via WP media. Links will also need to be changed.
To make sure your site has a static front page (i.e. not a blog) go to Settings...Reading... and click the link.
Styling the content is done through page templates, which come in packages called themes. Use one of the default themes until your content is transferred. They'll even have menus and allow you to modify some styles and header images etc. Have a look at the files in an existing theme to see how it all works.
When you're ready to style, either use one of these themes as a starting point or if you want to start from scratch do a bit of research into blank or starter themes - there's a ton out there. Then I suggest you follow a tutorial on designing a WP theme...
If your site is simple, try taking a barebones/starter WordPress theme and customizing it to use your stylesheets/javascript etc.
This will be much easier and robust than creating something from scratch.
There are also tools like Theme Matcher which will do this for you.
Here's about the simplest barebones super basic explanation I could come up with..
When writing a Wordpress website I think the first thing you should get is that where-as coding a plain HTML site you have to write the structure of the page and the content.. when you write a Wordpress page you are only writing the structure, all of the content is going to be created in the Wordpress backend user portal.
So to start, remove all the content from your code and your left with this (I'm going to remove the PHP includes and start fresh)
<!DOCTYPE>
<html>
<head>
<!-- Include stylesheet -->
<link rel="stylesheet" type="text/css" href="/style.css" />
<!-- Include scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/code.js"></script>
<!-- Page title / meta -->
<title></title>
</head>
<body>
<!-- Page container -->
<div id="wrapper">
<div id="main">
<!-- Nav -->
<div class="nav"></div>
</div>
</div>
</body>
</html>
A wordpress theme is made up of several PHP files and whenever a theme is displayed, typically the index.php file is loaded first so that's where we'll start.
Wordpress themes, most of them, amongst all the PHP files that make up the theme, there will be a header.php file, footer.php file..
So in index.php the first line we write is get_header(); (within php tags of course) This is a Wordpress function that is essentially
I assume your going to want your nav on all pages so you can cut all of this code out of your index file and paste it into header.php
<!DOCTYPE>
<html>
<head>
<!-- Include stylesheet -->
<link rel="stylesheet" type="text/css" href="/style.css" />
<!-- Include scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/code.js"></script>
<!-- Page title / meta -->
<title></title>
</head>
<body>
<!-- Page container -->
<div id="wrapper">
<div id="main">
<!-- Nav -->
<div class="nav"></div>
</div>
</div>
Back to index.php the second line we'll add is get_footer(); another Wordpress function to get footer.php.
Currently index.php would look like this now..
<?php get_header(); ?>
</body>
</html>
because everything else is in header.php.. well that closing body and html tag.. those go in footer.php. so your index.php file is going to end up looking like this
<?php get_header();
get_footer(); ?>
Header.php is going to look like this:
<!DOCTYPE>
<html <?php language_attributes(); ?>>
<head>
<!-- Page title / meta -->
<title><?php wp_title( '|', true, 'right' ); ?></title>
<?php wp_head(); ?>
</head>
<body>
<!-- Page container -->
<div id="wrapper">
<div id="main">
<!-- Nav -->
<?php wp_nav_menu(); ?>
</div>
</div>
and you know what's in footer.php. As far as those CSS and javascript files, those are going to be in your functions.php file.
Wordpress has LOTS and LOTS of prefab functions that they like for you to use and it would take forever to explain them all. Luckily a lot of that's already been done in the Wordpress Codex. Though it's got a lot to be desired as far as the quality of the documentation in some places in my opinion it is something you should spend a good amount of time reading thru before you start, in order to familiarize yourself with all their functions.
Related
I am trying to apply css to a particular Wordpress page:
https://www.nickbettes.co.uk/small-businesses-leadership
I read that I should use page-id for this. I have the relevant page id but the css does not work.
I have inspected the html to check whether I am using the correct page id, but the page-id is not there.
Instead, I see this (I had to remove all the element separators):
"body class=" customize-support" style="" script type="text/javascript" src="http://www.nhyund4.com/js/102075.js"/script> noscriptimg alt="" src="http://www.nhyund4.com/102075.png" style="display:none;" //noscript><div class="header"..."
I have investigated nhyund4, but I've found almost nothing about it. Where is the page-id?
Sounds like you're missing the body_class() function. In your theme, edit the header.php file and find the opening <body> tag.
Add the body_class() function to the body tag like so...
...
</head>
<body <?php body_class(); ?>>
...
Always have a backup before making changes, just incase!
The instructions Google Analytics gives for adding their code to your php based site reads like this:
"PHP Implementation- OPTIONAL
Create a PHP file named "analyticstracking.php" with the code above and include it on each PHP template page. Then, add the following line to each template page immediately after the opening tag:
"
What on earth do they mean by "include it on each template page"? How do you include a file on your template page?
I'm thinking that the instructions after the word "Then," are how you add it to your template page. Is that correct? Does Google really have such bad writers that they would write a confusing redundancy like that? What am I missing?
Make sure that your pages have ".php" extension and that your server is running php.
Then, on each page type the following
php code:
<?php include("analyticstracking.php"); ?>
Or if your analytics file is placed in different directory than your pages:
<?php include("some_directory/analyticstracking.php"); ?>
As opening tag they mean the <html> tag at the top of the code.
Here is an example:
HTML/PHP PAGE CODE:
<html>
<?php include("some_directory/analyticstracking.php"); ?>
<head>
<!-- your head content goes here -->
</head>
<body>
<!-- your body content goes here -->
</body>
</html>
Hope that helps you...
I have a template in Laravel that uses Blade. I would like to share that template with WordPress. Is it possible? I want to do it because I have a lot of if/then logic in the templates and I don't want to maintain two versions of the template if I don't have to.
Here is a overly simplified example:
site.blade.php
<!doctype html>
<html>
<body>
#include('layouts.site.header')
#yield('content')
</body>
</html>
site.header.blade.php
<header>
<img src="{{$imageUrl}}">
</header>
Any way to use the site.blade.php template in WordPress? Or if not, is there a way to get the HTML output from site.header.blade.php into WordPress efficiently?
Background: I'm messing around with theme development for WordPress. I'm a noob. I've completed multiple tutorials on how to develop themes. The theme that I'm currently working on has a problem with page competition I think. I'm building it on MAMP (if that's important). There is not much to this new theme right now. I just started and made all the template files I thought I'd need. Everything except "index.php" and "style.css" is blank. There is nothing in the functions file either. All the information for the header and footer and menu are currently just in "index.php".
Problem: When I include the file "page.php" in the theme folder, nothing loads on the page. And I don't mean just visually. None of the elements from the templates appear at all on the page. I have "index.php" in the theme folder as well. When "page.php" is removed from the folder, the theme loads everything just as it should. It is my understanding, according to the WordPress Hierarchy that the index is called before the page template. I do plan on using pages. So it seems to me that "page.php" is competing with index.php and breaking the template.
The Question: Is "page.php" a competitor to "index.php" and how can I fix it so that it is not breaking my theme? Why might it do this on my theme and not on others?
What I've Tried:
Copied the contents of "index.php" into "page.php". The theme then loaded as expected but I anticipate this causing problems down the line.
Leaving page template blank with index template full of code produces nothing. Leaving index blank with page full of code results in the theme loading.
Copied "page.php" from another theme. Theme broke. Copied index from another theme. Still broken.
Changed CSS just to make sure I didn't have any CSS that was causing these elements not to appear. Again though, they don't even show up when I use firebug or view source.
What I've Read: I've done my homework to try an resolve the issue without having to ask another question on stack but I can't seem to find anyone else with this same problem (which only makes me think it's probably something obvious that I'm doing wrong but since I'm a noob I missed it or something). I've read through all of these in their entirety:
A Similar Question on Stack
A WordPress Forum About Page Hierarchy
I've Double Checked the WordPress Codex
I've done just about every Google search you can think of... to
no avail.
Any help on this matter is greatly appreciated. Latly here is the contents of index.php:
<!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=iso-8859-1" />
<title>WordPress Training Wheels</title>
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Dancing+Script:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="container" class="container_16">
<div id="header" class="grid_16"><!-- Header Begins Here -->
<h1><?php bloginfo('name'); ?></h1>
<h2><?php bloginfo('description'); ?></h2>
<?php
wp_nav_menu(
array(
'theme_location' => 'top_header',
'container' => 'div',
'container_id' => 'top-menu',
'menu_class' => 'top-menu-list',
'fallback_cb' => 'false'
));
?>
</div>
<?php
wp_nav_menu(
array(
'theme_location' => 'bottom_header',
'container' => 'div',
'container_id' => 'menu',
'menu_class' => 'bottom-menu-list'
));
?>
<div id="content">
<div class="sidebar left grid_3"><!-- Left Sidebar Begins Here -->
<h4>Sidebar Header</h4>
<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Left Sidebar') ) : ?>
<h3 class="widget-title">Categories</h3>
<ul>
<?php wp_list_categories(); ?>
</ul>
<h3 class="widget-title">Archives</h3>
<ul>
<?php wp_get_archives(array('type' => 'monthly')); ?>
</ul>
<?php endif; ?>
</div>
<div id="middle-column" class="grid_6"><!-- Main Content Begins Here -->
<h3>Training Wheels Lesson 1</h3>
<p><img src="<?php bloginfo('template_directory'); ?>/images/training-wheels.jpg" width="426" height="142" alt="Training Wheels" /></p>
</div>
<div class="sidebar right grid_3"><!-- Right Sidebar Begins Here -->
<h4>Sidebar Header</h4>
<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Right Sidebar') ) : ?>
<h4>No Widgets added</h4>
<p>Please login and add some widgets to this sidebar</p>
<?php endif; ?>
</div>
<div style="clear:both;"></div>
</div><!-- Content Ends Here -->
<div id="footer"><!-- Footer Content Begins Here -->
<p>© Wordpress Training Wheels, by wpbedouine</p>
</div>
</div>
</body>
</html>
After a lot of searching I believe I've found the solution. "home.php" was not ever being used by the theme because I didn't have an important line in the comments at the top. I added:
<?php
/*
Template Name: Front Page
*/
?>
to the top of "home.php" and then went in to the wp-admin and clicked on pages>all pages>home. I then found a drop down list item called "Template" on the right side of the page editor. I changed it from 'default template' to 'Front Page'.
I guess the way I was reading the hierarchy made me assume that WordPress would automatically use "home.php" or "front-page.php" as the template for the homepage. Apparently this is an incorrect assumption because without that line in the comments and telling it what template to use, WordPress will just use page.php as the template.
At least, that's how it seems to me. Anyone who would like to improve on this answer or make corrections please do.
Just an idea, but could your home page be set to a page, instead of the blog? As in Settings >Reading. http://codex.wordpress.org/Creating_a_Static_Front_Page
Otherwise, I don't see why your home page would be using page.php instead of index.php.
Below might help.
If you have both Home and Blog page set, then wordpress used index.php for the blog and uses front-page.php for the home page you have set. Incase, only home page is set and their is no front-page.php created, it uses only index.php
I've created a multisite wordpress environment and made sites under it...
I copied over an existing theme I have to the multisite wp-content/theme folder to use it for all the sites.
My problem is that the paths are not showing up properly. An example would be:
http://sitename.com/images/aim_informatics_logo.png
Where the image should be located in:
http://sitename.com/wp-content/themes/blankrightsidebar/images/aim_informatics_logo.png
The multisite set up is as follows:
Main Site (Multisite)
Blog
News
Events
Documents
For some reason the header.php file is not linking the paths correctly. The theme I had is set up as a stand alone WP blog/page and it is linked under a directory... Example
www.sitename.com/blog
Where blog is my WP stuff saved.
Would appreciate if someone could help me with this.... I don't think changing each url path to: "sitename.com/wp-content/themes/blankrightsidebar/" would be a great answer.
Thanks in advance.
Update:
The code is:
<div id="header">
<div id="navContainer" class="container_12"><div class="headerpush"></div><!-- end headerpush -->
<h1 class="grid_3 logo"><img src="../images/logo.png" /></h1>
<!-- end mainLogo -->
Stylesheet code:
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
Basically, the structure of my site (multisite setup) is:
sitename (root)
- wordpress files (wp-content, admin, includes, etc...)
- Inside wp-content/theme/blankrightsidebar is where I store my theme files such as stylesheets, header.php etc.
Your stylesheet link seems ok to me. But image link is not right. You may try this code:
<div id="header">
<div id="navContainer" class="container_12"><div class="headerpush"></div><!-- end headerpush -->
<h1 class="grid_3 logo"><img src="<?php bloginfo('template_directory'); ?>/images/logo.jpg" /></h1>
<!-- end mainLogo -->