Browsing All Posts filed under »Tutorials«

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

How to build a Custom WordPress Site 2

May 14, 2012

0

Build a Custom WP with Semiomantics XO This post focuses on setting up our Main Theme and a Child Theme. For the purpose of this exercise we will use Semiomantics XO as the parent theme because it’s flexible, user-friendly and highly optimized. In fact you can use most any decent WP theme to follow this tutorial, namely the TwentyEleven which comes with the WP installation. Adding a Theme Like on any live site, our test site on BitNami allows us to add themes either from the Dashboard (upload the theme’s zip file) or by pasting the theme into the themes folder in wp-contents. Access your BitNami environment using Windows Explorer and surf to the themes folder. You will see the same folders and files structure under htdocs as you are used to when accessing your WordPress folder on a server using an FTP client. In order to add Themes, we just drop theme folders into the ‘themes’ folder as per above. As you can see, I have amongst others) added my Semiomantics XO (the ‘xo’ folder under themes). XO will serve as the parent theme of the new website. Instead however of customizing XO directly, I will create a child [...] Related posts: How to build a custom WordPress Site Semiomantics XO Transparent WordPress Drafts How to make WordPress Themes Responsive WordPress Themes and Development WordPress 3.4 Beta

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

Image Styling on Semiomantics XO

February 16, 2012

0

Image Borders, Padding, Captions  on XO Theme Thumbnails on WordPress There are two kinds of thumbnails produced on your XO site: the native WordPress thumbnails and the thumbnails generated by XO for the purpose of display throughout the theme where the WordPress thumbnails don’t fit. WordPress Thumbnails Thumbnail sizes are set in your dashboard under Settings > Media.  When we change the thumbs’ sizes, the change will apply only to new content. These thumbnails are used by default in the XO Basic Home Page Layout. In order to modify thumbnails created previously to a change in WordPress settings, we use the “Regenerate Thumbnails” plugin; install from your dashboard and then just run it: this will create thumbnails corresponding to the new WP Media settings for all images in the library and galleries. The Regenerate Thumbnails plugin will have no impact on syndicated posts unless you also pull in the images to your library when syndicating. XO Theme Thumbnails When we upload an image from our dashboard in XO, XO creates 12 thumbnails adapted to the needs of the site and stores them in the default uploads folder for faster loading. If we change the layout settings in XO advanced home [...] Related posts: WordPress Date Styling Meta Tag Styling on WordPress Related posts: Meta Tag Styling on WordPress XO Theme Typography The Image Caption Style Happy Valentine Transparent WordPress Semiomantics XO

Meta Tag Styling on WordPress

February 13, 2012

0

XO Theme for WordPress Styling After each post, we display Tag, Category and RSS references. They are not part of the actual post; they are of a rather technical nature and may help visitors to find contextual content on the site. The SEO impact of publishing such Meta Information is discussable. Styling the Author Name We want to display the author’s name underneath the main title in small but remarkable fonts: .post .meta, .hentry .meta,.post .meta a, .hentry .meta a { color:#111111;letter-spacing:5px; } Note: we just use letter-spacing to gain visibility.   Bottom Tags Usually these meta tags are printed in small print, often difficult to read. For the purpose of this exercise we have switched to a serif font (Times) and increased letter spacing for better readability: .storycontent .postmetadata, .storycontent .tags { font-family: Times, "Times New Roman",serif; font-variant:small-caps; font-size:16px; line-height:1.1em;color:#101010; letter-spacing:2.5px; } .storycontent .postmetadata a, .storycontent .tags a{ color:#000000; } Nothing really exciting here: we are using small-caps (alternatively upper-cases) and letter-spacing of 2.5px.Note that letter-spacing can take decimal values. The fun is in experimenting with font, colors and styles!   Related posts: WordPress Date Styling Custom Typography on Semiomantics XO Theme for WordPress Related posts: WordPress Date Styling Custom Typography on Semiomantics XO Theme for WordPress Related posts: XO Theme Typography WP Author Blog by Semiomantics WordPress Seminar by Ycademy WordPress for Authors Seminar Semiomantics WordPress based Frameworks

How to make WordPress Themes Responsive

January 25, 2012

0

Responsive Themes for WordPress Responsive Websites become a must in 2012. This tutorial demonstrates how to make your WordPress Theme Responsive. What is Responsive Web Design? In very simple terms: Responsive Web Design aims to display content adapted to the visitors screen size. This means namely that the layout width must be fluid, i.e. expressed as a percentage of the width of the screen, typefaces expressed in em and images must be scalable. Practically speaking: a responsive designs can be viewed on a smart-phone or on a large PC screen, the display will always be the same and adapted to the size of the screen or browser window. n stead of using multiple style-sheets for different screen sizes, designers use Media Queries which allow to create multiple layouts using the same content. To achieve scalability, CSS media queries, such as min-width or orientation are used. Make your WordPress Theme responsive using a Child Theme A quick and easy way consists in creating a child theme; this allows you to upgrade your theme as the case may be without altering your customizations. How to create a responsive child theme? 1. Create a new folder in your wp-content/themes folder and name it [...] Related posts: WordPress Christmas Themes WordPress Themes and Development Best WordPress Business Themes How to Style the WordPress Menu New XO53 Theme for WordPress

Own Domain on Tumblr

August 24, 2011

1

Original Article at Own Domain on Tumblr.Own Domain on Tumblr from cPanel - This post will show you how to point the A record of a sub-domain to Tumblr from cPanel. Copyright © Yorgo Nestoridis - Original Article at Own Domain on Tumblr. Related posts:How to add an Own Custom Domain to Tumblr How to Move your WordPress Blog Facebook Graffiti YORGOO Blaster YB271 Beta Google Wave Seminar by Ycademy

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 Publish Digital Photos

July 22, 2011

0

Original Article at How to Publish Digital Photos.Digital Photography and WordPress “How to Edit and Publish Digital Photos” is the focus of the Ycademy Online Seminar in July. 1. How to Edit Digital Photos Taking photos has become a relatively easy and cheap task with the proliferation of accessible digital cameras and mobile devices, such as smart-phones and tablets. Of course the quality of the pictures varies in function of the quality of the camera and the skill of the photographer. Some of the shortcomings can be compensated by improving skills and post editing. The Seminar will deal with editing digital photos using namely Photoshop and OnOne Professional Photo Tools. … after some basic editing … … for web and devices with reduced JPEG quality. Editingand post editing have a lot to do with the purpose of the image as well as on the destination platform. We will look into different options and detail specific requirements for the mobile web. OnOne Professional Photo Editing Tools The above sample shows that editing makes the image heavier! The more filters, masks and brushes we apply the more Kb we ad and the slower the image will load once on the site. Here it is getting interesting: the above image counts [...] Copyright © Yorgo Nestoridis - Original Article at How to Publish Digital Photos. Related posts:Digital Photography Ycademy 1 Ycademy Digital Photography Seminar Digital Photography and Photo Editing Digital Photography and Photo Editing II Digital Photography Ycademy 10

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

WordPress eval base64_decode Hack

July 9, 2011

0

Original Article at WordPress eval base64_decode Hack.Troubleshoot eval(base64_decode This post describes the impact of eval(base64_decode on Zo Nicholas’ WordPress based Author blog. 1. The Symptoms The first symptoms noticed were a change of the layout of the site: the site was not anymore browser centered but hanging on the left edge of the scree. Checking out the site from server side, we notice that all index.php files show a modified first line starting like so: then follows a long, long string of encrypted code.   Also we find unusual php files which have been added on server side. Surprisingly all added content does not trigger a change of the date of the file (last modified). 2. The analysis 2.1 First we went to decode the above hack: Decoding can be easily done from TOASTEDspam. 2.2 We run an exploit scan on the site To scan the site we use the Exploit Scan Plug-in and get: 79 severe level matches: Further 39 Warnings were detected. Besides, the scan came forth with 520 noteworthy matches. 3. Troubleshooting eval (base64_decode While the Exploit scan indicates where the hack may have impacted, the result may not be complete. As you can see from the above, manual troubleshooting can easily mess [...] Copyright © Yorgo Nestoridis - Original Article at WordPress eval base64_decode Hack. Related posts:NewsCast Data Base Maintenance WordPress 2.9 update on Semiomantics BuddyPress Yorgoo Media Facebook Profile Picture Hack YORGOO Press Important Update

XO Mobile Theme with WPTouch Pro

June 29, 2011

0

Original Article at XO Mobile Theme with WPTouch Pro.How to customize WPTouch Pro for XO Customizing your WPTouch Pro skin is similar to customizing your XO all together, In fact, from an ... Copyright © Yorgo Nestoridis - Original Article at XO Mobile Theme with WPTouch Pro. Related posts:Semiomantics XO on iPad Tutorials Semiomantics XO Blog Facebook and Mobile Web Seminar by Ycademy 4 Web Design Tips for Mobile Websites

Test

June 29, 2011

3

Test No related posts.

Semiomantics XO on iPad

June 28, 2011

0

Original Article at Semiomantics XO on iPad.Semiomantics XO Mobile on iPad Subsequent to the recent Ycademy Online Seminar, Semiomantics Developers are prepared to build XO Mobile versions for display across ... Copyright © Yorgo Nestoridis - Original Article at Semiomantics XO on iPad. Related posts:Tutorials Semiomantics XO Blog Semiomantics Mobile Developments WordPress on Facebook Mobile WordPress and Shop

WordPress on Facebook

June 25, 2011

0

Original Article at WordPress on Facebook.WordPress for Facebook Seminar Welcome to the WordPress for Facebook Seminar! This seminar is about Social Media Marketing and Communication involving WordPress, namely the Semiomantics XO Framework and Facebook. During the next two days we will elaborate and implement strategies to automate publication and communication across platforms with a special focus on the mobile web. WordPress on Facebook Why would you want to combine WordPress with Facebook? The main reason is to remain in control of your content, its presentation and the way it streams to and from Facebook. Also, a self-hosted WordPress provides you with better content management features and automation tools than Facebook. If you are a Facebook freak, you can even spend the rest of your life within Facebook and publish at the same time through WordPress Semiomantics XO right from within Facebook. Our pre-seminar sessions demonstrated how to embed your XO on a Facebook Canvas page, from where you have complete access to your WP installation, dashboard and editing and publishing tools. If you don’t want to spend any time in Facebook, then you just need to implement Social Media Marketing and Publishing Strategies as lined out in the YORGOO Publishing Model and your Facebook antenna [...] Copyright © Yorgo Nestoridis - Original Article at WordPress on Facebook. Related posts:Facebook and Mobile Web Seminar by Ycademy WordPress for Facebook Fan Pages with FBlaster Ycademy Online Seminar May 2011 NEW FBlogster to integrate WordPress on Facebook Best Facebook Pages

Facebook and Mobile Web Seminar by Ycademy

June 19, 2011

0

Facebook and Mobile Web Seminar by Ycademy Related posts:Ycademy Online Seminar May 2011 Facebook Online Seminar by Ycademy Best Facebook Pages Ycademy Online Seminar April 2011 Ycademy Seminar Materials

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