German flagEnglish flagSpanish flag

Website

The planning experience to the many travel blogs were a great help for our own travel planning. For this reason we would like our experiences in turn documented so that others can benefit from it. For the technically minded, here is a brief compilation of the software:

Hosting

The site is at METANET hosted a Swiss Hoster with excellent price / performance ratio and incredibly fast and competent support. The selected by us METAhost product includes 17 GB of disk space, unlimited number of domains and the usual services such as PHP, MySQL etc. The price of the offer is only CHF 7.70 per month. If you also decide for this offer you can when logging like my 'mediators number' 1004082 specify. So I get per registration generous 50 CHF commission METANET

Web Blog Software

We have based on PHP and MySQL blogging software WordPress used for our blog. WordPress is free, very easy to install and can be expanded through countless plugins and themes.

Theme

The look of the blog can be changed by "Themes" quickly and easily. After a long search we chose the chargeable Theme Purelight decided. The one-time fee of US $ 27 also includes support. My questions to the developer of the theme have been answered in a very short time to my complete satisfaction. I can therefore only recommend the Theme.

Plugins

The functionality can be extended with plugins will. We opted for the following plugins:

  • Geocache Stat Bar displays badge in the sidebar, where the number of found and hidden geocaches
  • Global Translator Plugin, which can translate the page into virtually all languages
  • Google Analyticator generates statistics about visitors to the page
  • NextGEN Gallery Image Gallery for WordPress
  • Subscribe2 Plugin to send emails about new posts automatically to specific people
  • W3 Total Cache improves performance by caching the contents of the Site
  • WP Wall Guestbook for WordPress
  • XML Google Maps Provides GPX files from a GPS on Google Maps available
  • Auto Syntax Highlighter
  • IDrive for WordPress Creates a backup of the complete Blogs (incl. Files and DB) and saves it on the IDrive. Are backed up only changes after the first backup the diff backup so takes only a few seconds / minutes. IDrive provides 2GB memory - for free. For the last 10 days snapshots are created.
  • WordPress Database Backup Sends daily dump the database to any email address
  • WordPress File Monitor Monitors, existing edit or delete all the changes in the file system and alerts when new files are added
  • Google XML Sitemaps XML Creates a sitemap for different search engines
  • Core Control
  • TOC for WordPress Creates a Table of Contents of Posts or Pages because of the headlines h4, h3, h2, etc ..

Good articel about hardening WordPress, definitly worth reading. Other helpful articels on developing WordPress:

Theme Mods

One-column template

One-column page templates can be created as described on the Following site http://wordpress.org/support/topic/317673

  • Create a copy of the page.php file and name it onecolumn.php
  • Add the Following to the top of the file onecolumn.php . This way you can choose from this new template in the WordPress admin backend When creating a new page.
  <? Php
 / *
 Template name: 1-Column
 * /
 ?> 
  • Remove the Following Code (sidebar) in order did the sidebar will not be Displayed anymore
  <? Php get_sidebar ();  ?> 
  • Change the default CSS style for posts be editing the Following line from
  <Div class = "post" id = "? Post - <? Php the_id ();>?"> 

to

  <Div class = "post_wide" id = "? Post - <? Php the_id ();>?"> 
  • Add the Following lines to the style.css file right below div#content div.post Afterline 87:
  div # content div.post_wide {width: 856px;  background: # e3e3e3 url ('images / post_bg.png') repeat;  padding: 20px;  clear: both;  font-size: 12px;  position: relative;  border: 1px solid # d1d1d1;  } 

Support for wide logo

Changes to file purelight/style.css . Replace section div#header h1#logo Afterline 53

  div # header h1 # logo {width: 500px;  height: 78px;  position: absolute;  display: block;  left: 0px;  top: 1px;  background: url ('images / logo.png') left top no-repeat;  } 

No header pic in first post

  • Add the Following line to the index.php file (after line 45):
  <? Php if (is_home () &&! ($ Post == $ posts [0]) &&! Is_paged ()) {?> 
  • So add this line right after line 53:
  <?  }?> 

Additional css in style.css

  • Green border for XML Google Maps Plugin
  .xmlgm {
	 padding: 3px;
	 background: # A7C443;
 } 
  • Border around images, replace the follwing lines in the style.css
  div.post img.alignright {float: right;  margin-right: 0px;  }
 div.post img.alignleft {float: left;  margin-left: 0px;  } 

with the Following

  div.post img.alignright {float: right;  padding: 5px;  background-color: # e3e3e3;  margin-left: 10px;  margin-bottom: 5px;  border-width: 1px;  border-style: dotted;  border-color: # A7C443;  }
 div.post img.alignleft {float: left;  padding: 5px;  background-color: # e3e3e3;  margin-right: 12px;  margin-bottom: 5px;  border-width: 1px;  border-style: dotted;  border-color: # A7C443;  } 
  • Add the Following CSS sniplet to show the mail icon
  .s2_form_widget h4 {
	 padding-top: 25px;
	 cursor: pointer;
 }

 .s2_form_widget {
     background-image: url ('/ wp-content / themes / purelight11 / images / mail_icon_small.png');
	 background-repeat: no-repeat;
	 background-position: top right;
	 margin-top: -25px;
	 padding-top: 65px;
 } 
  • Replace the Following line
  .sidebar_box {width: 236px;  margin-bottom: 25px;  background: url ('images / sidebar_box_bg.png') bottom center no-repeat;  position: relative;  clear: both;  padding: 40px 20px 10px;  } 

with

  .sidebar_box {width: 236px;  margin-bottom: 10px;  background: url ('images / sidebar_box_bg.png') bottom center no-repeat;  position: relative;  clear: both;  padding: 30px 20px 10px;  } 
  • Changes to the info boxes: replace the Following Lines in the style.css
  div # Infoblock div.post_wrap div.post div.post_image img {height: 80px;  width: 237px;  margin: 0px;  } 

with the Following

  div # Infoblock div.post_wrap div.post div.post_image img {height: 80px;  width: 237px;  margin: 0px;  border: 1px solid # A9A9A9;  background-color: #FFFFFF;  padding: 4px;  margin-bottom: 8px;}
 div # Infoblock div.post_wrap div.post div.post_image img: hover {background-color: # A7C443;} 
  • Add the Following to the style.css Hanes Impromptus jQuery lightbox effect:
  / *
 ------------------------------
	 Impromptu's
 ------------------------------
 * /
 .jqifade {
	 position: absolute;
	 background-color: # 000;
 }
 div.jqi {
	 width: 400px;
	 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	 position: absolute;
	 background-color: #ffffff;
	 font-size: 11px;
	 text-align: left;
	 border: solid 1px #EEEEEE;
	 border-radius: 10px;
	 -moz-border-radius: 10px;
	 -webkit-border-radius: 10px;
	 padding: 7px;
 }
 div.jqi .jqicontainer {
	 font-weight: bold;
 }
 div.jqi .jqiclose {
	 position: absolute;
	 top: 4px;  right: -2px;
	 width: 18px;
	 cursor: default;
	 color: #bbbbbb;
	 font-weight: bold;
 }
 div.jqi .jqimessage {
	 padding: 10px;
	 line-height: 20px;
	 color: # 444444;
 }
 div.jqi .jqibuttons {
	 text-align: right;
	 padding: 5px 0 5px 0;
	 border: solid 1px #EEEEEE;
	 background-color: # f4f4f4;
 }
 div.jqi button {
	 padding: 3px 10px;
	 margin: 10px 0;
	 background-color: # 2F6073;
	 border: 1px solid # f4f4f4;
	 color: #ffffff;
	 font-weight: bold;
	 font-size: 12px;
 }
 div.jqi button: hover {
	 background-color: # 728A8C;
 }
 div.jqi button.jqidefaultbutton {
	 / * Background-color: # 8DC05B; * /
	 background-color: # A7C443;
 }
 .jqiwarning .jqi .jqibuttons {
	 background-color: # A7C443;
 } 

These lines will give some more space after the titles

  div # content div.post h3 {font: 16px / 20px Tahoma, Arial, Verdana, sans-serif;  margin-top: 30px;}
 div # content div.post h4 {font: 14px / 18px Tahoma, Arial, Verdana, sans-serif;  margin-top: 25px;}
 div # content div.post h5 {font: 12px / 16px Tahoma, Arial, Verdana, sans-serif;  color: # 000;  margin-top: 20px;} 

More spacing between lines in body text, change the existing lines

  div # content div.post div.entry {line-height: 22px;  font-size: 12px;  padding: 0px;  text-align: left;  margin-bottom: 10px;  }
 div # content div.post div.entry p {line-height: 22px;  font-size: 12px;  } 

IE6 compatibility

Add the Following to the ie6.css file in the path /httpdocs/wp-content/themes/purelight11/css

  .s2_form_widget h4 {
	 padding-top: 25px;
	 cursor: pointer;
    	 height: 1px;
 }

 .s2_form_widget {
    	 background-image: url ('/ wp-content / themes / purelight11 / images / mail_icon_small.png');
	 background-repeat: no-repeat;
	 background-position: top right;
	 margin-top: -25px;
	 padding-top: 65px;
    	 height: 1px;
 } 

Changes in the header.php file

  • Remove / comment line 18-20 where jQuery and other JS script gets loaded, we want to load it the proper way with wp_enqueue_script
  <Script type = "text / javascript" src = "<? Php blog info ('template_url');?> / Js / jquery-min.js"> </ script>
 <Script type = "text / javascript" src = "<? Php blog info ('template_url');?> / Js / fancy.js"> </ script>
 <Script type = "text / javascript" src = "<? Php blog info ('template_url');?> / Js / load.js"> </ script> 
  • Load jQuery right before the line (29) with <?php wp_head(); ?> <?php wp_head(); ?>
  <? Php wp_enqueue_script ("jquery");  ?> 
  • Right after this line we are going to load all dependent jQuery scripts (including the jQuery Slider for the newsletter):
  <Script type = "text / javascript" src = "<? Php blog info ('template_url');?> / Js / fancy.js"> </ script>
 <Script type = "text / javascript" src = "<? Php blog info ('template_url');?> / Js / load.js"> </ script>
 <Script type = "text / javascript" src = "<? Php blog info ('template_url');?> / Js / jquery-impromptu.3.1.min.js"> </ script>
 <Script type = "text / javascript">
 jQuery (document) .ready (function ()
 {
   // Hide the all of the element with class msg_body
   jQuery ("newsletter_body.") hide ().
   // Toggle the componenet with class msg_body
   jQuery (". s2_form_widget h4"). click (function ()
   {
     jQuery (this) .next ("newsletter_body.") slideToggle (200).
   });
 });
 </ Script> 
  • Replace the Following block
  <Script type = "text / javascript">
 $ (Document) .ready (function () {
	 $ ('# Featured'). JqFancyTransitions ({
	 width: 920,
	 height: 260,
	 Strips: 25,
	 Delay: <? php echo $ pl_slidedelay?>,
	 left: <? php echo $ pl_slidelink?>,
	 Direction: 'random',
	 position: 'top',
	 <? Php if ($ pl_slideeffect! = "Default") {?>
	 Effect: '<? php echo $ pl_slideeffect?>',
	 <?  }?>
	 Strip delay: 40,
	 Speed ​​title: 1200,
	 Navigation: true
	 });
	 });
 </ Script> 

with

  <Script type = "text / javascript">
 jQuery (document) .ready (function () {
	 jQuery ('# featured'). jqFancyTransitions ({
	 width: 920,
	 height: 260,
	 Strips: 25,
	 Delay: <? php echo $ pl_slidedelay?>,
	 left: <? php echo $ pl_slidelink?>,
	 Direction: 'random',
	 position: 'top',
	 <? Php if ($ pl_slideeffect! = "Default") {?>
	 Effect: '<? php echo $ pl_slideeffect?>',
	 <?  }?>
	 Strip delay: 40,
	 Speed ​​title: 1200,
	 Navigation: true
	 });
	 });
 </ Script> 

Plugin Mods

WP Wall

  • CSS Changes in wp-wall.css
  #wallcomments p
 {
	 margin-bottom: 15px;
	 clear: both;
	 border-bottom: 1px dotted # 789 819;
 } 
  #wall_post input {
	 border: 1px solid #cccccc;
	 width: 225px;
 } 
  #wall_post textarea {
	 border: 1px solid #cccccc;
	 width: 225px;
 } 
  .wall old-{
	 background: # d9e2d2;
 }

 #wall_post_toggle {
	 cursor: pointer;
	 font-weight: bold;
 }

 .wallnav {
	 text-align: center;
	 margin: 5px 0px 0px 0px;
 } 
  .wallcomment {
	 line-height: 21px;
	 font-weight: normal;
 } 

add the Following block:

  #wp_latest {
	 color: # 999;
	 width: 100%;
	 text-indent: 10px;
	 font-size: x-small;
	 background-color: #efefef;
	 margin-bottom: 10px;
	 border-bottom: 1px dotted;
 } 

So We change some text in the wp-wall.php file on line 227 from

  $ Result = '<div id = "wp_latest"> Latest on' $ latest_comment '</ div>' $ result...; 

to

  $ Result = '<div id = "wp_latest"> Update date:' $ latest_comment '</ div>' $ result;... 

We want to display the navigation arrows below the comments we move the Following block below the <div id="wallcomments"> block

  <Div class = "wallnav">
					 <Img alt = "Previous" id = "img_left" src = "<? Php echo $ wp_wall_plugin_url;?> / I / left.png" />
					 <Img alt = "Next" id = "img_right" src = "<? Php echo $ wp_wall_plugin_url;?> / I / right.png" />
					 <? Php if ($ show_all):?>
					 <a href="<?php echo get_permalink($pageId) ?> "> All this code
					 <? Php endif;  ?>
  	 </ Div> 

NextGEN Gallery

CSS changes

Changes in nggallery.css

  .ngg-gallery-thumbnail img: hover {
	 background-color: # A7C443;
 } 
  / * Single ----------- ------------- * picture /
 .ngg-singlepic {
	 border: 1px solid # A9A9A9;
	 background-color: #FFFFFF;
	 display: block;
	 padding: 4px;
	 margin-bottom: 8px;
 } 
  .ngg-left {
	 float: left;
	 margin-right: 15px;
 } 
  .ngg-right {
	 float: right;
	 margin-left: 15px;
 } 
  .ngg widget img {
	 border: 1px solid # A9A9A9;
	 margin: 0px 4px 4px 5px;
	 padding: 4px;
 } 
  .ngg-gallery overview {
     overflow: hidden;
     margin: -5px;
     width: 100%;
     clear: both;
     display: block! important;
 } 
  .ngg-gallery-thumbnail-box {
     float: left;
     margin-bottom: 10px;
 } 
  • All paths to .png files for Internet Explorer in the section /* IE */ must be supplemented. For example, should the Pfad /fancybox/fancy_loading.png nach /wp-content/plugins/nextgen-gallery/fancybox/fancy_loading.png geändert will.

New sections:

  a: hover img {
	 background-color: # A7C443;
 } 
  .ngg widget img: hover {
	 background-color: # A7C443;
 } 

Fancybox Integration

  • Download and extract Fancybox Into the nextgen-gallery folder inside the plugin folder (wp-content / plugins / nextgen-gallery)
  • Make all Necessary modifications as discribed at the bottom of this post
  • IMPORTANT: the activation of the fancybox within the function load_scripts() section needs to be done at the very bottom
  • Include the CSS file in the file of fancybox nggallery.php in wp-content/plugins/nextgen-gallery below the line function load_styles()
  // Activate Modified Custom
 if (($ this-> options ['thumbEffect'] == 'custom'))
	 wp_enqueue_style ('custom', NGGALLERY_URLPATH .'fancybox / jquery.fancybox-1.3.1.css', false, '1.3.0', 'screen'); 
  • Create a new file called fancyboxConf.js inside wp-content/plugins/nextgen-gallery/fancybox and add the Following code
  FancyBoxReload function () {
     / * This is basic - uses default settings * /

	 jQuery ("a.fancybox"). fancybox ({
		 'Title position': 'over'
		 'OverlayOpacity': 0.6,
		 'Overlay color': '# 444'
 		 'Titleformat': function (title, current array, currentIndex, currentOpts) {
				     return '<span id = "fancybox-title-over">' + (? title.length '' + title: '') + 'Gallery Image' + (current index + 1) + 'from' + currentArray.length + '</ span>';
		 },
		 'Cyclic': false,
		 'OnComplete': function () {
			 $ ("# Fancybox-wrap"). Hover (function () {
				 $ ("# Fancybox-title") show ().
			 }, Function () {
				 $ ("# Fancybox-title") hide ().
			 });
		 }
	 });
 }

 jQuery (document) .ready (function () {
	 FancyBoxReload ();
 }); 

Display Title / Description in ViewMode of Picture

Change opacity of title overlay background in View mode of Picture

  • Adjust the png /httpdocs/wp-content/plugins/nextgen-gallery/fancybox/fancy_title_over.png According to your desire.

Global Translator

Fix Permissions

All cache files are created by the scripts Which Should Have 777 permissions. By default the cache files will be created with the user "apache" and 755. This way it is not possible to remove the cache files with the default FTP users.

  • Add the Following line into the script wp-content/plugins/global-translator/translator.php right after line 1191
  chmod ($ filename, 0777); 

Flags in the header

  • Add the Following lines to the header.php of your theme right after the line 54 wp_nav_menu( $menu_set ); ?> wp_nav_menu( $menu_set ); ?>
  <? Php
   if (function_exists ("gltr_build_flags_bar")) {
   gltr_build_flags_bar ();
   }
 ?> 

CSS changes

  • Choose the option "Enclose the flags inside a DIV (for CSS customization)" in the Settings menu of Global Translator
  • Add the Following lines to the style.css file from the used theme
  / ********************* TRANSLATION BAR ************************* /
 / ************************************************* ************** /

 div # translation_bar {
	 padding: 11px;
	 outline: none;
	 float: right;
 }

 A # flag_de, a # flag_en {
	 margin: 0px 12px 0px 0px;
 } 

Subscribe2

Messages Should appear in a jQuery light box. Change the file subscribe2.php file on line 83 (for the 'Confirmation mail message'):

  $ This-> confirmation_sent = "<script type = \" text / javascript \ "> jQuery.prompt ('A confirmation message is on its way!') </ Script> <p>".  __ ('A confirmation message is on its way!', 'Subscribe2').  "</ P>"; 

TOC for WordPress

There Should not be a blank line before the TOC

Remove the &nbsp; between the <div> tags on line 338 from

  $ Out = "<div class = 'toc-end'> & nbsp; </ div>."; 

to

  $ Out = "<div class = 'toc-end'> </ div>."; 

Less listsindent

Change the Following in the setting of the plugin:

  .toc ul ul, ol {.toc ol
		 margin: 0 0 0 0;
 } 

Leave a Reply

You must be logged in to post a comment.