andykarasek02 Posted January 28, 2009 Report Posted January 28, 2009 Hello, Right basically, I am designing a website, and a blog is required, I need to keep the same exact layout, but in my content section just have the blog. I have been recommended to use WordPress, but i can't exactly see how to do what im trying to do, I dont need a new WordPress header or footer, I basically want my page to sit as is, but with my blog contents sitting inside (basically blog posts, comments, and side bar) Is this something I am going to have to make a new WordPress theme for? Using my layout and converting it so? Or is WordPress completely the wrong way to go with this? Quote
PicnicTutorials Posted January 28, 2009 Report Posted January 28, 2009 The "easiest" way to go, and the way I went back in the day, was with a comment box. You can find them all here on my site. http://www.visibilityinherit.com/tools.php#comment-boxes It's basically a copy and paste job. Verses the other more labor intensive ways. I ended up using the Cbox. You can see it on my other site here (at the bottom). http://www.littleaboutalot.com/content/diabetes.php Quote
newseed Posted January 28, 2009 Report Posted January 28, 2009 If you want your Wordpress blog to look like your regular site design then you basicaly define the portion of your code to be a header and a footer. It's really easy. I have done about 3-4 businesses that uses Wordpress that displays seamlessly with the entire site. What is your url of the site design that you would like to implement? Quote
andykarasek02 Posted January 28, 2009 Author Report Posted January 28, 2009 Yeah I See what you mean, buts its really not the outcome I am going for, The closest thing i could find to what i meant quickly is something like this http://www.johnnycupcakes.com/blog/ Obviously that example has no functionality for comments, or a sidebar to select previous entries, but I'm just trying to show you what I think I've worded it quite akwardly heres some images of exactly what I'm wanting: Quote
newseed Posted January 28, 2009 Report Posted January 28, 2009 You can acheive that using Wordpress. However, one of two things will have to happen. 1. You will need shrink the image in the main blog content area so you can allow a side column or; 2. You will need to widen your site by about 160-180px so you have room for the side column. Quote
Susie Posted January 28, 2009 Report Posted January 28, 2009 It would be very simple to integrate Wordpress seamlessly with your design. In fact, I would think you could use Wordpress to power your whole website. Here are a couple great tutorials on how to do it: http://www.wpdesigner.com/2007/02/19/so-you-want-to-create-wordpress-themes-huh/ http://www.webdesignerwall.com/tutorials/building-custom-wordpress-theme/ If you need any help, let us know. Quote
PicnicTutorials Posted January 28, 2009 Report Posted January 28, 2009 (edited) No doubt, once you do it, it's most likely very easy. But I just think it's funny that both tuts say it's very easy, yet it would take an hour just to read through all the steps. Building Custom WordPress Theme advertisement This is the Chapter II of the Complete WordPress Theme Guide series. This chapter will show you how to build a custom WordPress theme. Although the Codex site provides very good documentations on how to create a theme, but I find it too complicated for a beginner. In this tutorial, I will explain the basics of how WordPress theme works and show you how to convert a static HTML template into a theme. No PHP skill is required, but you need Photoshop and CSS skills to create your own design. 1. The Blog Frontend Before you start, let?s take a look at the WordPress default theme and see how it is structured. Take note of the elements (header, post title, search form, navigation, footer, etc.). default homepage Default Frontpage (index.php) default homepage Default Single (single.php) 2. Photoshop Mockups Based on the information gathered from the default theme, design a Photoshop mockup of your blog. Here I?m using GlossyBlue, one of my free WordPress themes, as an example. Download the demo.zip to see the Photoshop file. default homepage 3. HTML + CSS After the PSD design is done, create a static HTML+CSS template of each page. You can use my GlossyBlue HTML files in the demo.zip to follow this tutorial. Extract the zip and take a look at the index.html, single.html, and page.html. Later in the tutorial, I will use these HTML files and convert them into a theme. default homepage Why Create a Static HTML File First? Mainly because it will make the development process a lot easier. I usually create a HTML file for every template that I need, test it across all browsers, validate both HTML and CSS markups, then all I have to do is cut & paste the WordPress code. By doing so, I don?t have to worry about HTML or CSS bugs during my theme making process. 4. How WordPress Theme Works If you go the default theme folder (wp-content/themes/default), you should see many PHP files (called template file) and one style.css file. When you are viewing the front page, WordPress actually uses several template files to generate the page (index.php how theme works For more details, check out Site Architecture and Template Hierarchy at Codex. 5. Duplicate The Template Files Copy the GlossyBlue HTML folder into the wp-content/themes folder. Then, go to the default theme folder, copy the comments.php and searchform.php file to the glossyblue folder. copy files 6. Style.css Go to the WordPress default theme folder, open the style.css file. Copy the commented code at the top and paste it to the GlossyBlue style.css file. Change the theme name and the author information as you desire. theme name and author's information 7. Splitting The Files Now you need to understand where to split the file into several files: header.php, sidebar.php, and footer.php. The image below shows a simplified version of my index file and how the markups should split. splitting files 8. Header.php Open the index.html file. Cut from the top to where the ends, paste it in a new PHP file, and save the file as header.php. header code Go to the default theme folder, open the header.php. Copy and replace the tags where it requires PHP code (Template Tag): , <link> stylesheet, <h1>, and <div class="description">.<p> </p> <p>replace code</p> <p>Navigation Menu (wp_list_pages)</p> <p> </p> <p>Replace the </p> <li> tags in the <ul id="nav"> with <?php wp_list_pages('sort_column=menu_order&depth=1&title_li=');?><p> </p> <p>replace code</p> <p> </p> <p>Reference: wp_list_pages.</p> <p>9. Sidebar.php</p> <p> </p> <p>Back to the index.html file, cut from where the </p> </ul> <form id="searchform"> start to the closing tag of <div id="sidebar"> and paste it in a new PHP file, save it as sidebar.php.<p> </p> <p> * Replace the </p> <form id="searchform"> wrap with <?php include (TEMPLATEPATH . '/searchform.php'); ?>.<p> * Replace the category </p> <li> tags with <?php wp_list_categories('show_count=1&title_li='); ?><p> * Replace the archive </p> </li> <li> tags with <?php wp_get_archives('type=monthly'); ?><p> </p> <p>sidebar</p> <p> </p> <p>References: wp_list_categories and wp_get_archives.</p> <p>10. Footer.php</p> <p> </p> <p>Back to the index.html file, cut from the </p> <div id="footer"> tag to the end of </div> </li> </form> </div> </form> </li> </div> </h1> Edited January 28, 2009 by Eric Quote
Susie Posted January 28, 2009 Report Posted January 28, 2009 No doubt, once you do it, it's most likely very easy. But I just think it's funny that both tuts say it's very easy, yet it would take an hour just to read through all the steps. Easy doesn't always mean quick. Quote
andykarasek02 Posted January 28, 2009 Author Report Posted January 28, 2009 (edited) Yeah I started to read these tutorials before but wasn't actually 100% sure if they were what I needed? I mean, whats the benifits of having word press power the whole site when blog content is only going to lay on one page? Will this not sacrifice layout? Edited January 28, 2009 by andykarasek02 Quote
lm Posted January 28, 2009 Report Posted January 28, 2009 it is also possible (and in many cases really much easier) just to install WP, take template which the most similar to yours in looks (or better - minimalistic, with very little graphics) and edit CSS of this template to your color/design. You can always add plugins/features to this template to make it complete. Quote
Susie Posted January 28, 2009 Report Posted January 28, 2009 Yeah I started to read these tutorials before but wasn't actually 100% sure if they were what I needed? I mean, whats the benifits of having word press power the whole site when blog content is only going to lay on one page? Will this not sacrifice layout? It will not sacrifice your layout and one benefit to having WP power your whole site is that you will only have one admin to take care of. If you do it separately, which is really not a big deal, you will have one place where you take care of the non-blog pages and then you have to log in and take care of the blog. Again, not a big deal, but convenience is one nice aspect. All you would need to do is go into the Reading options of your WP dashboard and select a Page (capital P) as your "front" page and select which Page will be your "blog" page. To create your custom Wordpress theme, just start with your current design and follow the tutorials I showed you (the first one I linked will be good). You'll leave the framework of your design and insert the WP code to make it work. Do you have your design uploaded somewhere so we can see the code? I could help get you started..... Quote
lm Posted January 28, 2009 Report Posted January 28, 2009 whats the benefits of having word press power the whole site when blog content is only going to lay on one page? The benefits (besides what Susie already wrote about): Through WP you can control (adding new information to ) the content of other pages using excerpts from your blog. Adding WP plugins will give you an opportunity to add photogallery, shop, video and so on and update their content more easily. Akismet plugin will protect your blog from spam. But the most spectacular advantage of having WP (or other CMS) on a website is the possibility of having RSS feeds and other widgets from all that social networking. It will help to improve the popularity rank of your website. Quote
andykarasek02 Posted January 28, 2009 Author Report Posted January 28, 2009 Right sounds like the way forward then, Im going to read through those tutorials and see what I come up with, Its just a little intimidating, as I am more comfortable working in photoshop, slicing and usually letting dreamweaver take care of most of the coding work, but I suppose I have to start somewhere! I'll let you know how I get on. Quote
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.