Browsing All Posts filed under »Tutorial«

How to build a Custom WordPress Site 3

May 17, 2012

0

Customizing WordPress Child Theme In this tutorial we will create Custom Post Types and add variables and functionality to them. Also we will add some styling for more user-friendly display in the dashboard. Having set up our basic Child Theme structure we will now proceed with the customization. But before that we will do some basic WP configuration and go through the settings. You may be used to building WordPress based sites and therefore you may have some habits in as much as settings and configuration are concerned. Some basic WP Settings Here is what I do in the dashboard: 1. Trash and permanently delete the Hello World Post. 2. Delete the default Links. 3. Set Permalinks to: /%category%/%postname%/ 4. Under Settings General enter Blog Name and Tagline; for the purpose of this exercise I use  as a Title: WordPress TTP and as a Tagline: Tips, Themes and Plugins 5. Add some content to test content display by importing an RSS feed using a plugin such as Feedwordpress. I pulled into a new category called Blog the feed from my author-blog at: http://yorgonestoridis.com/feed Custom Posts and Child Theme We have set up a basic child theme for the purpose of [...] Related posts: How to build a Custom WordPress Site 2 How to build a custom WordPress Site Custom Widgets for WordPress WordPress 3.4 Beta Facebook Strategy with WordPress

How to build a Custom WordPress Site 3

May 17, 2012

0

Customizing WordPress Child Theme In this tutorial we will create Custom Post Types and add variables and functionality to them. Also we will add some styling for more user-friendly display in the dashboard. Having set up our basic Child Theme structure we will now proceed with the customization. But before that we will do some basic WP configuration and go through the settings. You may be used to building WordPress based sites and therefore you may have some habits in as much as settings and configuration are concerned. Some basic WP Settings Here is what I do in the dashboard: 1. Trash and permanently delete the Hello World Post. 2. Delete the default Links. 3. Set Permalinks to: /%category%/%postname%/ 4. Under Settings General enter Blog Name and Tagline; for the purpose of this exercise I use  as a Title: WordPress TTP and as a Tagline: Tips, Themes and Plugins 5. Add some content to test content display by importing an RSS feed using a plugin such as Feedwordpress. I pulled into a new category called Blog the feed from my author-blog at: http://yorgonestoridis.com/feed Custom Posts and Child Theme We have set up a basic child theme for the purpose of [...] Related posts: How to build a Custom WordPress Site 2 How to build a custom WordPress Site Custom Widgets for WordPress WordPress 3.4 Beta Facebook Strategy with WordPress

Eval base64 Hack Solutions

April 26, 2012

0

eval base64 on WordPress or other Sites WordPress and other CMS powered sites are often targets for hackers who mass-inject some code into php and or html files. What to look for The cases I came across so far showed a hack just before the closing body tag in form of a short script pointing to an external source. Also, in some cases I found some php file in the uploads folder (in WP the uploads folder should not contain any php files). Once the script executed, a long string starting something like this: is placed on php and/or htm/html files. This eval base64 encoded and injected PHP code will hit all php archives. How to get rid of the hack without destroying your site To start with: change your passwords (FTP and Admin). Make sure your site script WP and Plugins are updated. Check your footer.php (theme folder) and delete eventually the script added by the hack (or just load your backed up footer.php and replace the file). Check your uploads folder for php files and delete them. Check your plugins folder for unusual php files and as the case may be delete them. If you are not familiar [...] Related posts: How to get rid of eval base64_decode Hack WordPress eval base64_decode Hack Upgrade your WordPress in 5 seconds Ycademy Easter Contest 2 Facebook Profile Picture Hack

Photo Sprites Menu Tutorial

August 17, 2011

0

Original Article at Photo Sprites Menu Tutorial.Photo CSS Sprites for WordPress — Free PSD This Tutorial will show you step by step how to build an attractive menu using sprites for your WordPress Photo website. I have used this feature on the below demo site: The menu is placed in the header.php of the WordPress theme (here its Semiomantics XO) in replacement of the navigation. 1. Create the Image file in Photoshop The image file consists roughly of a Filmstrip serving as mask and then the images which are inserted into the film strip. In the normal position, the images are dimmed by a black fill layer at about 75% opacity. The final image looks as follows: Download the PSD File Download my PSD file from HERE. Open the PSD file in Photoshop and inspect it When you open the file in Photoshop, you will find 3 folders in the layer stack: The bottom folder contains the lower film-strip, the next folder concerns the upper film-strip and on top you find the Semiomantics XO Photo Publishing ad which I kick in as a bonus. To start, just make the “ad” folder invisible by clicking on the eye icon placed to the left of the “ad” folder. [...] Copyright © Yorgo Nestoridis - Original Article at Photo Sprites Menu Tutorial. Related posts:Evo 2 Home Page Tutorial Evo2 Gallery Tutorial Simple Sprites Menu Thesis Tutorial Header Banner Rotator Apple Touch Icon Tutorial

How to Style the WordPress Menu

July 27, 2011

0

Original Article at How to Style the WordPress Menu.WP Custom Menu with Rollover Effect This tutorial is based on a recent Custom Photo Blog Theme Development for WordPress on the base of Semiomantics XO. The Solutions apply to most any clean WordPress theme whereas some of the style sheet syntax may vary from theme to theme. The WP Photo Theme — XO Photo The Goal of the exercise was to build a site which will display on mobile platforms as well without the use of WPTouch Pro for example and which offers the possibility to navigate without zooming on mobile phones. This gave us the opportunity to style the Main Navigation (horizontal menu on top of the site. As we are on a photo site we thought about using Menu tabs with images and rollover effects which can be achieved either with sprites or as individual images. We opted for a solution without sprites in this case considering that the difference will not be material on this site. The screenshot shows the rollover effect as it has been taken while the mouse was hovering over the CONTACT tab. The Menu Normal View and the Hover View show the same picture, whereas we put a transparent black layer (85% [...] Copyright © Yorgo Nestoridis - Original Article at How to Style the WordPress Menu. Related posts:Transparent WordPress Semiomantics XO Transparent WordPress Theme Design How to Customize WordPress 2 How to Create an Ad with Rollover Effect Web Design Workshop 4 – Navigation

How to get rid of eval base64_decode Hack

July 12, 2011

0

Original Article at How to get rid of eval base64_decode Hack.How to get rid of eval base64_decode Hack — WordPress tutorial. Subsequent to our previous post here is a step by step solution for people who don’t have the time or the means to thoroughly track and eliminate all instances of the hack. We will use this method on the YORGOO Press websites. Which parts of your WordPress are touched by the Hack? Basically the DataBase as well as some files on your server: mainly the index.php or html pages plus the hack adds new pages containing namely iframe injections. The files can be found anywhere from the root folder to wp-admin, wp-includes to wp-content. Also, additional sub-domains or subfolders may be attacked. We experienced that comments may be subject to justified suspicion as well. Step by Step Troubleshooting of  How to get rid of eval (base64_decode Hack Clean the database First, we will optimize the database tables and empty the comments and comments meta tables. This is to get rid of comment related problems. From a content point of view this is the main sacrifice we will make. This step is optional and you could well give it a first shot preserving the comments. Export your WordPress content from the [...] Copyright © Yorgo Nestoridis - Original Article at How to get rid of eval base64_decode Hack. Related posts:WordPress eval base64_decode Hack How to Move your WordPress Blog Install XO 2011 on Ycademy Sandbox Upgrade your WordPress in 5 seconds How to Install YORGOO Booster

How to add a Facebook iFrame Application to your Fans Page

June 8, 2011

0

Copyright © 2011 Yorgo Nestoridis. Visit the original article at http://yorgonestoridis.com/facebook-marketing/how-to-add-a-facebook-iframe-application-to-your-fans-page/.6 Steps to Add a Facebook iFrame Application to your Fans Page This Tutorial will show how to set up a Facebook iFrame Application in 6 Steps. Since Facebook changed once more the rules Fan Page content is to be added via iFrame Applications. There are some App providers out there who offer quick solutions namely for people who do not have own hosting; these external solutions have the disadvantage that you are not in full control of your frame and that you promote rather the App provider than yourself. For our customers we use a more professional approach. Here below you will find the basic 10 steps to create your own iFrame Application. What are Facebook iFrame Applications As of February 2011 facebook allows iFrames on Page Tabs as well as on Canvas Pages. The corresponding Applications don’t need to be activated (using the app submission procedure). In short an iFrame Application allows to load external content to your Fan or Business Page. The advantage of Facebook iFrame Applications As your content is hosted on your own host, you may edit in  standard HTML, CSS and JavaScript like on [...] Related posts:Best RSS Facebook Page Facebook Drawing Board Live YORGOO on Facebook Best Facebook Pages Facebook Online Seminar by Ycademy

How to Create an Ad with Rollover Effect

May 12, 2011

0

Copyright © 2011 Yorgo Nestoridis. Visit the original article at http://yorgonestoridis.com/yorgo-nestoridis/how-to-create-an-ad-with-rollover-effect/.Add Rollover Effects to your Ads The principle is simple: the ad consists of a styled link, the style consisting of positioning a background image with a rollover effect when the mouse passes over the image (hover). When clicking on the image the target page opens. A few years ago the rollover effect could only be achieved using JavaScript. The same effect can now be achieved using CSS and namely the pseudo-class :hover. 1. Create your Image The rollover effect can be achieved using two separate small images which alternatively load as a background or by creating one big image containing multiple small images and by shifting the background position. (CSS Sprite). For the purpose of this exercise we will use the CSS Sprite version. The example shows the rollover effect as used on the homepage. For our image we need the normal view as well as the hover view of the ad united on one image created in Photoshop: the image here below is 250 pixels wide and 250 pixels high. In stead of creating two images we create only one and leave a vertical space between the two [...] Related posts:Create 125 x 125 pixels Ads How to create a Favicon with Photoshop Simple Sprites Menu Create a Favicon with Photoshop Create Apple Touch Icons and Startup Images

How to add the Date to the WP Navigation

April 15, 2011

0

Copyright © 2011 Yorgo Nestoridis. Visit the original article at http://yorgonestoridis.com/yorgo-nestoridis-development/wordpress-yorgo-nestoridis-development/how-to-add-the-date-to-the-wordpress-navigation/.Add the Date to WordPress Navigation Menu This post shows you how you can quickly add the date to your WordPress Navigation (Menu). This post is in line with the earlier tutorial about “How to add a search Box to the WordPress Navigation”. WordPress Functions and Style The procedure is simple: we just need to add the function and style it there after. Add the Date Function The following will work on any well designed WordPress theme. Add the following lines to your functions.php: add_filter('wp_nav_menu_items','add_date', 20, 2); function add_date($items, $args) { $items .= '<li>' . date("l F jS, Y") . '</li>'; return $items; } If you wish to style the date independently from the navigation styles, you just need to add a div class, for example: ‘navdate’ like this: add_filter('wp_nav_menu_items','add_date', 20, 2); function add_date($items, $args) { $items .= '<li class="navdate">' . date("l F jS, Y") . '</li>'; return $items; } Note on line 3 the inserted li class ‘navdate’; this link class allows us to style the date using our stylesheet (styles.css or custom.css as the case may be). Add Style To add style, we just create the new class [...] Related posts:How to show a Search Box on the WP Navigation Web Design Workshop 5 – Sub-Navigation Web Design Workshop 4 – Navigation Mitchell & Ness Snapback Caps in Stock Web Design Workshop Navigation

Google Top 10 with Semiomantics for WordPress

February 4, 2011

0

Copyright © 2011 Yorgo Nestoridis. Visit the original article at http://yorgonestoridis.com/yorgo-nestoridis-marketing/google-top-10/google-top-10-with-semiomantics-for-wordpress/.Google Top 10 – the World of Semiomantics Semiomantics tuned WordPress and the concept of YORGOO Publishing are a powerful association. The declared primary Goal of Semiomantics is to build Websites which reach high visibility expressed by Google Top 10 positions. Every post on our [...]Related posts:Hosting WordPress IssuesCreate Apple Touch Icons and Startup ImagesApple Touch Icon TutorialHosting South AfricaHouseboats from South Africa on Semiomantics XO 2011

Apple Look for XO 2011

December 30, 2010

0

Copyright © 2011 Yorgo Nestoridis. Visit the original article at http://yorgonestoridis.com/yorgo-nestoridis-development/semiomantics/apple-look-for-xo-2011/.Wanna Look like a Mac Apple? A while ago, I mentioned in a call the trendsetting web designs of Apple, and we discussed the possibility to skin XO with an Apple Peel. When I saw Banca Gubalke’s post where she drew a project on that [...]Related posts:Boruch Rappaport on XO 2011How to add a 3D Banner to XO 2011Semiomantics XO 2011 for WordPressPersonal XO 2011Semiomantics XO 2011 Editing Interface

How to add a 3D Banner to XO 2011

December 28, 2010

0

Copyright © 2011 Yorgo Nestoridis. Visit the original article at http://yorgonestoridis.com/yorgo-nestoridis-development/semiomantics/how-to-add-a-3d-banner-to-xo-2011/. Contents [ hide ] 1 Create a smashing Home Page on XO 1.1 Preparation of the Project 1.2 Implementation 1.3 1 Download, unzip and rename the 3D Component 1.4 Edit images.xml 1.5 Edit settings.xml 1.6 Rename the swf file 1.7 Embed the Banner to the XO header 2 Author: Create a smashing Home Page on XO This tutorial will show step by step how to add a 3D banner to the XO header. As an example we will use Boruch Rappaport’s Ycademy Sandbox. Preparation of the Project The ingredients of our Project are first of all a WordPress with the XO theme loaded, then we need a flash component, the 3D banner and finally we need some images to load into the component to display on the home page of XO. Finally we need to properly embed the component. Implementation To start with I have loaded XO to Boruch’s ycademy sandbox and activated the theme. Then I have added some content by syndicating some posts from boruchrappaport.net. Quich configuration of XO includes a basic layout, a header and a background (which I copied in rom boruchrappaport.net). The site width [...]Related posts:Banner Rotator for SemiomanticsThesis Tutorial Header Banner RotatorInstall XO 2011 on Ycademy SandboxChristmas Skin for XO 2011 WP ThemeSemiomantics XO 2011 for WordPress

Evo2 Gallery Tutorial

December 23, 2010

0

Copyright © 2011 Yorgo Nestoridis. Visit the original article at http://yorgonestoridis.com/yorgo-nestoridis-development/semiomantics/evo2-gallery-tutorial/. Contents [ hide ] 1 How to create galleries on Evo2 1.1 Load images 2 Author: How to create galleries on Evo2 After our last tutorial focusing on the menu, we will have a look at multiple galleries today. In order to multiply a module, you just need to use your copy and paste capabilities :-). The above image illustrates the present YorgoMan site. You can see the menu entries representing multiple times the gallery module. This means we have created multiple (4 additional) photo galleries. Here are the photo albums: Sun and Sea (this one is the original gallery with the images.xml) Basketball Friends Holidays I me and myself In order to make these albums work, you need to create for each album an image folder. The easiest is to create image folders under evo2/images  with the name of the album, such as basketball, friends ……. Second, you create xml files for each menu item: basketball.xml, friends.xml,… which you put into the folder evo2/xml. To make life easier, just copy and paste the content of images.xml and adapt accordingly. Finally you need to make sure that your menu [...]Related posts:Evo2 Menu TutorialEvo 2 Home Page TutorialElegant Web Design Evo2How to build your Evo2Elegant Evo2 Web Design

Evo2 Menu Tutorial

December 21, 2010

0

Copyright © 2011 Yorgo Nestoridis. Visit the original article at http://yorgonestoridis.com/yorgo-nestoridis-development/semiomantics/semiomantics-evo2/evo2-menu-tutorial/. Contents [ hide ] 1 How to Structure the Evo2 Menu 1.1 YorgoMan Menu 1.2 How to Edit the Menu 1.3 Multiply the Image Galleries 1.4 Customize the Galleries 2 Author: How to Structure the Evo2 Menu The Evo2 Menu is as flexible as you need it to be. To adapt the menu to fit your project, decide first which modules you wish to use and then edit the menu in function of the desired structure. YorgoMan Menu The YorgoMan site will feature mainly Photos. The preferred gallery module is the Images module. YorgoMan wants to organize the images in albums and for each album he wants to load a menu entry. Albums: Sun and Sea Basketball Friends Holidays I me and myself We will need 5 times the Image module. A further category will be Music where he wants to load his preferred songs; for this we will use the Music Module. Finally, he wants to load some YouTube clips, for which we use the YouTube Galley module. For the good order’s sake we keep the contact form and eliminate all other modules. How to Edit the Menu [...]Related posts:Elegant Web Design Evo2Elegant Evo2 Web DesignEvo 2 Home Page TutorialHow to build your Evo2Elegant Evo2 Web Design

How to build your Evo2

December 20, 2010

0

Copyright © 2011 Yorgo Nestoridis. Visit the original article at http://yorgonestoridis.com/yorgo-nestoridis-development/ycademy/web-master-training/how-to-build-your-evo2/. Contents [ hide ] 1 Step by Step Guide to Evo2 1.1 The Evo2 Tutorial or Guide 1.2 The Project 2 Author: Step by Step Guide to Evo2 Ycademy’s Evo2 Seminar covered all modules of Evo2, however there was not enough time to practically exercise during Workshops. For this reason we will publish here a step by step guide about how to realize an Evo2 project. The Evo2 Tutorial or Guide There will be a tutorial per module used to realize a simple project. In order to follow the Guide you will need to have access to an Evo2 script as well as to a tool to re-size and crop images. Finally you will need to dispose of some media, images and eventually videos. We recommend to use Photoshop where available or Pain which is a free tool coming with Windows. The Project For the purpose of this tutorial we will implement a simple project called YorgoMan 2010, which will highlight YorgoMan’s year. In as much as I am concerned, I will use Photoshop to edit images, however paint will do as well. Look out for Step 1: The [...]Related posts:Elegant Web Design Evo2Elegant Evo2 Web DesignElegant Evo2 Web DesignBuild your Flash Website Step 2Glossy WordPress Theme Development

Install XO 2011 on Ycademy Sandbox

November 20, 2010

0

Copyright © 2010 Yorgo Nestoridis. Visit the original article at http://yorgonestoridis.com/yorgo-nestoridis-development/semiomantics/install-xo-2011-on-ycademy-sandbox. Contents [ hide ] 1 Semiomantics XO installation 1.1 Load XO to Ycademy Sandbox Note This install uses an existing Database; you can use one database for multiple installs provided you change the table prefix for each installation. Nice hack if your host limits the number of Databases :-). Support Comment here below. Author: Yorgo Nestoridis, Media Marketing & Publishing, Founder of YORGOO Publishing, YORGOO Press and Semiomantics. If you enjoyed reading the above, please consider following future tips and strategies by RSS reader, Email delivery, or Kindle subscription. This page is wiki editable click here to edit this page. Related posts:Semiomantics XO 2011 Editing Interface Semiomantics XO 2011 Edition Release How to Install YORGOO Booster Semiomantics XO 2011 Release FAQ Semiomantics XO 2011Related posts:Semiomantics XO 2011 Editing InterfaceSemiomantics XO 2011 Edition ReleaseHow to Install YORGOO BoosterSemiomantics XO 2011 Release FAQSemiomantics XO 2011

Cu3er Tutorial

November 14, 2010

0

Copyright © 2010 Yorgo Nestoridis. Visit the original article at http://yorgonestoridis.com/yorgo-nestoridis/cu3er-tutorial. Contents [ hide ] 1 Flash 3D Slider 1.1 1. Change Slide Dimensions 1.2 2. Create your Slides 1.3 3. Load your slides to the WP Media Library 1.4 4. Edit Test Posts 1.5 5. Edit Transitions 1.6 Transition Attributes and Values 1.7 Screen-shots of Transitions 1.8 Trouble-shooting and support Flash 3D Slider This tutorial concerns the participants of last Friday’s Ycademy Call only and is focusing on different transition of slides using the Cu3er 3D Slider. The resulting slider from this tutorial can be viewed HERE. To write this tutorial I have changed the slide size to 940 pixels x 650 pixels. Image sizes oscillate between 60 kb and 320 kb to test transition speeds. These are the steps to reproduce exactly what results in the demo site: 1. Change Slide Dimensions From your dashboard access the theme editor and change Cu3er height as follows: Note also the number of slides is set to 8 and the xml filer efresh is enabled; this setting goes to disabled once your slides are loaded and you have viewed them from your home page. 2. Create your Slides I just used [...] Related posts:Thesis Tutorial Author Box Thesis Footer Tutorial for Author Blog Thesis Tutorial Header Banner Rotator Thesis Tutorial Feature Box WP Best Design

Thesis Footer Tutorial for Author Blog

October 29, 2010

0

Copyright © 2010 Yorgo Nestoridis. Visit the original article at http://yorgonestoridis.com/yorgo-nestoridis-development/semiomantics/thesis-footer-tutorial. Contents [ hide ] 1 Add Footer Widgets to Thesis 1.1 Add Widgetized Footer to Thesis – 3 Columns 1.2 Add 4 Columns Widgetized Footer to Thesis 1.3 Style your Widget Footer Area Add Footer Widgets to Thesis This post shows how I add [...]Related posts:Thesis Tutorial Author BoxCreate a Header Widget in ThesisThesis Tutorial Feature BoxCreate a Widget below the Multimedia Box in ThesisThesis Tutorial Header Banner Rotator

Thesis Tutorial Feature Box

October 29, 2010

0

Copyright © 2010 Yorgo Nestoridis. Visit the original article at http://yorgonestoridis.com/yorgo-nestoridis-development/semiomantics/thesis-tutorial-feature-box. Contents [ hide ] 1 Thesis Tutorial Rotating Contextual Banner in Feature Box 1.1 The Thesis Feature Box in Action 1.2 Semomantics Thesis Author Blog 1.3 Get the Dynamic Content Gallery Plugin * 1.4 Add the Function to Thesis * 1.5 Configure the Dynamic [...]Related posts:Thesis Tutorial Header Banner RotatorThesis Tutorial Author BoxCreate a Header Widget in ThesisSemiomantics Thesis InterpretationCreate a Widget below the Multimedia Box in Thesis

Thesis Tutorial Author Box

October 28, 2010

0

Copyright © 2010 Yorgo Nestoridis. Visit the original article at http://yorgonestoridis.com/yorgo-nestoridis-development/semiomantics/thesis-tutorial-author-box. Contents [ hide ] 1 Add an Author Box to Thesis after Posts 1.1 1. Author Box on Thesis: custom function code 1.2 Author Box Style Add an Author Box to Thesis after Posts Here is how I have added the Author Box after [...]Related posts:Thesis Tutorial Header Banner RotatorSemiomantics Thesis InterpretationCreate a Header Widget in ThesisCreate a Widget below the Multimedia Box in ThesisHow to Customize WordPress 2

Customizing Semiomantics NewsCast 1

October 1, 2010

1

Copyright © 2010 Yorgo Nestoridis. Visit the original article at Customizing Semiomantics NewsCast 1. Contents [ hide ] 1 Customization Tips for NewsCast (Tutorial) 1.1 The color scheme 1.2 The Header Logo 1.3 Embedding the Header Logo 1.4 The CSS Style-sheet 1.5 Background 1.6 Default Font 1.7 Titles and Headings 1.8 Special Case: Featured Title [...]Related posts:NewsCast by SemiomanticsYORGOO Press NewsCastYcademy Easter Contest 3Yorgo Nestoridis Design Brand HeaderNewsCast 12 Hour Promo