HTML to Worpress
-
Simple question, but maybe not so simple answer.
I have a current HTML static page that I want to convert to WordPress.
It has somewhat of a template it works off of. This is the page: https://www.mountainhighorganics.com/
I would like to maintain the overall design. But here is the tricky part. I’d like to be able to edit the content in WordPress’s wysiwyg editor.
I looked at a lot of youtube tutorials which all show promise… but nothing with the wysiwyg part.
I looked at a few themes but there is just too much to look through to find one that matches.
Any thoughts?
-roy-
-
You dropped a closing DIV tag, which is why everything looks a bit jumbled. Try adding a closing DIV tag right after the closing DIV tag for divTopLinks; that will close off divBanner correctly, which I assume is in your header.php file.
How did you get the menus in?
There’s a function call that looks like this in the default header.php:
<?php wp_nav_menu( array( 'container' => 'nav', 'container_class' => 'menu-wrapper col7', 'container_id' => 'menu1-wrapper', 'menu_id' => 'menu1', 'menu_class' => 'cf menu', 'theme_location' => 'menu1', 'fallback_cb' => 'bfa_page_menu' ) ); ?>
If you took it out from header.php, just copy & paste this back inside the banner div.
What this function call does is write out the menu that you create by going to Appearance > Menus from the admin dashboard. Every time you create a new page, you’re going to go there to add a menu item for it.
wait…ok so maybe this isnt the right idea…
go where? to the code you posted? or the in appearance > menus?
i want to create a template so the end user [ whom has no coding skill at all ] can just go in and update content through the wordpress pages section, add pictures etc.
does that make sense?
i cant seem to find the right CSS code to fix the menus… i believe its using menu1
i’ve been up 2 nights straight and i just get this working…
how do you get the pages > content to show up in the page.php? thats where it should go correct?
Yes. What you shouldn’t do is replace the entire code in page.php, but just bits & pieces of it, because there are different function calls which will fill in parts of the page with the actual page content. There are also DIVs being defined that will make it easier to style certain portions of the page using CSS. In general, it’s best to leave as much as the original structure in there as possible, and just take out the small bits that you don’t need. The same goes with the other template files (header.php & footer.php).
Take a look at this pastebin of the header.php that I used for my sample page. I’ve highlighted in yellow the lines that I copied from the original site; all of the other code is from the original header.php file. I took out some of the code that wasn’t pertinent, like the code which displays comments (since I don’t think you are going to allow comments on any of your pages) or the code which outputs navigation links for pages which span multiple screens, but most of the default code is left intact.
Line 15 has a function call which displays the title of the page.
Line 19 is a function call which displays the contents of the page.
Line 22 is a function call which will display a link that allows a user to edit the page if they are logged in and have a high enough user role. Otherwise nothing gets displayed.
One other detail I should mention. Since you will have a static page (instead of a blog page) for the front page, once you have your page.php file the way you want it, you need to make a copy of it and call it front-page.php. To make a copy of a template, go to Montezuma Options > Main Templates > + Add main template, give it the name front-page, and select page.php from the drop-down list. So your front page (i.e., the home page) will use the front-page.php template, while all of the other pages will use the page.php template.
Editing another theme isn’t necessary. You could just change your index.html to index.php and add the loop.
IDK. If you edit a premade theme, there will be so much unused code.
Plus, you’re having to write more CSS to hack the theme to look how you want, you’ve already written the HTML and CSS, so just throw in the little bits of php that WordPress can use.
You could just change your index.html to index.php and add the loop.
Yeah, good luck with that.
ok another question… what is the difference between index.php and page.php? in my situation will they be same?
i kinda got really confused with montezuma. and switched to a simpler theme, Blankslate.
@crouchingbruin really appreciate the depth you went to help me…still struggling a bit… i understand the concept, just the middle section, nav and css is got me…
i created all the pages needed and pasted the html code in the content section.
Ah, BlankSlate, I forgot all about that theme. Yes, that’s probably ideal for you since it’s totally blank and you already have your own HTML & CSS.
index.php is used to display a blog page. So the loop will output multiple post entries on the page. You don’t have a blog, so you won’t have to worry about it.
page.php is used to display a page.
Here is a list of the WordPress template files.
@crouchingbruin i’m trying to adapt what you did in montezuma, but getting a bit lost…
For Blankslate:
header.php >
What was already there:
<!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <meta name="viewport" content="width=device-width" /> <title><?php wp_title( ' | ', true, 'right' ); ?></title> <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>" /> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <div id="wrapper" class="hfeed"> <header id="header" role="banner"> <section id="branding"> <div id="site-title"><?php if ( ! is_singular() ) { echo '<h1>'; } ?><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php esc_attr_e( get_bloginfo( 'name' ), 'blankslate' ); ?>" rel="home"><?php echo esc_html( get_bloginfo( 'name' ) ); ?></a><?php if ( ! is_singular() ) { echo '</h1>'; } ?></div> <div id="site-description"><?php bloginfo( 'description' ); ?></div> </section> <nav id="menu" role="navigation"> <div id="search"> <?php get_search_form(); ?> </div> <?php wp_nav_menu( array( 'theme_location' => 'main-menu' ) ); ?> </nav> </header> <div id="container">
this is what i put in:
<div id="divWrapper"> <div id="divBanner"><a href="default.asp"><img border="0" alt="" align="left" width="257" height="154" src="images/MHO_logo.gif" /></a> <div id="divTopLinks"><a href="ourretailers.html">Our Retailers</a> | <a href="sitemap.html">Site Map</a> | <a href="privacy.html">Privacy Policy</a> <br/> <br/> <br/> <br/> <img src="images/makers_logo.jpg" alt="makers of logo" width="300" height="48" border="0" /></div>
footer.php >
What was already there:
<div class="clear"></div> </div> <footer id="footer" role="contentinfo"> <div id="copyright"> <?php echo sprintf( __( '%1$s %2$s %3$s. All Rights Reserved.', 'blankslate' ), '?', date( 'Y' ), esc_html( get_bloginfo( 'name' ) ) ); echo sprintf( __( ' Theme By: %1$s.', 'blankslate' ), '<a href="https://tidythemes.com/">TidyThemes</a>' ); ?> </div> </footer> </div> <?php wp_footer(); ?> </body> </html>
this is what i put in:
<div id="logos"> <img alt="" align="right" width="119" height="64" src="images/SmallMHOLogo.gif" /> <p>?</p><br /><p>?</p><br /> <a href="https://www.facebook.com/MountainHighOrganicsInc" target="_new"><img src="images/imageFaceBook.jpg" alt="face" width="27" height="24" border="0" /></a> ?<a href="https://twitter.com/MountainHighOrg" target="_new"><img src="images/imageTWIT.jpg" alt="twit" width="27" height="25" border="0" /></a></div> <p>?</p> </div><br class="clear" /> </div> <div id="divFooter"><br /> ?????? <strong>860.210.7805 </strong>??|?<a href="mailto:[email protected]">[email protected]</a><br /> ? Mountain High Organics, Inc.</div>
is this correct? Also when I click on the home menu link all the images are lost…
i guess I dont understand how to set up this up.
not sure why the URL reads this:
https://www.mountainhighorganics.com/mhoincdev/home/ourretailers.html
home is a page and ourretailers is also a page…but they shouldn’t e connected like that.
OK, even with BlankSlate, you can’t just replace all of the code in header.php with your own HTML, there’s certain code that is absolutely necessary, like the code which creates the menu, the call to wp_head, and the code which reads in the CSS file. At the very least, you need to leave everything up to the BODY tag. The best way to work with it, again, is to take out the small bits that you don’t need, like the code which displays the Search form, and fit in the bits from your original site. As the name suggests, BlankSlate is a very bare-bones theme, so there shouldn’t be a lot that you need to remove, or should remove.
ok cool that worked!
could you look at the page.php file and explain that?
i took the page.php file and copied it and changed the name to mhoincpage.php and put this code in it.:
<?php /* Template Name: Mhoinc */ ?> <?php get_header(); ?> <div id="divLeftPhoto"><img border="0" alt="" width="167" height="463" src="images/HomeSidePic.jpg" /></div> <div id="divContentRight"><img alt="" width="725" height="164" src="images/HomeImages.jpg" /> </div> <section id="content" role="main"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <header class="header"> <h1 class="entry-title"><?php the_title(); ?></h1> <?php edit_post_link(); ?> </header> <section class="entry-content"> <?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } ?> <?php the_content(); ?> <div class="entry-links"><?php wp_link_pages(); ?></div> </section> </article> <?php if ( ! post_password_required() ) comments_template( '', true ); ?> <?php endwhile; endif; ?> </section> <?php get_sidebar(); ?> <?php get_footer(); ?>
i then went into each of my pages and selected it as the template. but when i visit each page they all dont show the graphic or content.
- The topic ‘HTML to Worpress’ is closed to new replies.