1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

[Tutorial] How to rip Wordpress themes!

Discussion in 'Web Design' started by everythingred, May 25, 2011.

  1. everythingred

    everythingred Jr. VIP Jr. VIP Premium Member

    Joined:
    Jul 21, 2010
    Messages:
    1,871
    Likes Received:
    1,234
    I found a site that had a nice theme and it's custom so I can't get it anywhere. I started searching on Google and came across this tutorial (hopefully someone can confirm this works) [WARNING IT IS LENGTHY]:

    -----------------
    Before you start you must have Wordpress runing on your local machine, knowledge of XHTML, CSS and programming. And your computer must has Firefox installed and it’s plugin called Firebug.

    So, lets get started. First, make a theme folder (name it whatever you like) under /wp-content/themes/. Visit the blog you like to copy it’s theme. Here, I’m using Wordpress’s classic theme. Copy the CSS codes from CSS tab in Firebug Windows .

    Select all of CSS codes and paste into text editor (notepad). Put the following codes at the beginning of CSS codes previously copied into notepad. The following codes are used for wordpress theme information.

    /*
    Theme Name: Your theme name
    Theme URI: OpenDNS
    Description: Your theme description blah blah blah
    Version: 1.1
    Author: Your name
    Author URI: E-Commerce Hosting
    */

    Save it as style.css into theme folder you created under wp-content/themes/.
    Firebug’s HTML tab collasped the heading tag and body tag by default. Create a index.php under your theme folder. Write the following codes.

    [​IMG]

    <!DOCTYPE html PUBLIC &#8220;-//W3C//DTD XHTML 1.0 Transitional//EN&#8221; &#8220;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&#8221;>
    Code:
                                       <html xmlns=&#8221;http://www.w3.org/1999/xhtml&#8221;>
    <head profile=&#8221;http://gmpg.org/xfn/11&#8243;>
     
    </head>
     
    <body>
     
    </body>
    </html>
    
    language_attributes() can be used to add lang, xml:lang and dir attributes to the html tag for your theme. Put this function after xmlns attribute in html tag.

    Code:
                                       <html xmlns=&#8221;[URL="http://www.********************.com/forum/redirector.php?url=http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%26%238221%3B"]http://www.w3.org/1999/xhtml&#8221;[/URL] <?php language_attributes(); ?>>
    Understanding BlogInfo functions

    BlogInfo returns the information you set in User Profile and General Options from your Wordpress Administration panel. Following codes are the basic information of your wordpress needed for html. Those codes must be inside heading <head> tags.

    Code:
    <meta http-equiv=&#8221;Content-Type&#8221; content=&#8221;<?php  bloginfo(&#8217;html_type&#8217;); ?>; charset=<?php bloginfo(&#8217;charset&#8217;);  ?>&#8221; />
    <meta name=&#8221;generator&#8221; content=&#8221;WordPress <?php bloginfo(&#8217;version&#8217;); ?>&#8221; />
    <link rel=&#8221;alternate&#8221; type=&#8221;application/rss+xml&#8221; title=&#8221;RSS 2.0&#8243; href=&#8221;<?php bloginfo(&#8217;rss2_url&#8217;); ?>&#8221; />
    <link rel=&#8221;alternate&#8221; type=&#8221;text/xml&#8221; title=&#8221;RSS .92&#8243; href=&#8221;<?php bloginfo(&#8217;rss_url&#8217;); ?>&#8221; />
    <link rel=&#8221;alternate&#8221; type=&#8221;application/atom+xml&#8221; title=&#8221;Atom 0.3&#8243; href=&#8221;<?php bloginfo(&#8217;atom_url&#8217;); ?>&#8221; />
    <link rel=&#8221;pingback&#8221; href=&#8221;<?php bloginfo(&#8217;pingback_url&#8217;); ?>&#8221; />
    <?php wp_get_archives(&#8217;type=monthly&format=link&#8217;); ?>
    <?php wp_head(); ?>
    <style type=&#8221;text/css&#8221; media=&#8221;screen&#8221;>
    @import url( <?php bloginfo(&#8217;stylesheet_url&#8217;); ?> );
    </style>                      
    
     Use Better Search Engine Optimization title
    
    [code]<title><?php wp_title(&#8221;); ?> <?php if(is_single() ||  is_page() || is_category){ _e(&#8217;ยป&#8217;);}?><?php bloginfo(&#8217;name&#8217;);  ?></title>
    Title tag must be inside heading tags.

    Let&#8217;s start copy the well-formed tag elements
    Before you start this lesson, you must have the knowledge about html and wordpress coding. The idea is that we first copy the parent tag elements and then we copy it&#8217;s child elements. We repeat the process till all of the tags are copied.

    Expand each tags and try to understand the functions used in the theme

    It is important to know the wordpress functions used in the theme which you&#8217;re going to copy. First expand the tags and look up and determine what functions are used inside the tags.

    An example for code shown in above,

    Wordpress has bloginfo function that can generate the basic information of your wordpress I already mentioned. Right now, I&#8217;m going to change with the wordpress coding. The following codes will generate the result shown in above.

    Code:
                                       <h1><a href=&#8221;<?php bloginfo(&#8217;url&#8217;);?>&#8220;><?php bloginfo(&#8217;title&#8217;);?></a></h1>
     
    <div class=&#8221;description&#8221;><?php bloginfo(&#8217;description&#8217;);?></div>
    Many of wordpress theme creators used default posts query in the theme except custom one. Some used query_posts to make custom query for some purposed. It doesn&#8217;t matter. All are in the loop.

    Understand the basic structure of Post looping

    The Loop is used by WordPress to display each of your posts. Using The Loop, WordPress processes each of the posts to be displayed on the current page and formats them according to how they match specified criteria within The Loop tags. This is the basic structure of the_loop. Inside this we normally put the_title(), the_permalink(), the_content(), etc.

    Code:
                                  <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
     
    <?php endwhile; else: ?>
    <?php _e(&#8217;Sorry, no posts matched your criteria.&#8217;); ?>
    <?php endif; ?>
    The following codes will output shown above

    Code:
    <div id=&#8221;post-<?php the_ID(); ?>&#8221; class=&#8221;post&#8221;>
     
    </div>
    Expand that div you&#8217;ll see the following sub elements

    Expand h2 tag element.

    [​IMG]

    the_title and the_permalink

    the_title returns the post title and the_permalink returns the permalink of your post. So rewrite with the
    php code

    Code:
    <h2>
    <a title=&#8221;Permanet Link to <?php the_title();?>&#8221; rel=&#8221;bookmark&#8221; href=&#8221;<?php the_permalink();?>&#8221;>
    <?php the_title();?></a>
    </h2>
    the_time or the_date

    the_time returns the all the date of your post. and the_date only returns the date of first post which is published in same day. I prefer you to use the_time

    Code:
    <small><?php the_time(&#8217;F d, Y&#8217;);?></small>
    Check date time format from PHP.net
    the_content

    the_content returns the content of post. Optional parameter is used for showing read more link if the post used <!&#8211;more&#8211;>

    Code:
                                       <div class=&#8221;entry&#8221;>
    the_content (&#8217;Read the rest of this entry&#8217;);
    </div>
    the_tags

    the_tags function return the tags link of the post. It was implemented in wordpress 2.3. the_tags(&#8217;start&#8217;, &#8217;seperate&#8217;,&#8217;end&#8217;);

    Code:
                                       <p class=&#8221;postmetadata&#8221;>
    the_tags (&#8221;Tags:&#8221;, &#8220;, &#8220;, &#8220;<br />&#8221;);
    </p>
    Wordpress uses header.php, index.php, single.php, page.php, category.php, search.php, comments.php, functions.php and footer.php for theme. Oh! you can use only index.php for your theme. But need to write more complicated codes when you&#8217;re using different style for different page. Let&#8217;s say, if you want main , single post and page different. You have to choose either conditional_tags or the page.

    For example, the following code will show excerpt post while browsing the category, search, tags and main page. It shows full content when browsing &#8230; ? ha ha single post

    Code:
                                       <?php if (is_category() || is_search() || is_tags() || is_main()) {
    the_excerpt();
    }else {
    the_content();
    }
    ?>
     
    • Thanks Thanks x 4
    Last edited: May 25, 2011
  2. bertbaby

    bertbaby Elite Member

    Joined:
    Apr 15, 2009
    Messages:
    2,019
    Likes Received:
    1,496
    Occupation:
    Product marketing
    Location:
    USA
    Home Page:
    Interesting, and I have no idea if this actually works. I looked at Firebug and that in itself is a good tip on a useful plugin.
     
  3. soyafan

    soyafan Junior Member

    Joined:
    Nov 28, 2010
    Messages:
    152
    Likes Received:
    113
    also web developer toolbar is an awesome tool if you are a web designer.I saw it in nettuts tutorial
     
  4. guerillablogger

    guerillablogger Junior Member

    Joined:
    Jun 2, 2011
    Messages:
    190
    Likes Received:
    13
    thank you great info sir
     
  5. Thebreaker

    Thebreaker Newbie

    Joined:
    Apr 5, 2014
    Messages:
    16
    Likes Received:
    1
    thanks for the tut
     
  6. zerodtk

    zerodtk Regular Member

    Joined:
    Jan 23, 2009
    Messages:
    210
    Likes Received:
    74
    Home Page:
    actually, using the source and css you can grab everything, except the functions.php ... which is the most important part of a theme as all the php functions are saved there.. anyways, this is a great way to get the theme frame itself ;)
     
  7. SEOnetic

    SEOnetic Senior Member

    Joined:
    May 21, 2012
    Messages:
    995
    Likes Received:
    120
    Thanks for a very useful tips on ripping wp theme.I am gonna test it now.
     
  8. d3vil7

    d3vil7 Newbie

    Joined:
    Apr 11, 2014
    Messages:
    5
    Likes Received:
    0
    Thank you very much :)