German flagEnglish flagSpanish flag

Website

The planning experience in the many travel blogs were a great help for our own journey planning. For this reason, we want to turn our experiences 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 hosting with excellent price / performance ratio and incredibly fast and competent support. The chosen 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 for this 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. How do I get per registration generous 50 CHF commission METANET

Web blog software

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

Theme

The appearance of the blog can be changed by "themes" quick and easy. After a long search, we opted for the chargeable Theme Purelight decided. The one-time fee of US $ 27 also includes support. My questions to the developers of the themes were answered very quickly to my complete satisfaction. Therefore I can only recommend the theme.

Plugins

The functionality can be extended with plugins to taste. We have chosen the following plugins:

  • Geocache Stat bar indicates badge in the sidebar, which counts the number of found and hidden geocaches
  • Global Translator Plugin, which can translate the page into virtually all languages
  • Google Analyticator generates statistics about the visitors of this page
  • NextGEN Gallery Picture 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 entire blog (incl. Files and DB) and saves it on the IDrive. It only changes are saved, after first securing the diff backup so only takes a few seconds / minutes. IDrive offers 2GB of storage space - free of charge. For the last 10 days snapshots are created.
  • WordPress Database Backup Sends a daily dump the database to any email address
  • WordPress File Monitor Monitors, existing edit or delete any changes in the file system and alerts when new files are added
  • Google XML Sitemaps XML Sitemap Created a for different search engines
  • Core Control
  • TOC For WordPress Creates a table of contents of posts or pages due to the headlines h4, h3, h2, etc ..

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

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 admin backend wordpress 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 after line 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 after line 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') no-repeat bottom center;  position: relative;  clear: both;  padding: 40px 20px 10px;  } 

with

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

with the Following

  div # info block 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 # info block div.post_wrap div.post div.post_image img: hover {background-color: # A7C443;} 
  • Add the Following to the style.css for the 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: 0 10px;
	 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 scripts gets loaded, we want to load it the proper way with wp_enqueue_script
  <Script type = "text / javascript" src = "<? Php bloginfo ('template_url');?> / Js / jquery-min.js"> </ script>
 <Script type = "text / javascript" src = "<? Php bloginfo ('template_url');?> / Js / fancy.js"> </ script>
 <Script type = "text / javascript" src = "<? Php bloginfo ('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 jQuery dependent scripts (including the jQuery Slider for the newsletter):
  <Script type = "text / javascript" src = "<? Php bloginfo ('template_url');?> / Js / fancy.js"> </ script>
 <Script type = "text / javascript" src = "<? Php bloginfo ('template_url');?> / Js / load.js"> </ script>
 <Script type = "text / javascript" src = "<? Php bloginfo ('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,
	 title speed: 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,
	 title speed: 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 # 789819;
 } 
  #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"> Last entry:' $ 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: 4px 4px 0px 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 added. For example, should the Pfad /fancybox/fancy_loading.png nach /wp-content/plugins/nextgen-gallery/fancybox/fancy_loading.png geändert be.

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 of fancybox in the file 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: '') + 'in picture' + (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 View mode 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 nach your desire.

Global Translator

Fix permissions

All cache files Which are created by the scripts shoulderstand 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 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;
 }

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

Subscribe2

Messages shoulderstand 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 shoulderstand 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 ol {.toc
		 margin: 0 0 0 0;
 } 

Leave a Reply

You must be logged in to post a comment.