SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 32
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2013
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Designing in wordpress

    Hi just started learning wp. I have not seen many backends in Wordpress and therefor not sure how to make things. I know html/css good, that is not the problem.

    Please take a look at the image, how should i build something like this ? It needs to be easy for everybody to edit text and image via backend.

    I thought about using custom fields for images and text. I would then create a pagetemplate.

    Is there a better way ? What is the most userfriendly thing to do ?

    Thanks Ingenting

    web-elements.png

  2. #2
    Barefoot on the Moon! silver trophy
    Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,516
    Mentioned
    51 Post(s)
    Tagged
    1 Thread(s)
    You'll want to look into theme development: http://codex.wordpress.org/Theme_Development

    Also, take a look at the 2012 default theme. You'll be able to see some of the code that makes a wordpress theme work.

    For the example you provided, the pieces of information you would be pulling using PHP are the post title and featured image (or featured image thumbnail). The rest is HTML/CSS.
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2013
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have looked at the link, and a lot of other "theme development" resources. But still cant figure it out how to do this specific design. Is is not a blog page it is a corporate site, the image with the text above should link to "about page". Is it then still right to use "post title" and "featured image".

    Why not create a new page-template with custom fields. Then the user can edit the all on the page including the above design via custom fields.

  4. #4
    SitePoint Enthusiast
    Join Date
    Feb 2013
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay lets say i have this design(see image). I have the html and css. I want to place this on my "about" page. What should i do ?

    If someone could give some easy step by step that would be great.
    I just cant find any tutorial that shows this.

  5. #5
    Barefoot on the Moon! silver trophy
    Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,516
    Mentioned
    51 Post(s)
    Tagged
    1 Thread(s)
    Where did you get the screenshot from? I'd suggest looking at the website's code to get an idea on how to approach the problem.

    Also, I've gone ahead and move this to the "getting started with web design" forum, as your question involves getting started with HTML and CSS, rather than actual PHP code for Wordpress.
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  6. #6
    SitePoint Enthusiast
    Join Date
    Feb 2013
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No no. i know html/css very good sir. i just dont know how to make it dynamic the right way. it should be user friendly.

    meta boxes ? custom fields ? HOW!!

  7. #7
    Barefoot on the Moon! silver trophy
    Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,516
    Mentioned
    51 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ingenting View Post
    No no. i know html/css very good sir. i just dont know how to make it dynamic the right way. it should be user friendly.

    meta boxes ? custom fields ? HOW!!
    You need to use "the loop" (possibly a secondary loop with a query to select the posts you want) and pull the title, permalink, and featured image. You do not need any custom fields for this.

    http://codex.wordpress.org/The_Loop

    http://codex.wordpress.org/Function_...ce/query_posts

    http://codex.wordpress.org/Function_.../get_permalink

    http://codex.wordpress.org/Function_.../get_the_title

    http://codex.wordpress.org/Function_...post_thumbnail
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  8. #8
    SitePoint Enthusiast
    Join Date
    Feb 2013
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, you are saying that the three images are post with a featured image , title and permalink. Is this still right when it should link to "about page". I still cant see how this is the right way Also it does not make sense that the user should edit in post instead of the page name, not very user friendly ?

  9. #9
    Barefoot on the Moon! silver trophy
    Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,516
    Mentioned
    51 Post(s)
    Tagged
    1 Thread(s)
    You might want to take a look at the difference between posts and pages:

    http://codex.wordpress.org/Post_Types

    http://codex.wordpress.org/Pages

    Beyond that, I'm not quite sure what you're asking.
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  10. #10
    SitePoint Enthusiast
    Join Date
    Feb 2013
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am trying to find out how to setup those elements you see on the picture in wp.

    When you click on the image you are going to a about us page.

    i have the css/html.

  11. #11
    Barefoot on the Moon! silver trophy
    Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,516
    Mentioned
    51 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ingenting View Post
    i have the css/html.
    Go ahead and post what you have.
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  12. #12
    SitePoint Enthusiast
    Join Date
    Feb 2013
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Html/css does not matter. Where will you place the html ? Thanks for trying.

  13. #13
    SitePoint Enthusiast
    Join Date
    Apr 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    www.lynda.com has tutorials on Wordpress.

    If I am understanding your post correctly, you have 3 images on a page. You want to click on the image and be redirected to a page.

    Select the image and then click on the "link" icon. A screen will appear that allows you to link to another page or link to a URL.

  14. #14
    SitePoint Enthusiast
    Join Date
    Feb 2013
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Ann C View Post
    www.lynda.com has tutorials on Wordpress.

    If I am understanding your post correctly, you have 3 images on a page. You want to click on the image and be redirected to a page.

    Select the image and then click on the "link" icon. A screen will appear that allows you to link to another page or link to a URL.
    You forget the text and css styling. I know how to place a image How would you do this ?

  15. #15
    SitePoint Enthusiast
    Join Date
    Feb 2013
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i only know how to hardcode it into the editor or into the page template file.!! This is not very user friendly, or what ?

  16. #16
    SitePoint Enthusiast
    Join Date
    Apr 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I understand your frustration with learning WordPress, but don't despair, it is a great product once you get your feet wet.

    I use this plugin for my images
    http://www.mihaivalentin.com/image-p...ge-management/

    with this plugin you can resize, and align on the fly... It creates all the styling for you.

  17. #17
    SitePoint Enthusiast
    Join Date
    Feb 2013
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is not what i am looking for and still does not answer my question at all. But thanks for showing me how you do.

  18. #18
    SitePoint Enthusiast
    Join Date
    Feb 2013
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You are just showing me a plugin that can resize images and align them right or left and so on. I want to make my own styling and apply classes and id's to my images, titles.

  19. #19
    Barefoot on the Moon! silver trophy
    Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,516
    Mentioned
    51 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ingenting View Post
    You are just showing me a plugin that can resize images and align them right or left and so on. I want to make my own styling and apply classes and id's to my images, titles.
    Post your code, and we'll start there. It's just easiest to build upon or revise what you've already done.

    Asking folks to build something from scratch for you can be a little much to ask.

    The other reason is that you haven't offered any details about exactly the problem is, and I'm still not entirely sure if your core issue is actually with HTML/CSS code or implementing wordpress PHP code. Without seeing what you've done so far, that's impossible to determine. It doesn't make sense for another forum member to put in some effort for you if it ends up not being what you're actually having trouble with.
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  20. #20
    SitePoint Enthusiast
    Join Date
    Feb 2013
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Five content blocks which contain an icon(font-face) and two lines of text. Each block is a link.

    HTML Code:
     <ul class="ca-menu">
                        <li>
                            <a href="#">
                                <span class="ca-icon">A</span>
                                <div class="ca-content">
                                    <h2 class="ca-main">Exceptional Service</h2>
                                    <h3 class="ca-sub">Personalized to your needs</h3>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="ca-icon">I</span>
                                <div class="ca-content">
                                    <h2 class="ca-main">Creative Storytelling</h2>
                                    <h3 class="ca-sub">Advanced use of technology</h3>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="ca-icon">C</span>
                                <div class="ca-content">
                                    <h2 class="ca-main">Infographical Education</h2>
                                    <h3 class="ca-sub">Understanding visually</h3>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="ca-icon">S</span>
                                <div class="ca-content">
                                    <h2 class="ca-main">Sophisticated Team</h2>
                                    <h3 class="ca-sub">Professionals in action</h3>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="ca-icon">d</span>
                                <div class="ca-content">
                                    <h2 class="ca-main">Unconditional Support</h2>
                                    <h3 class="ca-sub">24/7 for you needs</h3>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>

    Code:
    @font-face {
        font-family: 'WebSymbolsRegular';
        src: url('websymbols/websymbols-regular-webfont.eot');
        src: url('websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
            url('websymbols/websymbols-regular-webfont.woff') format('woff'),
            url('websymbols/websymbols-regular-webfont.ttf') format('truetype'),
            url('websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    .ca-menu{
        padding:0;
        margin:20px auto;
        width: 1020px;
    }
    .ca-menu li{
        width: 200px;
        height: 300px;
        overflow: hidden;
        position: relative;
        float:left;
        background: #fff;
        -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
        -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
        box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
        margin-right: 4px;
        -webkit-transition: all 300ms linear;
        -moz-transition: all 300ms linear;
        -o-transition: all 300ms linear;
        -ms-transition: all 300ms linear;
        transition: all 300ms linear;
    }
    .ca-menu li:last-child{
        margin-right: 0px;
    }
    .ca-menu li a{
        text-align: left;
        width: 100%;
        height: 100%;
        display: block;
        color: #333;
        position: relative;
    }
    .ca-icon{
        font-family: 'WebSymbolsRegular', cursive;
        font-size: 60px;
        color: #333;
        text-shadow: 0px 0px 1px #333;
        line-height: 150px;
        position: absolute;
        width: 100%;
        height: 50%;
        left: 0px;
        top: 0px;
        text-align: center;
        -webkit-transition: all 400ms linear;
        -moz-transition: all 400ms linear;
        -o-transition: all 400ms linear;
        -ms-transition: all 400ms linear;
        transition: all 400ms linear;
    }
    .ca-content{
        position: absolute;
        left: 0px;
        width: 100%;
        height: 50%;
        top: 50%;
    }
    .ca-main{
        font-size: 30px;
        opacity: 0.8;
        text-align: center;
        -webkit-transition: all 200ms linear;
        -moz-transition: all 200ms linear;
        -o-transition: all 200ms linear;
        -ms-transition: all 200ms linear;
        transition: all 200ms linear;
    }
    .ca-sub{
        text-align:center;
        font-size: 14px;
        color: #666;
        line-height: 40px;
        opacity: 0.8;
        position: absolute;
        bottom: 0;
        width: 100%; 
        -webkit-transition: all 200ms linear;
        -moz-transition: all 200ms linear;
        -o-transition: all 200ms linear;
        -ms-transition: all 200ms linear;
        transition: all 200ms linear;
    }
    .ca-menu li:hover{
        background-color: #000;
    }
    .ca-menu li:hover .ca-icon{
        color: #ff2020;
        -webkit-animation: moveFromBottom 300ms ease;
        -moz-animation: moveFromBottom 300ms ease;
        -ms-animation: moveFromBottom 300ms ease;
    }
    .ca-menu li:hover .ca-main{
        color: #ff2020;
        -webkit-animation: smallToBig 300ms ease;
        -moz-animation: smallToBig 300ms ease;
        -ms-animation: smallToBig 300ms ease;
    }
    .ca-menu li:hover .ca-sub{
        color: #000;
        background-color: #ff2020;
        -webkit-animation: moveFromBottom 500ms ease;
        -moz-animation: moveFromBottom 500ms ease;
        -ms-animation: moveFromBottom 500ms ease;
    }
    @-webkit-keyframes smallToBig{
        from {
            -webkit-transform: scale(0.1);
        }
        to {
            -webkit-transform: scale(1);
        }
    }
    @-moz-keyframes smallToBig{
        from {
            -moz-transform: scale(0.1);
        }
        to {
            -moz-transform: scale(1);
        }
    }
    @-ms-keyframes smallToBig{
        from {
            -ms-transform: scale(0.1);
        }
        to {
            -ms-transform: scale(1);
        }
    }
    
    @-webkit-keyframes moveFromBottom {
        from {
            -webkit-transform: translateY(100%);
        }
        to {
            -webkit-transform: translateY(0%);
        }
    }
    @-moz-keyframes moveFromBottom {
        from {
            -moz-transform: translateY(100%);
        }
        to {
            -moz-transform: translateY(0%);
        }
    }
    @-ms-keyframes moveFromBottom {
        from {
            -ms-transform: translateY(100%);
        }
        to {
            -ms-transform: translateY(0%);
        }
    }

  21. #21
    SitePoint Enthusiast
    Join Date
    Feb 2013
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone has a solution to this ? Really excited to here some wp proes answer to this thanks in advance.

  22. #22
    SitePoint Enthusiast
    Join Date
    Feb 2013
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you alive Force Flow ?

  23. #23
    Barefoot on the Moon! silver trophy
    Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,516
    Mentioned
    51 Post(s)
    Tagged
    1 Thread(s)
    ok, so it looks like the HTML/CSS is fine. So what you are now looking to do is add thw wordpress code? Have you looked at any of the articles I linked to?

    Are you familiar with any aspects of theme development, or is this your first time diving into this?
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  24. #24
    SitePoint Enthusiast
    Join Date
    Feb 2013
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Force Flow View Post
    ok, so it looks like the HTML/CSS is fine. So what you are now looking to do is add thw wordpress code? Have you looked at any of the articles I linked to?

    Are you familiar with any aspects of theme development, or is this your first time diving into this?
    I know some wordpress. I have build one blog theme from scratch.
    Yes i have looked at the pages... How would you build this ? Cant wait to hear

  25. #25
    Barefoot on the Moon! silver trophy
    Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,516
    Mentioned
    51 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ingenting View Post
    I know some wordpress. I have build one blog theme from scratch.
    Yes i have looked at the pages... How would you build this ? Cant wait to hear
    As I said earlier, the general idea is to use a secondary loop with WP_Query, then just pull the title, permalink, and featured image.
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •