Announcement

Collapse
No announcement yet.

How to add a seamless blog to my site?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    How to add a seamless blog to my site?

    Hi Guys,

    I'm fairly happy with my personal website, which I built myself... However, I'd like to add a section that's easy to maintain to place some of my photography in context (with words, basically). To be clear, I probably won't be updating it frequently with my personal life in the manner of a blog, but just an easier space to edit with text.

    I was thinking about using Wordpress. What I want is for it to appear seamlessly within the white area on my website: http://patrickgrahamphotography.co.uk. I'm actually updating my website at present offline, so it will look a little different to its current form, but mostly the same. I don't mind if it loads within the white area, or if the blog simply looks identical to my site.

    How do I go about it?

    One thing to say up front is that I have a very basic 1and1 package. I don't think I can set up a database on there. I'm happy to pay for it if I understand what I'm doing ? which I don't at present! What's the cheapest option to do this? (If any of this makes sense!)

    P.
    Last edited by egparadigm; 27-06-2011, 13:19.

    #2
    I integrated wordpress into a site I used to run like that so it can definately be done (or at least with the version I had you could).

    There's a big loop of code that you can largely copy and paste onto a PHP page (along with the various includes and CSS it needs) that will pretty much just include the latest news stories. You can then use the wordpress backend to edit it.

    I've probably still got the code for the front page where I did it but I'm not entirely sure it'd be helpful given how different more recent versions are likely to be. Would probably be better served looking at the Wordpress help sites.

    My MYSQL and PHP skills were really minimal when I did it so, although it needs some programming knowledge, it needs very little.

    Comment


      #3
      Do I need a database, though, basically?

      I only just about have a handle on HTML and CSS at present. Some of the more recent things I've been adding to CSS I must admit to not entirely understanding (pseudo classes I think they're called).

      I'll have a look at the Wordpress help.

      Comment


        #4
        +1 for wordpress. You don't really need any knowledge of a database just that you need one and an install guide.
        Wordpress has plugins to backup/restore the DB once running.
        I would look to moving your website totally to Wordpress and using it as a CMS as it is so flexible I'd be surprised if someone hasn't already done something similar to what you want.

        Comment


          #5
          Right, well I've upgraded my 1and1 package. Hopefully it won't take my website offline while doing it. Annoyingly they haven't offered a timescale or even emailed me about the upgrade. Says it's definitely doing it, though.

          Comment


            #6
            I'm not really sure where to find a good tutorial for building my own wordpress theme. I found these two; one's two years old and the other four years old, so I wonder if they're up to date. I had a look on the wordpress site and it didn't seem like a very good explanation, unless I'm looking in the wrong place. I haven't the foggiest how PHP works...


            Update: We’ve created a second edition of this article, with updated code samples and coverage of the latest theme development techniques. Check it out at WordPress Theme Development Tools. I…

            Comment


              #7
              Right, well, I followed and completed the second tutorial, and now I have a blog that looks like this:



              What am I supposed to do with that!?

              Comment


                #8
                Looks like a wordpress site with a near blank template and CSS.

                It's actually a pretty good building block for what you want.

                In your theme folder (photography looks like the theme name) There's hopefully a page.php in there which is the page being displayed there. In that you can pretty much place your site's design around it.

                Make sure the line

                <?php get_header(); ?>

                is at the top, copy and paste your HTML into it. In the space where you want the blog to appear, put the rest of the PHP code (make sure it's enclosed in <? ?> ) in. Make sure you don't put any PHP outside of <? ?> tags and make sure you don't put any HTML inside.

                After that, it's just a case of customising the style.css so it's in keeping with your site and doing a few odd tweaks.

                Comment


                  #9
                  Thanks muchly for replying - sounds good. I will look into it.

                  Comment


                    #10
                    I think I'm going to have to put this on hold until I rest control of my site from my college. (They're marking it based on its earlier incarnation, so I can't update it.)

                    I managed to test it offline using MAMP. I can see my page coming up hunky dory in the preview, but when I try to apply the theme, I get this error every time (tried two or three times resetting it.)

                    There doesn't seem to be a wp-config.php file.
                    Preview:

                    Last edited by egparadigm; 23-06-2011, 17:31.

                    Comment


                      #11
                      I've got my website back surprisingly quickly, so I'm back dabbling.

                      For some reason my edits are not making any difference to the page (with the exception of the background colour), despite the above preview attempt!

                      Here's the code, not sure what I've missed.

                      page.php:

                      Code:
                      <?php get_header(); ?>
                      
                      <!DOCTYPE HTML>
                      <html>
                      <head>
                      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
                      <!-- TemplateBeginEditable name="doctitle" -->
                      <title>Patrick Graham Photography</title>
                      <!-- TemplateEndEditable -->
                      <link href="style.css" rel="stylesheet" type="text/css">
                      <style type="text/css">
                      </style>
                      <!-- TemplateBeginEditable name="head" -->
                      <!-- TemplateEndEditable -->
                      </head>
                      <body>
                      <div id="container1">
                        <div id="banner"><a href="http://www.patrickgrahamphotography.co.uk" title="Patrick Graham Photography" target="_self"><img src="../../../../images/logo2.png" alt="Patrick Graham Photography"></a></div>
                      <div id="menu">
                        <table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
                          <tr>
                            <td width="20%" align="center" height="25px"><a href="../../../../about/index.html" style="display: block;">About</a></td>
                            <td width="20%" align="center"><a href="http://flickr.com/photos/egparadigm" style="display: block;">Flickr</a></td>
                            <td width="20%" align="center"><a href="../../../../galleries/index.html" style="display: block;">Galleries</a><a href="../../../../contact/index.html"></a><a href="http://flickr.com/photos/egparadigm"></a></td>
                            <td width="20%" align="center"><a href="../../../../cv/index.html" style="display: block;">CV</a></td>
                            <td width="20%" align="center"><a href="../../../../contact/index.html" style="display: block;">Contact Details</a><a href="../../../../cv/index.html"></a><a href="http://flickr.com/photos/egparadigm"></a></td>
                          </tr>
                        </table>
                      </div>
                      <div id="content1">
                        <!-- TemplateBeginEditable name="EditRegion" -->EditRegion<!-- TemplateEndEditable --></div>
                      </div>
                      <div id="copyright" style="position: fixed; bottom:0;">? Copyright Patrick Graham, 2001-2010, All Rights Reserved.
                      </div>
                      </body>
                      </html>        
                      
                       
                              <div id="container">
                                  <div id="content">
                       
                      <?php the_post(); ?>
                       
                                      <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                                          <h1 class="entry-title"><?php the_title(); ?></h1>
                                          <div class="entry-content">
                      <?php the_content(); ?>
                      <?php wp_link_pages('before=<div class="page-link">' . __( 'Pages:', 'your-theme' ) . '&after=</div>') ?>
                      <?php edit_post_link( __( 'Edit', 'your-theme' ), '<span class="edit-link">', '</span>' ) ?>
                                          </div><!-- .entry-content -->
                                      </div><!-- #post-<?php the_ID(); ?> -->          
                       
                      <?php if ( get_post_custom_values('comments') ) comments_template() // Add a custom field with Name and Value of "comments" to enable comments on this page ?>           
                       
                                  </div><!-- #content -->
                              </div><!-- #container -->
                       
                      <?php get_sidebar(); ?>
                      <?php get_footer(); ?>
                      style.css:

                      Code:
                      /*
                      Theme Name: your-theme
                      Theme URI: http://example.com/example/
                      Description: A search engine optimized website framework for WordPress.
                      Author: You
                      Author URI: http://example.com/
                      Version: 1.0
                      Tags: Comma-separated tags that describe your theme
                      .
                      Your theme can be your copyrighted work.
                      Like WordPress, this work is released under GNU General Public License, version 2 (GPL).
                       
                      http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
                       
                      .
                      */
                      
                      /* Reset default browser styles */
                      @import url('styles/reset.css');
                      
                      /* Rebuild default browser styles */
                      @import url('styles/rebuild.css');
                      
                      /* Basic WordPress Styles */
                      @import url('styles/wp.css');
                      
                      /* Import a basic layout */
                      @import url('styles/3c-b.css');
                      
                      #access {
                          margin: 0 0 1.5em 0;
                          overflow: auto;
                      }
                      .skip-link {
                          position:absolute;
                              left:-9000px;
                      }
                      .menu ul {
                          list-style: none;
                          margin: 0;
                      }
                      .menu ul ul {
                          display: none;
                      }
                      .menu li {
                          display: inline;
                      }
                      .menu a {
                          display: block;
                          float: left;
                      }
                      
                      /*Start of main.css*/
                      
                      @charset "UTF-8";
                      /* CSS Document */
                      *{
                          margin:0;
                          padding:0;
                      }
                      html, body {
                          height: 100%;
                          font-family: Verdana, Geneva, sans-serif;
                          color:#CCC;
                          background-color: #F0F0F0;
                      }
                      a img { 
                          border: none; 
                          display: block;   
                          margin-left: auto;   
                          margin-right: auto;
                      }
                      #container1 {
                          height: 92%;
                          width: 90%;
                          margin: 0 auto;
                          text-align: center;
                          background-color: #FFF;
                      }
                      #banner {
                          padding-top: 15px;
                          padding-bottom: 10px;
                          background-color: #F0F0F0;
                      }
                      #menu a:link {
                          color: #000;
                          text-decoration: none;
                      }
                      #menu a:visited {
                          color: #000;
                          text-decoration: inherit;
                      }
                      #menu a:hover {
                          text-decoration: none;
                          width: 100%;
                          background-color: #999;
                          color: #FFF;
                      }
                      #menu a:active {
                          background-color: #F0F0F0;
                      }
                      #menu {
                          color: #000;
                          background-color: #F0F0F0;
                          width: 100%;
                          font-size: 10px;
                          width: auto;
                          height: 25px;
                          line-height: 25px;
                      }
                      #content1 {
                          height: inherit;
                          width: 100%;
                          background-color: inherit;
                          clear: both;
                      }
                      #intro {
                          color: #000;
                          background-color: inherit;
                          font-size: 12px;
                          text-align: justify;
                          line-height: 1.8em;
                          width: 40em;
                          margin-left: auto;
                          margin-right: auto;
                          margin-bottom: 10%;
                          margin-top: 50px;
                      }
                      #gallery a:link {
                          color: #000;
                          text-decoration: none;
                      }
                      #gallery a:hover {
                          text-decoration: underline;
                      }
                      #gallery a:visited {
                          color: #666;
                      }
                      #gallery img {
                          border: 2px solid #CCC;
                          padding:5px;
                          background:#FFF;
                      }
                      #gallery {
                          color: #000;
                          background-color: #FFF;
                          font-size: 12px;
                          text-align: justify;
                          line-height: 1.8em;
                          width: 100%;
                          padding-top: 50px;
                          padding-bottom: 75px;
                          min-width: 725px;
                          /*-webkit-border-top-left-radius: 15px;
                          -webkit-border-top-right-radius: 15px;
                          -moz-border-radius: 15px 15px 0px 0px;*/
                      }
                      /**ENTER BUTTON**/
                      #enter a {
                          width: 125px;
                          margin-top: 2em;
                          margin-left: auto;
                          margin-right: auto;
                          display:block;
                          /**Opacity of icon**/
                          filter:alpha(opacity=100);
                          opacity:1;
                      }
                      
                      #enter a:hover,
                      #enter a:active,
                      #enter a:focus {
                      filter:alpha(opacity=60);
                      opacity: 10;}
                      
                      #copyright {
                          font-size: 11px;
                          background-color: #F0F0F0;
                          text-align: center;
                          /*line-height: 1.8em;*/
                          width: 100%;
                          height: 5%;
                          visibility: visible;
                          display: block;
                          left: 0;
                          padding-top: 0px;
                      }
                      
                      /*End of main.css*/
                      Think those are the only files needed for diagnosis? I'm sure there's plenty of erroneous code in there!

                      Comment


                        #12
                        Seeing the HTML of the page rather than the PHP code may be more helpful but I'd guess your problem is the intro div over-riding your body style. The more specific to a HTML element CSS is, the higher it's priority is.

                        Try playing around with the properties of #intro.

                        Doesn't seem to be much meat to CSS though, I'd guess there are more details classes and IDs in wp.css. 3c-b.css is probably dealing with layout divs rather than anything else.

                        Comment


                          #13
                          I asked on the wordpress forums and was told categorically that page.php was the wrong file and that I ought to be editing index.php and style.css.

                          Must say I'm finding it very difficult to find a good tutorial to help with this. I'm not sure if I'm just being dense. It's just not understanding the php fundamentally which makes it difficult to understand how to dovetail the information.

                          I edited the html into the index.php and it worked first time, but I did end up with some of the header info appearing above the main part of the site – not sure what that's about or how to hide it. Can't see the quoted header in any of the files.

                          Just found out a good theme I downloaded (Suffusion) has quite a lot of customisation options within wp-admin.

                          Comment


                            #14
                            index.php probably is the wrong one for what you're trying to do I'd imagine. page.php is probably the layout for stories and article pages which you probably don't need.

                            Without seeing the code I'm not sure what could be causing that extra text. I'd guess though it's caused by a PHP function. Try moving around some of the PHP code (make sure you don't split up any {} sections of code though).

                            Comment


                              #15
                              I've tried pursuing the Suffusion theme. I've managed to edit it this much, but I simply can't work out how to surround the white area with the code from the rest of my website.

                              Editing the index.php following the instruction given much earlier doesn't work at all.

                              Comment

                              Working...
                              X