modifying my child theme

  • Fat Tony

    (@wildpluckings)


    12 years, 1 month ago

    http://www.wildpluckings.com

    I am a beginner to wordpress and I am trying to use a child theme to get my pages like I want them. In the “music” tab of my wordpress site you can see my original webpage design that I am now trying to emulate. (the home/forum buttons will take you away from the site but the other buttons are functional) I decided to use wordpress because I needed the comment/user registration functions.

    I am working on my child theme now and it is currently activated. I have worked through the entire documentation page on child themes. The parent theme is “twenty eleven”. I don’t really understand why we are recommended to use child themes rather than just using the editor to modify the parent theme (twenty eleven in my case). I have added a style.css file which seems fine. The functions.php file behaved wierd though.

    It contains:

    <?php
 function favicon_link() {

    echo '<link rel="shortcut icon" type="image/x-icon" href="/wakawaka.ico" />' . "\n";

}

add_action('wp_head', 'favicon_link');

    without the php opening tag (like the example in the documentation) the actual code was in the header of my website.

    With a php closing tag my website is broken.

    By adding an opening <?php tag it seems to be working fine.

    I hope this is normal, to use an opening tag at the beginning of my functions.php file.

    Most importantly, when using a “parent” theme, I have access to header/footer/index and so on in the theme editor… with my child theme I only have access to the style.css and functions.php files. Do I just copy/paste the entire “twenty eleven” themes folder inside my child theme so that I can start editing the header/footer in the way I want it?

    I don’t understand why a child theme is even necessary, but I realise I must be overlooking something. Editing the twenty eleven theme directly would have been quite intuitive by comparison

    Qs

    1) Is adding the php opening tag “<?php” to my functions.php file normal? I am curious because it wasn’t in the documentation yet it was necessary for me

    2) Do I copy/paste the twentyeleven theme content into my child themes folder?

Viewing 13 replies - 1 through 13 (of 13 total)
  • Digital Raindrops

    (@adeptris)

    12 years, 1 month ago

    Hi,
    Answer 1
    All php files start and ened with php tags <?php ?>, that is apart from functions.php this is the only file that does not have a closing php tag!

    Your code is 100% correct, so you have your child theme and add any style changes in the child themes style.css below the @imports line, that is all good as well.

    Answer 2
    We would only copy across any files we want to change to the child theme, and copy any code we need and change for new files.

    Lets say we were adding a second top menu to our child theme, we would do the following:
    1. Add a call to create a new menu theme location call in functions.php
    2. Create css styles (copy from parent, paste and change) for any new menu styles
    3. Copy “not cut” the header.php file from twenty eleven to our child theme
    4. My preference is to wrap new code in a template part create navigation-top.php
    5. Add the menu code to the new navigation-top.php file
    6. In the copied header.php file call the menu

    <?php /*EDIT Add in a new top menu */ ?>
<?php get_template_part('navigation','top'); ?>

    7 Test the changes

    Template parts are really great because you can manage the code much better, and they are portable between themes, drop in the file add the styles and a call.

    Why Use a Child theme, when WordPress updates the contents of the default themes, twenty ten and twenty eleven folders are deleted and uploaded again, so any custom changes are lost!

    The link above has a child theme download with three menus, so you can see this example!

    You are on the correct path 🙂

    HTH

    David

    Thread Starter Fat Tony

    (@wildpluckings)

    12 years, 1 month ago

    thanks it is reassuring to know I had the code right at least 🙂

    I tried starting out on some modifications. As it seemed like it wouldn’t be too hard, I first tried adjusting my footer:

    1) Copy footer.php from twentyeleven to wildtheme (my child theme)

    2) modify <?php printf( __( ‘Proudly powered by %s’, ‘twentyeleven’ ), ‘WordPress’ ); ?>

    Problems

    1) if I put more than one word in between the brackets i.e:

    <?php printf(hello world); ?>

    – breaks the entire page/footer section doesn’t appear.

    2) if I put one word i.e:

    <?php printf(test); ?>

    – works, but it links to wordpress.org

    How would I go about putting the following information in the footer:

    google adsense banner
    Copyright © 2012 wildpluckings.com | All Rights Reserved.

    Here is the entire code (well the important part, I think!):

    <a href="<?php echo esc_url( __( 'http://wordpress.org/', 'twentyeleven' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'twentyeleven' ); ?>" rel="generator"><?php printf( __( 'Proudly powered by %s', 'twentyeleven' ), 'WordPress' ); ?></a>

    the url at the top of the code adjusts where it links to. So I can change it from wordpress.org to my index page or something. Not sure why the php script is in there or which part I would add my adsense banner to though

    Digital Raindrops

    (@adeptris)

    12 years, 1 month ago

    Hi,
    The __() is for language localisation, allowing the theme’s text to be translated in the language folder.

    The ‘twentyeleven’ is the namespace
    The %s casts the word ‘WordPress’ into the %s, this is so any translation will still have the word “WordPress”
    eg: “Fièrement propulsé par WordPress” (Google Translate to French)

    You are missing the text qualifiers “Hello World” or ‘Hello World’
    You only use printf if you want to cast a value into the %s values

    <?php
echo __( 'Copyright © 2012 wildpluckings.com | All Rights Reserved' );
?>

    or

    <?php
echo 'Copyright © 2012 wildpluckings.com | All Rights Reserved';
?>

    Download a few themes and look at examples, using the code that suits the requirement is a good way to move forward.

    HTH

    David

    Thread Starter Fat Tony

    (@wildpluckings)

    12 years, 1 month ago

    that was really simple to understand everything made sense, thanks.

    I have changed the footer. I have removed this content:

    <?php do_action( 'twentyeleven_credits' ); ?>
<a href="<?php echo esc_url( __( 'http://www.wildpluckings.com/', 'twentyeleven' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'twentyeleven' ); ?>" rel="generator">

    In place I am using:

    <div id="site-generator">
<?php
echo '<a href="http://www.wildpluckings.com">Copyright © 2012 wildpluckings.com | All Rights Reserved</a>';
?></a>
</div>

    I even figured out where to add the hyperlink to my home page. I hope I got that part correct, I just improvised it in there and it works but I am not experienced with writing html stuff within php functions so it was a miracle it worked!

    Can we “undo” changes made in the editor? Do you recommend using something like notepad++ to make changes and dreamweaver for FTP? (I can’t get to grips with filezilla although I am willing to learn it if it is recommended) as a beginner I will be using a trial and error process frequently once I get going. Some means of previewing actions before committing to them would be ideal.

    I will be taking an in depth look at your second top menu tutorial in a moment. I think I’ll learn some good fundamentals there thank you. I will return with more questions 😉 Quite happy that wordpress is beginning to “click” for me now.

    Digital Raindrops

    (@adeptris)

    12 years, 1 month ago

    If you are on Windows check out the free to use InstantWP, it is a full environment that can run from a USB, that installs nothing on your PC, I use Windows, Notepad++, Filezilla, all development using InstantWP, and then FTP to my website.

    There is a tutorial for $27 on the InstantWP website that may be worth a look, I am not affiliated to Instant WP I just think it is such a nice little application.

    I wrote this post a while back about InstantWP.

    HTH

    David

    esmi

    (@esmi)

    12 years, 1 month ago

    Alternatively, EasyPHP is free and really easy to set up on Windows.
    http://quirm.net/2011/05/05/installing-wordpress-locally-using-easyphp/

    Digital Raindrops

    (@adeptris)

    12 years, 1 month ago

    Hi esmi,
    InstantWP is a free download, sorry if I did not make that clear.

    Everything runs from inside the folder, so it installs nothing on the computer, when you run the little application it runs everything, including PHPMyAdmin, WordPress, standalone Apache etc:, a full development environment with no install or edits.

    I tried WAMPP before finding this, but it messed up other development environments, as it changed the localhost settings, I had Visual Studio installed and it stopped the preview working after installing WAMPP, so I do not like installing anything that runs an intranet or localhost.

    The $27 is only if you are a beginner and want the documentation.

    • Design your website on your own Windows machine and duplicate your entire Instant WordPress installation onto a web server in a few minutes, quickly and easily.
    • Take a snapshot of a live WordPress website and duplicate it in Instant WordPress to test it for WordPress upgrades.
    • Design a WordPress website in Instant WordPress and clone it multiple times across the web.
    • Give your clients a “training sandbox” of their live WordPress site in Instant WordPress so that can learn how to use WordPress without damaging their live website.
    • Clone your live WordPress website for use in presentations and exhibitions in places where you don’t know if there will be Internet access.
    • Learn how to secure a migration from Instant WordPress from hacking.
    • Carry around a full professional WordPress development environment on a USB key

    Hope this is clearer.

    David

    esmi

    (@esmi)

    12 years, 1 month ago

    InstantWP is a free download, sorry if I did not make that clear.

    Oh – that’s cool! I did have a quick look at the site but it wasn’t immediately clear that it was free. How easy is it to use without the documentation?

    Digital Raindrops

    (@adeptris)

    12 years, 1 month ago

    It is a breeze, download unzip, open the folder click and run the application, just 260mb so you could run it from a USB stick, I use it all the time now, ideal for testing problem themes for answers in this forum, and testing example code samples.

    Full development environment, preloaded with a WordPress database ready to go!

    It is rare that I will reccomend a product but this one I would 100%.

    HTH

    David

    Thread Starter Fat Tony

    (@wildpluckings)

    12 years ago

    thanks for the instantwp tip. It was also nice to learn which tricks the experienced folks use I can see how it will help me already

    I am trying to figure out how to add quite a sophisticated header/navigation menu. (Header image has hyperlink hotspots, navigation menu uses CSS rollovers)

    Here is the code from my old site:

    <div id="logo"><img src="/images/headerimage.jpg" alt="wildpluckings.com" width="960" height="70" border="0" usemap="#Map" />
  <map name="Map" id="Map">
  <area shape="rect" coords="869,21,893,50" href="http://www.youtube.com/schmutz06" target="_blank" alt="YouTube" />
      <area shape="rect" coords="906,22,930,49" href="http://www.twitter.com/schmutz06" target="_blank" alt="Twitter" />
    <area shape="rect" coords="37,11,356,60" href="/index.php" alt="wildpluckings.com" />
    </map>
  </div>
   <div id="navigation"><a href="/index.php">HOME</a><a href="/music">MUSIC</a><a href="/forum">FORUMS</a><a href="/Gallery">GALLERY</a><a href="/Tutorials">TUTORIALS</a><a href="/Downloads">DOWNLOADS</a><a href="/halloffame">HALL OF FAME</a> <a href="/FAQ">FAQ</a></div>
   <div id="headerImg"><img src= "/images/headerlogo.jpg" width="960" height="70" alt="logo" /></div>

    My old design was 960px in width. The header image was 960x70px. My current wordpress header size is 1000×288. How can I adjust this, and also add the click-able hotspots (for my twitter/YouTube etc)

    Questions:

    1) Which files do I need to copy to my child theme to adjust the overall page width and also add a 10px border around the edge of every page? (would this be referred to as the “wrapper”?

    2) Is there a simple way to identify which id’s are used for different parts of my site? For example I don’t know if the header is referred to as header, h1, wp_header or anything! So I’m never sure what to look for in the .css/header files.

    3) Which file will I be modifying to insert my header image click-able hotspot area code?

    4) would it be advisable to scrap my .CSS based navigation menu design and modify the wordpress top menu to my liking? If so where can I adjust the hover/active/inactive states?

    Thanks 😉

    sghahani

    (@sghahani)

    11 years, 3 months ago

    Hi, Its a bit intimidating to enter this zone as im not a full front end developer (I understand HTML and CSS) but I’ll have a go!

    Ok I’m up to having twenty twelve theme installed and running with my text and some images and have created a child theme.

    I want my ABOUT page header to be unique. I dont want all pages to have a header image or might want to have something different for some.

    How should i go about it? I am working on my own Host server environment and am afraid to break any php docs. (i was able to tweak Proudly created by WPin php tho, just because found the right instructions!).

    I cant provide URL to site as is in the development and have privacy plug ins. I can unlock it tho if you need.
    Any way please help.
    Cheers

    WPyogi

    (@wpyogi)

    11 years, 3 months ago

    @sghahani – please start your own thread if you need help. This thread is old and you don’t have the same question.

    sghahani

    (@sghahani)

    11 years, 3 months ago

    ok thanks!

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘modifying my child theme’ is closed to new replies.